Jquery（二）动画和ajax

题目1： jQuery 中， $(document).ready()是什么意思？

简单来说，就是当DOM准备就绪时，指定一个函数来执行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。

题目2： $node.html()和$node.text()的区别?

$node.html()是获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容。
$node.text()是得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

题目3： $.extend 的作用和用法?

作用：将两个或更多对象的内容合并到第一个对象。

var obj = {};
var obj1 = {
    name: "jirengu",
    age:2,
    num: [1,2,3]
}
var obj2 = {
    name: "hunger",
    content: "front-end"
}
$.extend(obj,obj1,obj2); 
console.log(obj); // {name:"hunger",age:2,num:[1,2,3],content:"front-end"}
obj.num[1] = 4;
console.log(obj); // {name:"hunger",age:2,num:[1,4,3],content:"front-end"}
console.log(obj1); // {name:"jirengu",age:2,num:[1,4,3]}
obj = {};
$.extend(true,obj,obj1,obj2); // 第一个参数为true，深拷贝
console.log(obj); // {name:"hunger",age:2,num:[1,4,3],content:"front-end"}
obj.num[1] = 2;
console.log(obj); // {name:"hunger",age:2,num:[1,2,3],content:"front-end"}
console.log(obj1); // {name:"jirengu",age:2,num:[1,4,3]}

题目4： jQuery 的链式调用是什么？

当jQuery的方法的返回值仍为当前对象时可以继续调用该对象的方法，这样就形成一种链式调用。例如：

$(#ct).css('width','300px').show(400).hide();

题目5： jQuery 中 data 函数的作用

作用：在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

//.data(key,value)：在匹配元素上存储任意相关数据
$("#target").data("jirengu",{name:"hunger",age:2});
console.log($("#target").data()); // {jirengu:{name:"hunger",age:2}}
console.log($("#target").data("jirengu").name); //"hunger"
// .data(obj):一个用于更新数据的 键/值对
$("#target").data({baz:[1,2,3]});
console.log($("#target").data()); // {jirengu:{name:"hunger",age:2},baz:[1,2,3]}
// .data(key):返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
console.log($("#target").data("baz")); // [1,2,3]

题目6：

写出以下功能对应的 jQuery 方法：
给元素 $node 添加 class active，给元素 $node 删除 class active

    $node.addClass("active");
    $node.removeClass("active");

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

    $node.hide();
    $node.show();

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

    $node.attr("id")
    $node.attr("src")
    $node.attr("title")
    $node.attr("id",str)
    $node.attr("src",str)
    $node.attr("title",str)

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

    $node.data("data-src",str);

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

    $("#ct").prepend($node)
    $node.prependTo($("#ct"))

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

    $("#ct").append($node)
    $node.appendTo($("#ct"))

删除$node

    $node.remove()

把$ct里内容清空

    $("#ct").empty()

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

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

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

    $node.width();  //获取匹配元素集合中的第一个元素的当前计算宽度值,不包括内边距、边框、外边距
    $node.height(); //获取匹配元素集合中的第一个元素的当前计算高度值,不包括内边距、边框、外边距
    $node.width(value);  //设置匹配元素集合中的第一个元素的当前计算宽度值,不包括内边距、边框、外边距
    $node.height(value); //设置匹配元素集合中的第一个元素的当前计算高度值,不包括内边距、边框、外边距
    $node.innerWidth();       //为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。
    $node.innerHeight(); //为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
    $node.outerWidth();  //获取元素集合中第一个元素的当前计算宽度值,包括padding，border,不包括margin。
    $node.outerWidth(true);  //获取元素集合中第一个元素的当前计算宽度值,包括padding，border，margin。
    $node.outerHeight();  //获取元素集合中第一个元素的当前计算高度值,包括padding，border,不包括margin。
    $node.outerHeight(true);  //获取元素集合中第一个元素的当前计算高度值,包括padding，border，margin。

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

    $(window).scrollTop()

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

    $node.offset()

修改$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()

题目7：

用jQuery实现以下操作
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

  var $btn = $("#btn");
  $btn.on("click",function(){
    $btn.css("background-color","red");
    setTimeout(function(){$btn.css("background-color","blue")},1000);
  })

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

    $(window).scroll(function(){
        console.log($(window).scrollTop())
    })

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

$("#div").mouseenter(function(){
    $("#div").css("background-color","red");
})
$("#div").mouseleave(function(){
    $("#div").css("background-color","white");
})

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

$(input).focus(function(){
    $(this).css("border-color","blue");
})
$(input).change(function(){
    $(this).val($(this).val().toUpperCase())
})
$(input).blur(function(){
    $(this).css("border-color","transparent");
    console.log($(this).val());
})

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

<select id="countries">
    <option value="USA">USA</option>
    <option value="CHINA">CHINA</option>
    <option value="JAPAN">JAPAN</option>
</select>
<script>
$("#countries").change(function(){
    console.log($(this).val())
})
</script>