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

当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档，因此无需选择器。
ready() 函数必需。规定当文档加载后要运行的函数。

允许使用以下三种语法：

语法一

  $(document).ready(function)

语法二

  $().ready(function)

语法三

  $(function)

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

$node.html()

• html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

  <ul class="warp">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
  </ul>
  <ul class="warp">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
  </ul>

只获取第一个匹配元素的html内容

• html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

如果有值就替换全部匹配的html内容

$node.text()

• text():取得所有匹配元素的内容。一般用id区别。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

不输入值，取得所有匹配元素的文本内容

• text(val):设置所有匹配元素的文本内容
  
  替换所有匹配元素的文本，不识别标签

区别：

.html()用为读取和修改元素的HTML标签和文本内容
.text()用来读取或修改元素的纯文本内容

.html()方法使用在多个元素上时，只读取第一个元素
.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

.html()和.text()都可以使用回调函数的返回值来动态的改变多个元素的内容。

$.extend 的作用和用法?

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

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

实例

  var obj1 = { a : 1 }
  var obj2 = { b : 2 , c : 3 }
  var obj3 = { b : 3 , d : 5 }
  var obj4 = { }
  $.extend( obj1 , obj2 )  // obj1 = { a : 1, b : 2 , c : 3 }
  $.extend( obj1 , obj2 , obj3 )  // obj1 = { a : 1, b : 3 , c : 3 , d : 5 }
  
  $.extend( obj4 , obj1 , obj2 , obj3 )  
  // obj4 = { a : 1, b : 3 , c : 3 , d : 5 }

  var obj5 = $.extend( { } , obj1 , obj2 , obj3 ) 
  //新建obj5 ， obj5 = { a : 1, b : 3 , c : 3 , d : 5 }

浅拷贝与深拷贝

var object1 = {
  a:1,
  b:{b1:2,b2:3}
};
var object2 = {
  c:3,
  b:{b2:4}
};
 
$.extend(object1, object2); 
console.log(object1); //  {a:1,b:{b2:4},c:3}
深拷贝：
$.extend(true,object1,object2);
console.log(object1); // {a:1,{b1: 2, b2: 4},c:3}

其实说白了就一句话，按从后往前的顺序，把后面的对象的值覆盖到第一个，并修改第一个对象的值

jQuery 的链式调用是什么？

实现原理是在当前函数执行完后return this，即返回该函数的执行环境，下一个函数就可以继续在这个函数下运行了，结果就是多种方法在一个jQuery对象上一个接一个地调用
链式调用在代码结构上十分清晰，又能简化代码。

  $("li").eq(1).click().end().eq(3).click();

jQuery 中 data 函数的作用

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

1.在匹配元素上存储任意相关数据.

  .data( key, value )
  .data( obj )

2.返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

   .data( key )
   .data()

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

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

.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，并获取这些值：

alert($('body').data('foo'));
alert($('body').data());

上面两行会显示先前设置在 body元素上设置的值。若果那个元素上没有设置任何值，那么将返回undefined。

alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar

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

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

  $node.addClass("active")  //添加
  $node.removeClass("active")  //移除

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

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

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

  $node.attr('id')
  $node.attr('src') 
  $node.attr('title') 

  //修改以上属性
  $node.attr({ id : "xxx", src : "xxx" , title : "xxx"}); 

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

  $node.attr('data-src','value')

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

  $ct.prepend($node)

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

  $ct.appendTo($node)

• 删除$node

  $node.remove

• 把$ct里内容清空

  $ct.empty()

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

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

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

  $node.width();//不包括内边距宽度,仅包括内容
  $node.height();//不包括内边距高度,仅包括内容

  $node.innerWidth();//包括内容和内边距宽度
  $node.innerHeight();//包括内容和内边距高度

  //不设置参数或设置false
  $node.outerWidth();//包括内容,内边距,边框宽度
  $node.outerHeight();//包括内容,内边距,边框高度

  $node.outerWidth(true);//包括内容,内边距,边框,外边距高度
  $node.outerHeight(true);//包括内容,内边距,边框,外边距宽度

设置宽高

  //不包括内边距
  $node.width(100)
  $node.height(100)
  $node.css({width:'200px',height:'300px'})
  //设置元素的宽度和高度，也可以不要引号和单位

  <!--//效果一样
  $node.width(100)
  $node.width('100')
  $node.width('100px')-->

  //包括内边距
  $node.innerWidth(30)
  $node.innerHeight(30)

  //包括内边距，包括边框
  $node.outerWidth(60)
  $node.outerHeight(60)

  //包括内边距，包括边框，包括外边距
  $node.outerWidth(70,true)
  $node.outerHeight(70,true)

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

  $(window).scrollTop()

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

   $node.offset().left // 水平偏移距离;
   $node.offset().top // 垂直偏移距离;

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

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

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

  $node.each(function(){
    var str = $(this).text()
    $(this).text( str + str);
  });

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

  $ct.find('.item')

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

  $ct.children();

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

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

• 获取选择元素的数量

  $node.length

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

$node.index();

用jQuery实现以下操作

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

  $btn.on('click',function(){
    $btn.css({'background-color','red'})；
  setTimeout(function(){
    $btn.css({'background-color','blue'})；
  },500)
  })

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

  $(window).scroll(function(){
    var scrollTop = parseInt($(window).scrollTop())+'px';
    console.log('scrollTop:',scrollTop);
  })

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

  $div.on('mouseenter',function(){
    $div.css("backgroundColor","red")
  })
  $div.on('mouseleave',function(){
    $div.css("backgroundColor","white")
  })

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

var $input = $('input')
$input.focus(function () {
    $(this).css('border-color', 'blue')
        .on('keyup', function () {
            $(this).val($(this).val().toUpperCase())
        })
})

$input.blur(function () {
    $(this).css('border-color', 'black')
    console.log($(this).val())
})

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

  <div class="select">
    <select name="username" id="user">
    <option value="小明">小明</option>
    <option value="小红">小红</option>
    <option value="小刚">小刚</option>
  </select>
  <div class="result">
    小明
  </div>
  </div>

  <script>
      $('#user').on('change',function(){
      $('.result').text($(this).val());
    });
  </script>

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

index.html

<style>
    body {
        text-align: center;
    }

    ul {
        list-style: none;
        padding: 0;
    }

    li {
        list-style: none;
        border: 1px solid #ccc;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    li:hover {
        background: green;
        color: #fff;
    }
    button{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        width: 80px;
        border: 1px solid #E27272;
        border-radius: 3px;
        text-align: center;
        text-decoration: none;
        color: #E27272;
        background-color: #fff;
    }
</style>

<ul>
    <li>新闻1</li>
    <li>新闻2</li>
</ul>
<button>加载更多</button>
<script>
    let idx = 3, len = 3;
    $('button').on('click', function () {
        $.ajax({
            url: 'news',
            method: 'get',
            dataType: 'JSON',
            data: {
                length: len,
                index: idx
            }
        }).done(function (data) {
            idx += 3;
            appendHtml(data);
        }).fail(function () {
            alert('fail');
        })
    });
    let appendHtml = function (data) {
        for (let i in data) {
            $('<li>' + data[i] + '</li>').appendTo('ul');
        }
    }
</script>

router.js

app.get('/news', function (req, res) {
    var pos = req.query.index;
    var len = req.query.length;
    var data = [];
    for(var i=0; i<len; i++)
        data.push('新闻'+(parseInt(pos)+i));
    res.send(data);
});

实现一个天气预报页面，UI 如下图所示(仅供参考，可自由发挥)。数据接口:

获取天气接口：http(s)://weixin.jirengu.com/weather
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据，返回数据以及使用方式参考 http://api.jirengu.com29

更多接口参考 http://api.jirengu.com29

参考资料

• 浅析JQuery中的html(),text(),val()区别
• jQuery.extend()
• jquery中attr和prop的区别