jQuery ajax

jQuery 中， $(document).ready()是什么意思？

• $(document).ready()的作用是当DOM准备就绪时，指定一个函数来执行。
  大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数

如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。

$(document).ready(handler)
$(handler)

$(function(){
  console.log('ready');
});

$node.html()和$node.text()的区别?

• $node.html()获取/设置被选元素的节点包括html结构

$(".box").html() //获取元素内部的html内容，类似于innerHTML
$(".box").html("<p>设置了一个段落</p>")//设置了元素内部的html内容,标签生效

• $node.text()获取/设置被选元素的文本节点

$(".box").text() //获取元素内部的text文本，类似于innerText
$(".box").text("设置了一个文本")//设置了元素内部的text文本

$.extend 的作用和用法?

jQuery.extend( target [, object1 ] [, objectN ] )

• 将两个或更多对象的内容合并到第一个对象

var obj1 = {name:'wing'}
var obj2 = {age:19}
var obj3 = {name:'hcb',age:20}
var obj4 = {}
var obj5 = $.extend(obj4,obj1,obj2,obj3) //{name: "hcb", age: 20}

jQuery 的链式调用是什么？

• 使用jQuery方法时，对象方法返回的是对象本身，可以调用对此对象的其他jQuery方法，实现连续调用多个方法
  例：$(this).siblings().removeClass('active')

jQuery 中 data 函数的作用

data([key],[value])
在元素上存放或读取数据，返回jQuery对象。

例子：
$("body").data("foo" , 18);
$("body").data("abc", { name: "text", sex: 20 });
$("body").data({cba:[a,b,c]});
$("body").data("foo"); // 18
$("body").data() // {foo: 18, abc: {name: "text", sex: 20}, cba:[a,b,c]}

写出以下功能对应的 jQuery 方法：

• 给元素 $node 添加 class active，给元素 $noed 删除 class active

$node.addClass('active') //添加
$noed.removeClass('active') //删除

• 展示元素$node, 隐藏元素$node

$node.show(); //展示
$node.hide(); //隐藏

• 获取元素$node 的 属性: id、src、title， 修改以上属性

//获取并修改
$node.attr('id','newId');
$node.attr('src','newSrc');
$node.attr('title','newTitle');

• 给$node 添加自定义属性data-src

$node.attr("data-src","value");

• 在$ct内部最开头添加元素$node

$ct.prepend($node);

• 在$ct 内部最末尾添加元素$node

$ct.append($node);

• 删除$node

$node.remove();

• 把$ct里内容清空

$ct.empty();

• 在$ct 里设置<div class="btn"></div>

$ct.html('<div class="btn"></div>');

• 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

//不包括内边距
$node.width();
$node.height();
//包括内边距
$node.innerWidth();
$node.innerHeight();
//包括内边距、包括边框
$node.outerWidth();
$node.outerHeight();
//包括内边距、包括边框、包括外边距
$node.outerWidth(true);
$node.outerHeight(true);

• 获取窗口滚动条垂直滚动距离

$(window).scrollTop();

• 获取$node 到根节点水平、垂直偏移距离

$node.offset().left;　//水平
$node.offset().top;   //垂直

• 修改$node 的样式，字体颜色设置红色，字体大小设置14px

$node.css({color:'red',  'font-size':'14px'});

• 遍历节点，把每个节点里面的文本内容重复一遍

$node.each(function(){
  console.log($(this).text());
});

• 从$ct 里查找 class 为 .item的子元素

$ct.find('.item');

• 获取$ct 里面的所有孩子

$ct.children();

• 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子

$node.parents('.ct').find('.panel');

• 获取选择元素的数量

$node.length;

• 获取当前元素在兄弟中的排行

$node.index();

用jQuery实现以下操作

• 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

$("#btn").on("click",function(){
  $(this).css("background-color":"red")
//设置定时
  setTimeout(function(){
    $("#btn").css("background-color":"blue")
  },1000)
})

• 当窗口滚动时，获取垂直滚动距离

$(window).on("scroll",function(){
  $("node").text($(window).scrollTop()+"px");
});

• 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色

$btn.on('mouseenter',function(){
  $(this).css('background','red')
}).on('mouseleave',function(){
  $(this).css('background','white')
})

• 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

<input id="ipt" type="text">

$("#ipt").on("focus",function(){
  $(this).css({"outlineColor":"blue"})
})
//键盘事件
$("#ipt").on("keydown",function(){
  $(this).val($(this).val().toUpperCase())
})
$("#ipt").on("blur",function(){
  $(this).css({"outlineColor":"none"})
  console.log($(this).val())
})

• 当选择 select 后，获取用户选择的内容

$('#city').change(function(){
  var $val = $(this).val()
  $('.user-select').text('选择：' + $val)
})

用 jQuery ajax 实现效果。当点击加载更多会加载数据展示到页面

• 启用mock start

mock start

代码地址