jQuery

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

当ＤＯＭ元素加载完之后执行．以下三种方法等价：

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

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

$node.html()获取的是匹配元素集合中第一个元素的ＨＴＭＬ内容
$node.text()获取的是匹配元素集合中每个元素的文本内容

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

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

var object = $.extend({}, object1, object2);//object1和object2内容合并到空对象中，然后赋值给object
$.extend(object1, object2);//将object1和object2合并到object1中,object1改变
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
 var settings = $.extend({}, defaults, options);
console.log(settings)// {validate: true, limit: 5, name: "bar"}

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

使用jQuery方法后返回的是对象本身，然后就可以继续对这个对象使用其他jQuery方法。链式调用的优点是代码简洁易读，减少了多次重复使用同一个变量。举例:

$(‘#id’).show().hide().show().hide().show().hide();

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

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

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
 
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

题目6：

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

     $node.addClass('active')//给元素 $node 添加 class active
    $node.removeClass('active')//给元素 $noed 删除 class active
    $node.show().hide()//展示元素$node, 隐藏元素$node
    $node.attr('id')
    $node.attr('src')
    $node.attr('title')
    $node.attr({
       id: 'xxx',
       src: 'xxx',
       title: 'xxx'})//获取元素$node 的 属性: id、src、title， 修改以上属性
    $node.data('src','xxxx')//给$node 添加自定义属性data-src
    $ct.prepend(node)//在$ct 内部最开头添加元素$node
    $ct.append(node)// $node在$ct 内部最末尾添加元素$node
    $node.remove()//删除$node
    $ct.empty()//把$ct里内容清空
    $ct.html('<div class="btn"></div>')//在$ct 里设置 html <div class="btn"></div>
    $node.width()//包括content
    $node.height()
    $node.innerWidth()//包括padding和content
    $node.innerHeight()
    $node.outerWidth()//包括border和padding和content
    $node.outerHeight()
    $node.outerWidth(true)//包括margin.border和padding和content
    $node.outerHeight(true)//获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
    $(window).scrollTop()//获取窗口滚动条垂直滚动距离
    $node.offset().left
    $node.offset().top//获取$node 到根节点水平、垂直偏移距离
    $node.css({'color': 'red','font-size':'14px'})//修改$node 的样式，字体颜色设置红色，字体大小设置14px
    $node.each(function(){
        console.log($(this).text())
    })//遍历节点，把每个节点里面的文本内容重复一遍
    $ct.find('.item')//从$ct 里查找 class 为 .item的子元素
    $ct.children()//获取$ct 里面的所有孩子
    $node.parent('.ct').children('.panel')//对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
    $node.length//获取选择元素的数量
    $node.index()//获取当前元素在兄弟中的排行

题目7：

$('button').on('click',function () {
    $btn.css('background','red').css('background','blue')//当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
})
$('window').on('scroll',function(){
    consloe.log($('window').scrollTop())
})//当窗口滚动时，获取垂直滚动距离
$('button').on('mouseenter',function () {
   $('button').css('background','red')
})
$('button').on('mouseout',function () {
    $('button').css('background','#fff')
})//当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
$('input').on('focus',function () {
    $('input').css('border','1px solid blue')
})
$('input').on('change',function () {
    $('input').val($('input').val().toUpperCase())
})
$('input').on('blur',function () {
    $('input').css('border','')
    console.log($('input').val())
})
//当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
$('select').on('change',function(){
    var str = ''
    $('select option:selected').each(function () {
        str +=$(this).text() + ''
    })
    $('p').text(str)
})
//当选择 select 后，获取用户选择的内容

题目8： 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览311

代码