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

通常我们都会强调，一定要把JS写在代码最后，以便等所有内容加载完成在渲染，使得不会出现报错。但是有一种办法可以不用这么安排。

这里补充一下：*window.onload*这样做虽然不用特意将JS文件放到代码最后，但是如果页面图片的加载元素过多也会使得整个页面加载时间拖得很久，这是弊端

在原生JS中：

  <html>
    <head>
      <meta charset="utf-8">
      <title>jquerytest2</title>
      <script type="text/javascript">
        window.onload = function(){
          //解析到script标签时还没有body，但是window只要开始就存在，所有这里改为window
      </script>
    </head>
  <body>
    <script type="text/javascript">
      document.body.onload = function(){
        //把所有的js都放在这个函数中，等到所有HTML加载完成才会执行而不会报错
      }
    </script>

在jQuery中：

  <html>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    $(document).ready(function(){
      //把所有的js都放在这个函数中，等到所有HTML加载完成才会执行而不会报错
    })
    <head>
    </head>
  </html>

简化版也可以这样写：

  <html>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    $(function(){
      //把所有的js都放在这个函数中，等到所有HTML加载完成才会执行而不会报错
    })
    <head>
    </head>
  </html>

原生onload与JS下ready的区别：

JS：ready:
在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。
原生onload:
当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。
如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。

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

$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容

  <body>
    <div id="ct">
      <div class="box"></div>
      <button class="btn1">隐藏</button>
      <button class="btn2">展示</button>
    </div>
  </body>

$node.html()具体解释
 $node.text()具体解释

3，$.extend 的作用和用法?

extend作用：
$.extend(目标对象，先对象，后对象，...)
后对象中有的属性替换先对象的属性值，没有的属性仍然使用先对象的属性值。

用法：

$.extend(obj,obj1)

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
  var obj={};
  var obj1 = {
    name: 'harrisking',
    age: '23',
    sex: 'man'
  };
  $.extend(obj,obj1); //obj={ name: 'harrisking', age: '23', sex: 'man'}

$.extend(obj,obj1,obj2)

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
  var obj={};
  var obj1 = {
    name: 'harrisking',
    age: '23',
    sex: 'man'
  };
  var obj2 = {
    name: 'marry',
    sex: 'woman'
  };
  $.extend(obj,obj1,obj2); //obj={ name: 'marry', age: '23', sex: 'woman'}

var opts = $.extend({ },obj1,obj2)

  //extend非常常用的用法：

  function getMessage(obj){
    var defult = {
      name: '佚名',
      age: '未知',
      sex: '中性'
    }
    var ops = {};
    var opts = $.extend({}, defult, obj)
    //也可以$.extend(opts, defult, obj);
    console.log(opts);
  }
  getMessage();

extend(true, obj, obj1)

  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
  <script type="text/javascript">
    var obj={};
    var obj1 = {
      name: 'harrisking',
      age: '23',
      sex: 'man',
      friend:[1,2,3]
    };
    $.extend(obj,obj1);
    console.log(obj);
</script>

  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
  <script type="text/javascript">
    var obj={};
    var obj1 = {
      name: 'harrisking',
      age: '23',
      sex: 'man',
      friend:[1,2,3]
    };
    $.extend(true,obj,obj1);
    console.log(obj);
</script>

4， jQuery 的链式调用是什么？

jQuery链式调用：在对象上一次性调动多个方法
$(this).addClass("active").siblings().removeClass("active")
因为大部分对象方法的最后是return this，所以有了链式调用，简易代码。

相关博客

5， jQuery 中 data 函数的作用

用于在匹配元素上存储数据。

data.()具体介绍

6，JQuery ajax 中缓存怎样控制?

cache (默认 : true, dataType 为 "script" 和 "jsonp" 时默认为 false)
如果设置为 false ，浏览器将不缓存此页面。注意: 设置cache
为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"（加上时间戳）

7，写出以下功能对应的 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('tittle')

  修改：
  $node.attr('id','ct1')
  $node.attr('src','http://a.har.com')

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

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

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

  $ct.prepend($node)

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

  $ct.append($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()
  
  包括内边距、边框，不包括外边距：
  $node.outerWidth()
  $node.outerHeight()

  包括内边距、外边距、边框：
  $node.outerWidth(true)
  $node.outerHeight(true)

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

  $(window).scrollTop()

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

  $node.offset()

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

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

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

  $node.each(function(){
      $(this).text($(this).text()+$(this).text())
  })

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

  $ct.find('.item')

获取$ct 里面的所有孩子

  $ct.children()

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

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

获取选择元素的数量

  $node.length

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

  $node.index()

8，完成如下要求：

用jQuery实现以下操作当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
当窗口滚动时，获取垂直滚动距离
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
当选择 select 后，获取用户选择的内容

网页效果预览

9，完成如下页面效果预览9

HTML端：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery任务二</title>
    <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
      .cot li{
        border: 1px solid #ccc;
        height:40px;
        list-style: none;
        margin: 10px 0;
        line-height: 40px;
        padding-left: 10px;
      }
      .btn{
        display: inline-block;
        width: 80px;
        height:30px;
        border:1px solid red;
        color:red;
        text-align: center;
        line-height: 30px;
        border-radius: 5px;
        cursor: pointer;
        position: absolute;
        left:50%;
        margin-left: -40px;
      }
      .btn:hover{
        background: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <ul class="cot">
      <li>内容1</li>
      <li>内容2</li>
    </ul>
    <a class="btn">加载更多</a>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
    $('.cot').on('mouseenter','li',function(){
      $(this).css({
        background: 'green',
        color: 'white'
      })
    });
    $('.cot').on('mouseleave','li',function(){
      $(this).css({
        background: 'white',
        color: 'black'
      })
    });
    var index = 1
    $('.btn').on('click',function(){
      $.ajax({
        url: '/loading',
        method: 'get',
        data:{
          len:3,
          start:index
        }
      }).done(function(result){
        appendHtml(result);
        index++;
      }).fail(function(){
          console.log('error')
      })
      function appendHtml(info){
        var html = "";
        html += '<li>'+"内容"+info.array[0]+'</li>',
        html += '<li>'+"内容"+info.array[1]+'</li>',
        html += '<li>'+"内容"+info.array[2]+'</li>',
        $('.cot').append(html);
      }
    })
    </script>
  </body>
</html>

后台端：

app.get('/loading', function(req, res) {
    var loadDate = req.query.len*req.query.start;
    var array=[loadDate,loadDate+1,loadDate+2]
    res.send({
        status: 0,
        array
    });
});

10，实现一个天气预报页面，前端展示自由发挥，数据接口: http://api.jirengu.com/weather.php

(选做题目)

我的前端学习笔记27——jQuery动画与ajax

我的前端学习笔记27——jQuery动画与ajax

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

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

3，$.extend 的作用和用法?

4， jQuery 的链式调用是什么？

5， jQuery 中 data 函数的作用

6，JQuery ajax 中缓存怎样控制?

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

8，完成如下要求：

网页效果预览

9，完成如下页面效果预览9

10，实现一个天气预报页面，前端展示自由发挥，数据接口: http://api.jirengu.com/weather.php

推荐阅读更多精彩内容

我的前端学习笔记27——jQuery动画与ajax

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

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

3，$.extend 的作用和用法?

4， jQuery 的链式调用是什么？

5， jQuery 中 data 函数的作用

6，JQuery ajax 中缓存怎样控制?

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

8，完成如下要求：

网页效果预览

9，完成如下页面 效果预览9

10，实现一个天气预报页面，前端展示自由发挥，数据接口: http://api.jirengu.com/weather.php

推荐阅读更多精彩内容

9，完成如下页面效果预览9