牛 X 的 jQuery-一一网

jQuery 到底有多牛 X？

jQuery 发布于 2006 年，是目前为止前端最长寿的库。也是世界上使用最广泛的库，全球排名前十万的网站，有 80% 依然在使用 jQuery
这是截止今年三月份 jQuery 的使用数据

为什么 jQuery 这么牛？

先来看看 jQuery 最显著的特点

有多简单？举个例子：

如果不用 Query，JS 的事件监听(兼容 IE6)要这么写

    if (button.addEventListener)  
        button.addEventListener('click',fn);
    else if (button.attachEvent) { 
        button.attachEvent('onclick', fn);
    }else {
        button.onclick = fn;
    }
复制代码

但是如果你用 jQuery，你只需要这么写

    $(button).on('click', fn)
复制代码

如果你想获取 .nav > .navItem 对应的所有元素，用 jQuery 是这样写的

    $('.nav > .navItem')
复制代码

在 IE 6 上，你得这么写

    var navItems = document.getElementsByClassName('navItem')
    var result = []
    for(var i = 0; i < navItems.length; i++){
       if(navItems[i].parentNode.className.match(/\bnav\b/){
           result.push(navItems[i])
       }
    }
复制代码

它解决了dom api兼容的问题，使得 dom 操作更简便
它支持类似 css 选择器的方式来选择组件
支持批量的操作数组中的元素，也叫隐式迭代
支持链式操作，可以在一条语句中完成很复杂的逻辑
有易于使用的插件扩展机制
deffered 的异步方案比 promise 更早。

jQuery 过时了吗？

从前几年开始，就几乎没有新项目会使用 jQuery 来开发了；即使有，也是一件不值得拿出来炫耀的事情。
jQuery 解决了诸多前段技术上的痛点，给前端带来的影响是空前的。但是随着前端的发展，jQuery 也进入了一个过时的状态，它为我们解决的痛点都已经有了更好的替代方案。
jQuery 虽然过时了，但是 jQuery 仍然是前端开发的必备技能，对于一个前端新人，这个坑一定得踩。

jQuery 设计思想

jQuery 入口函数
- 等待页面 DOM 加载完毕再执行 JS，传统写法
```
$(document).ready(function() { JQueryCode })
复制代码
```
- 更为简洁的写法,相当于原生 JS 中的 DOMContentLoaded
```
$(function() { JQueryCode })
复制代码
```
jQuery 顶级对象 $
- $ 其实是 JQuery 的别称，在代码中可以用 jQuery 代替 $ ，但 $ 更为简单。
- $ 是 jQuery 中的顶级对象，相当于原生 JS 中的 window，把元素利用 $ 包装成了 jQuery 对象。
jQuery 对象和 DOM 对象
- DOM 对象：用原生 JS 获取的元素
```
var myDiv = document.querySelector('div');
复制代码
```
- jQuery 对象：用 jQuery 方式获取的对象，他的实质是通过 $ 对元素对象进行了包装,并以伪数组的形式存储
```
$('div');
复制代码
```
- jQuery 对象只能使用 jQuery 方法，而 DOM 对象只能使用原生 JS 的属性和方法。他们之间是可以相互转换的
  
  ① DOM 对象转换为 jQuery 对象：$(DOM对象);
  
  ② Query 对象转换为 DOM 对象：
```
$('div').get(index); // index是索引号
// 或者
$('div')[index];
复制代码
```

选择网页元素

jQuery 的基本设计思想和主要用法，就是”选择某个网页元素，然后对其进行某种操作”。这是它区别于其他 Javascript 库的根本特点。
选择表达式可以是 CSS 选择器：

    $(document) //选择整个文档对象
    $('#myId') //选择ID为myId的网页元素
    $('div.myClass') // 选择class为myClass的div元素
    $('input[name=first]') // 选择name属性等于first的input元素
复制代码

也可以是jQuery特有的表达式：

    $('a:first') //选择网页中第一个a元素
    $('tr:odd') //选择表格的奇数行
    $('#myForm :input') // 选择表单中的input元素
    $('div:visible') //选择可见的div元素
    $('div:gt(2)') // 选择所有的div元素，除了前三个
    $('div:animated') // 选择当前处于动画状态的div元素
复制代码

改变结果集

jQuery 设计思想: 提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。

    　$('div').has('p'); // 选择包含p元素的div元素
      $('div').not('.myClass'); //选择class不等于myClass的div元素
      $('div').filter('.myClass'); //选择class等于myClass的div元素
      $('div').first(); //选择第1个div元素
      $('div').eq(5); //选择第6个div元素
复制代码

有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery 也提供了在 DOM 树上的移动方法：

    　$('div').next('p'); //选择div元素后面的第一个p元素
      $('div').parent(); //选择div元素的父元素
      $('div').closest('form'); //选择离div最近的那个form父元素
      $('div').children(); //选择div的所有子元素
      $('div').siblings(); //选择div的同级元素

复制代码

链式调用
- 这是 jQuery 最令人称道、最方便的特点。它的原理在于每一步的 jQuery 操作，返回的都是一个jQuery 对象，所以不同操作可以连在一起。
- jQuery 还提供了 .end() 方法，使得结果集可以后退一步：
```
    $('div')
       .find('h3')
       .eq(2)
       .html('Hello')
       .end() //退回到选中所有的h3元素的那一步
       .eq(0) //选中第一个h3元素
       .html('World'); //将它的内容改为World
复制代码
```
样式操作
- 基本方式
```
 /* $(function() {
        $('选择器').css('属性', '值');
    }) */
    $('.current').css('backgroundColor', 'red');
复制代码
```
- 隐式迭代
- jQuery 会将获取的元素以伪数组的形式进行存储，同时对匹配到的所有元素进行循环遍历，而不用我们再去手动遍历，这个内部遍历执行的过程就叫隐式迭代。
- jQuery 排他思想，利用隐式迭代，省去 for 循环，再利用 siblings 查找兄弟节点但不包括自身的特性
```
        $(element).click(function(){
                $(this).css('styleCode', 'style');
                $(this).siblings().css('styleCode', '');
        })
复制代码
```
元素的操作
- jQuery 设计思想: 使用同一个函数，来完成取值（getter）和赋值（setter），即”取值器”与”赋值器”合一。到底是取值还是赋值，由函数的参数决定。
```
    　　$('h1').html(); //html()没有参数，表示取出h1的值

        $('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
复制代码
```
- 常见的取值和赋值函数如下：
```
　.html() 取出或设置html内容
  .text() 取出或设置text内容
  .attr() 取出或设置某个属性的值
  .width() 取出或设置某个元素的宽度
  .height() 取出或设置某个元素的高度
  .val() 取出某个表单元素的值
复制代码
```
- 需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的 text 内容）。
- 遍历元素
  
  jQuery 隐式迭代是对同一类元素做了相同的操作，如果想要给同一类元素做不同操作，就需要用到遍历
  
  each()方法遍历元素：
```
  $("div").each(function(index, DOMEle) { jQueryCode })
复制代码
```
- index:索引号
  
  DOMEle：每个 DOM 元素，不是 jQuery 对象，要使用$包装后才能使用 jQuery 方法，否则只能使用原生 JS 方法。
- $.each() 方法遍历元素：
```
    var arr = [1, 2, 3];
    $.each(arr, function(index, value) {
        jQueryCode
    })
复制代码
```
- $.each()方法可以用于遍历任何对象，主要用来处理数据，比如遍历数组、对象
  index 同样是索引（遍历对象时，index 为 key ），value 是遍历的内容（值）
元素的操作：移动
- jQuery 设计思想: 提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
  
  假定我们选中了一个 div 元素，需要把它移动到p元素后面。
  
  第一种方法是使用.insertAfter()，把 div 元素移动 p 元素后面：
```
     $('div').insertAfter($('p'));
复制代码
```
- 第二种方法是使用.after()，把 p 元素加到 div 元素前面：
```
     $('p').after($('div'));
复制代码
```
- 表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回 div 元素，第二种方法返回 p 元素。你可以根据需要，选择到底使用哪一种方法。
- 使用这种模式的操作方法，一共有四对：
```
  .insertAfter()和.after()：//在现存元素的外部，从后面插入元素
  .insertBefore()和.before()：//在现存元素的外部，从前面插入元素
  .appendTo()和.append()：//在现存元素的内部，从后面插入元素
  .prependTo()和.prepend()：//在现存元素的内部，从前面插入元素
复制代码
```

元素的操作：复制、删除和创建

除了元素的位置移动之外，jQuery 还提供其他几种操作元素的重要方法。
复制元素使用 .clone()。
删除元素使用 .remove() 和 .detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

清空元素内容（但是不删除该元素）使用 .empty()。

创建新元素的方法非常简单，只要把新元素直接传入 jQuery 的构造函数就行了：

      $('<p>Hello</p>');
      $('<li class="new">new list item</li>');
      $('ul').append('<li>list item</li>');
复制代码

    //创建元素：
    var li = $("<li></li>"); // 创建一个 li 标签
复制代码

    //添加元素：
    $("ul").append(li); // 内部添加 添加的元素在 ul 内部元素的最后面
    $("ul").prepend(li); // 最前面
复制代码

    var div = $("<div></div>");
    $("div").before(div); // 外部添加 添加的元素在目标元素 div 的前面
    $("div").after(div); // 目标元素的后面
复制代码

    移除元素：
    $("div").remove(); // 删除指定元素 div 本身
    $("ul").empty(); // 删除指定元素中所有子节点
    $("ul").html(""); // 清空指定元素中的内容，基本等同 empty
复制代码

尺寸、位置操作

jQuery 尺寸：返回值均为数字型，不带单位

    width()/height()   获得元素的宽度和高度
    innerWidth()/innerHeight()	获得元素包含 padding 的宽度和高度
    outerWidth()/outerHeight()	获得元素包含 padding、border 的宽度和高度
    outerWidth(true)/outerHeight(true)	获得元素包含 padding、border、margin 的宽度和高度
    以上参数为空，返回相应值，参数为数字，则是修改相应值
复制代码

jQuery 位置：

offset() 设置获取元素相对于文档的偏移坐标，和父级没有任何关系

    // 获取：
    $(element).offset();
    $(element).offset().top;
    $(element).offset().left;
    // 设置
    $(element).offset({ top: 200, left: 300 });
复制代码

position() 获取元素对于带有定位父元素的偏移坐标，如果父级都没有定位，则以文档为准。
position() 方法只能获取，不能设置

    // 获取：
    $(element).position();
    $(element).position().top;
    $(element).positon().left;
复制代码

scrollTop() 和 scrollLeft() 设置获取元素被卷去的头部和左侧。

    // 获取页面被卷去的头部
    $(document).scrollTop();
    // 设置页面被卷去的头部
    $(document).scrollTop(100);
复制代码

工具方法

jQuery 设计思想: 除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。
如果你懂得 Javascript 语言的继承原理，那么就能理解工具方法的实质。它是定义在 jQuery 构造函数上的方法，即 jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的 prototype 对象上的方法，即 jQuery.prototype.method()，所以必须生成实例（即选中元素）后使用。如果不理解这种区别，问题也不大，只要把工具方法理解成，是像 javascript 原生函数那样，可以直接使用的方法就行了。
常用的工具方法有以下几种：

    　$.trim() 去除字符串两端的空格。
      $.each() 遍历一个数组或对象。
      $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
      $.grep() 返回数组中符合某种标准的元素。
      $.extend() 将多个对象，合并到第一个对象。
      $.makeArray() 将对象转化为数组。
      $.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
      $.isArray() 判断某个参数是否为数组。
      $.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
      $.isFunction() 判断某个参数是否为函数。
      $.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
      $.support() 判断浏览器是否支持某个特性。
复制代码

事件操作

jQuery 设计思想: 把事件直接绑定在网页元素之上。

    　$('p').click(function(){
           alert('Hello');
      });
复制代码

目前，jQuery主要支持以下事件：

     .blur() 表单元素失去焦点。
     .change() 表单元素的值发生变化
     .click() 鼠标单击
     .dblclick() 鼠标双击
     .focus() 表单元素获得焦点
     .focusin() 子元素获得焦点
     .focusout() 子元素失去焦点
     .hover() 同时为mouseenter和mouseleave事件指定处理函数
     .keydown() 按下键盘（长时间按键，只返回一个事件）
     .keypress() 按下键盘（长时间按键，将返回多个事件）
     .keyup() 松开键盘
     .load() 元素加载完毕
     .mousedown() 按下鼠标
     .mouseenter() 鼠标进入（进入子元素不触发）
     .mouseleave() 鼠标离开（离开子元素不触发）
     .mousemove() 鼠标在元素内部移动
     .mouseout() 鼠标离开（离开子元素也触发）
     .mouseover() 鼠标进入（进入子元素也触发）
     .mouseup() 松开鼠标
     .ready() DOM加载完成
     .resize() 浏览器窗口的大小发生改变
     .scroll() 滚动条的位置发生变化
     .select() 用户选中文本框中的内容
     .submit() 用户递交表单
     .toggle() 根据鼠标点击的次数，依次运行多个函数
     .unload() 用户离开页面
复制代码

以上这些事件在 jQuery 内部，都是 .bind() 的便捷方式。使用 .bind() 可以更灵活地控制事件，比如为多个事件绑定同一个函数：

    $('input').bind(
       'click change', //同时绑定click和change事件
       function() {
         alert('Hello');
       }
     );
复制代码

有时，你只想让事件运行一次，这时可以使用 .one() 方法。

    　$("p").one("click", function() {
           alert("Hello"); //只运行一次，以后的点击不会运行
      });
复制代码

.unbind()用来解除事件绑定。

　　$('p').unbind('click');
复制代码

on 绑定事件
语法：

   element.on(events, [selector], fn);
   /* events:事件类型，一个或多个用空格分隔的事件字符串，如"click"，"mouseenter"
   selector：事件绑定元素的子元素选择器
   fn： 回调函数 */
复制代码

  // 事件结果不一致
  $(".demo").on({
      mouseenter: function(){
          $(this).css("color", "red");	
      },
      click: function() {
           $(this).css("background", "skyblue");
      }
  })

  // 事件结果一致
  $(".demo").on("mouseenter mouseout", function() {
      $(this).toggleClass("csstyle");
  })
复制代码

on 绑定事件实现事件委派

   $("ul").on("mouseover", "li", function() { JSCode })
复制代码

on 绑定事件实现给未来动态创建的元素绑定事件

   $("ol").on("click", "li", function(){ alert("Hello"); })
   var li = $("<li></li>");
   $("ol").append(li);
复制代码

off() 方法可以解绑通过 on() 绑定的事件处理程序

   $("div").on({
       mouseenter: function() { alert("鼠标经过事件") },
       click: function() { alert("鼠标点击事件") }
   });
   $("div").off(); // 全部解绑
   $("div").off("click"); // 指定事件解绑
复制代码

jQuery 自动触发事件
简写写法：

   // 元素.事件();
   $("div").click();
复制代码

trigger() 方法:

   $("div").trigger("click");
复制代码

triggerHandler() 方法：此方法不会触发元素的默认行为

   $("div").triggerHandler("click");
复制代码

jQuery 事件对象的属性和方法

     event.pageX 事件发生时，鼠标距离网页左上角的水平距离
     event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
     event.type 事件的类型（比如click）
     event.which 按下了哪一个键
     event.data 在事件对象上绑定数据，然后传入事件处理函数
     event.target 事件针对的网页元素
     event.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）
     event.stopPropagation() 停止事件向上层元素冒泡
复制代码

在事件处理函数中，可以用 this 关键字，返回事件针对的 DOM 元素：

    　$('a').click(function(e) {
           if ($(this).attr('href').match('evil')) { //如果确认为有害链接
               e.preventDefault(); //阻止打开
               $(this).addClass('evil'); //加上表示有害的class
           }
      });
复制代码

特殊效果

最后，jQuery 允许对象呈现某些特殊效果。

    　.fadeIn() 淡入
      .fadeOut() 淡出
      .fadeTo() 调整透明度
      .hide() 隐藏元素
      .show() 显示元素
      .slideDown() 向下展开
      .slideUp() 向上卷起
      .slideToggle() 依次展开或卷起某个元素
      .toggle() 依次展示或隐藏某个元素
复制代码

除了 .show()和 .hide()，所有其他特效的默认执行时间都是 400ms（毫秒），但是你可以改变这个设置。

  　$('h1').fadeIn(300); // 300毫秒内淡入
    $('h1').fadeOut('slow'); // 缓慢地淡出
复制代码

在特效结束后，可以指定执行某个函数。

    $('p').fadeOut(300, function() { $(this).remove(); });
复制代码

更复杂的特效，可以用.animate()自定义。

    　　$('div').animate({
          left : "+=50", //不断右移
          opacity : 0.25 //指定透明度
        }, 300, // 持续时间
        function() {
            alert('done!'); 
        }); //回调函数
复制代码