jQuery概念

时间 2019-11-12

标签 jquery 概念栏目 JQuery 繁體版

原文原文链接

官网： jQuery官网
在线API： jQuery在线API
W3School：W3School-jQuery教程（中文版哦）
下载jQuery：jQuery各版本下载
jQurey3.0： jQuery 3.0 更新
参考书：《锋利的jQuery》、《jQuery技术内幕-深刻解析jQuery架构设计与实现原理》

1 jQuery的基本使用和jQuery选择器

1.1 为何要学jQuery？

1.1.1 学习JS的遇到的痛点

1 window.onload 事件只能出现一次
2 浏览器兼容性问题
3 简单功能实现很繁琐
4 属性或方法的名字很长容易出错

1.2 jQuery是什么？

1.2.1 jQuery描述（理解）

jQuery是js的一个库，封装了咱们开发过程当中经常使用的一些功能，方便咱们来调用，提升了咱们的开发效率。

Js库是把咱们经常使用的方法放到一个单独的文件中，咱们用的时候，直接引用到页面里面来就能够了。
animate.js是咱们本身封装的库，而jQuery是别人帮咱们封装好的库。

1.2.2 学习jQuery主要是学什么？

1 学习jQuery提供的操做DOM的方法

目前这个阶段，主要学习如何来使用jQuery操做DOM，其实就是学习jQuery封装好的那些方法，
这些方法叫作 API（Application Programming Interface 应用程序编程接口）。
这些API的共同特色是：几乎全都是方法。因此，在使用jQuery的API时，都是方法调用，
也就是说要加小括号()，小括号里面是相应的参数，参数不一样，功能不一样。

1.3 如何使用jQuery？（重点）

使用步骤：

1．引入jQuery文件
2．入口函数
3．功能实现代码（事件处理）

案例：点击按钮设置文字和展现div功能

1.3.1 jQuery的优点

1.4 jQuery详细解释

1.4.1 版本介绍（了解）

jQuery的三个版本：

v1.xx 版本（使用）
v2.xx 版本 和 v3.xx 版本（最新版，是v2.xx版本的延续）
v3.xx 版本包含了两个版本：普通版和瘦身版（提交更小）

版本的区别：2.x版本和3.x版本，再也不支持IE六、七、8

考虑兼容性使用：1.xx版本

各版本的兼容性

v1.xx 版本：          兼容 IE6-8，以及其余浏览器
v2.xx 和 v3.xx 版本： 兼容 IE9+， 以及其余浏览器

同版本两个文件的区别：（压缩和不压缩的区别）

min：压缩版，压缩事后，体积会更小

压缩指的是：把注释、空格、换行所有去掉，把变量名称尽量的换成更加简短的字符。
压缩的主要目的：就是让文件变的更小。

两个文件的选择建议：
平时开发过程当中，这两个文件使用哪一个均可以；可是，项目上线的时候，必定要使用压缩版。

1.4.2 引包注意点（理解）

1 先引用jQuery文件再写jQuery代码
2 src路径要正确

1.4.3 jQuery的入口函数（重点）

方式一：

$(document).ready(function(){
    // 功能代码
});

方式二：

$(function(){
    // 功能代码
});

1.4.4 jQuery入口函数与js入口函数的区别（理解）

js入口函数指的是：window.onload = function() {};
区别：

一、书写个数不一样
Js入口函数只能出现一次，出现屡次会存在事件覆盖的问题。
jQuery的入口函数，能够出现任意屡次，并不会存在事件覆盖问题。

二、执行时机不一样
Js入口函数是在文档和全部的其余资源文件加载完成后，才执行。
这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就能够操做DOM了，
不用等到全部的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

1.4.5 jQuery的$符号（重点）

Js命名规范容许出现的字符有：数字、字母、下划线、$。
Js命名规范容许做为变量命名开头的字符有：字母、下划线、$；可是，不容许以数字做为变量命名的开头。css
示例：html

var $ = "我是字符串";
var $ = 123;
function $(){
    alert("我是函数$");
}
$(); // 调用咱们自定义的函数$

jQuery里面的$符号其实是一个函数

// jQuery里面使用$的方式
$(document).ready(function(){ }); // 调用入口函数
$(function(){ });                 // 调用入口函数
$("#btnShow")                     // 获取id属性为btnShow的元素
$("div")                          // 获取全部的div元素

jQuery里面的$函数，根据传入参数的不一样，进行不一样的调用，实现不一样的功能。返回的是jQuery对象

jQuery这个js库，除了$以外，还提供了另一个函数：jQuery
jQuery函数跟$函数的关系：jQuery === $   => true

1.4.6 jQuery对象和DOM对象的相互转换（难点）

DOM对象：经过DOM的API获取到的对象

// btn就是一个DOM对象
var btn = document.getElementById("btnShow");

jQuery对象：经过jQuery的API获取到的对象

// $btn就是一个jQuery对象
var $btn = $("#btnShow");

jQuery对象是包装的DOM对象的集合，即：包装集node
DOM对象转换成jQuery对象：jquery

var $btn = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn

jQuery对象转换成DOM对象：

// 方式一（推荐使用此方式）
var btn1 = $btn[0];
// 方式二
var btn2 = $btn.get(0);

以上两种方式都要记住，使用哪种均可以。

全部这些，都体现了jQuery对js的封装！

1.5 JS跟jQuery的区别是什么？（理解）

1.6 jQuery选择器

1.6.1 JS提供的选择DOM元素的方法

考虑兼容性的话，js里面提供的选择DOM的方法只有两个：

// 经过id属性获取指定元素
document.getElementById();  

// 经过标签名获取指定元素
document.getElementsByTagName();

1.6.2 强大的jQuery选择器（重点）

jQuery实现了从CSS1到CSS3全部的选择器以及其余经常使用的选择器，各类选择器之间能够相互代替

1.6.3 jQuery选择器（重点）

ID选择器（通常尽可能用ID选择器，效率最高）
- $("#id")
标签选择器
- $('p')
类选择器
- $(".className")
后代选择器
- $("li .link")
父子选择器
- $("ul > li")
伪类选择器
- $("ul li:eq(3)")
- $("li:even")
- $("li:odd")
表单选择器
- $(":checkbox")
- $(":checked")
- $(":text")
属性选择器
- $("li[id]")
- $("li[id='link']")

1.6.4 经常使用选择器汇总

*               $("*")              全部元素
#id             $("#lastname")      id="lastname" 的元素
.class          $(".intro")         全部 class="intro" 的元素
element         $("p")              全部 <p> 元素
.class.class    $(".intro.demo")    全部 class 具备 "intro" 且 "demo" 的元素
s1,s2,s3        $("th,td,.intro")   全部带有匹配选择的元素

:even       $("tr:even")    全部偶数 <tr> 元素
:odd        $("tr:odd")     全部奇数 <tr> 元素
:first      $("p:first")    第一个 <p> 元素
:last       $("p:last")     最后一个 <p> 元素

:eq(index)      $("ul li:eq(3)")    列表中的第四个元素（index 从 0 开始）
:gt(index)      $("ul li:gt(3)")    列出 index 大于 3 的元素 greater than
:lt(index)      $("ul li:lt(3)")    列出 index 小于 3 的元素 less than
:not(selector)  $("input:not(:empty)")  全部不为空的 input 元素

:header         $(":header")        全部标题元素 <h1> - <h6>
:animated       $(":animated")      全部正在执行动画的元素

:contains(text)     $(":contains('W3School')")  包含指定字符串的全部元素
:empty              $(":empty")                 无子（元素）节点的全部元素
:hidden             $("p:hidden")               全部隐藏的 <p> 元素
:visible            $("table:visible")          全部可见的表格

[attribute]         $("[href]")         全部带有 href 属性的元素
[attribute=value]   $("[href='#']")     全部 href 属性的值等于 "#" 的元素
[attribute!=value]  $("[href!='#']")    全部 href 属性的值不等于 "#" 的元素
[attribute$=value]  $("[href$='.jpg']") 全部 href 属性的值包含以 ".jpg" 结尾的元素

:input      $(":input")         全部 <input> 元素
:text       $(":text")          全部 type="text" 的 <input> 元素
:password   $(":password")      全部 type="password" 的 <input> 元素
:radio      $(":radio")         全部 type="radio" 的 <input> 元素
:checkbox   $(":checkbox")      全部 type="checkbox" 的 <input> 元素
:submit     $(":submit")        全部 type="submit" 的 <input> 元素
:reset      $(":reset")         全部 type="reset" 的 <input> 元素
:button     $(":button")        全部 按钮元素（<button></button> 或者 input="button"）
:image      $(":image")         全部 type="image" 的 <input> 元素
:file       $(":file")          全部 type="file" 的 <input> 元素

:enabled    $(":enabled")   全部激活的 input 元素
:disabled   $(":disabled")  全部禁用的 input 元素
:selected   $(":selected")  全部被选取的 input 元素
:checked    $(":checked")   全部被选中的 input 元素

1.6.5 jQuery选择方法

获取父级元素

* $(selector).parent();     //获取直接父级
$(selector).parents('p'); //获取全部父级元素直到html

获取子代和后代的元素

* $(selector).children();   //获取直接子元素
* $(selector).find("span"); //获取全部的后代元素  find方法 可能用的多。

获取同级的元素

* $(selector).siblings()    //全部的兄弟节点
$(selector).next()        //下一个兄弟节点
$(selector).nextAll()     //后面的全部节点
$(selector).prev()        //前面一个的兄弟节点
$(selector).prevAll()     //前面的全部的兄弟节点

过滤方法

* $("p").eq(1);           //取第n个元素
$("div p").last();        //取最后一个元素
$("div p").first();       //取第一个元素
$("p").filter(".intro");  //过滤，选择全部带有 .intro 的p标签
$("p").not(".intro");     //去除，跟上面的filetr正好相反

获取当前元素的索引号

* $("li:eq(2)").index();        // 获取索引号

2 jQuery经常使用DOM操做

2.1 样式操做（重点）

2.1.1 基本样式属性操做

做用：设置或获取元素的样式属性值

设置样式属性操做

设置单个样式：

// 第一个参数表示：样式属性名称
// 第二个参数表示：样式属性值
$(selector).css("color", "red");


设置多个样式：（也能够设置单个）
// 参数为 {}（对象）
$(selector).css({"color": "red", "font-size": "30px"});

获取样式属性操做：

// 参数表示要获取的 样式属性名称
var fs = $(selector).css("font-size");

2.1.2 类样式操做

添加类样式：

做用：为指定元素添加类className

$(selector).addClass("liItem");

移除类样式：

做用：为指定元素移除类 className

$(selector).removeClass("liItem");
$(selector).removeClass(); 不指定参数，表示移除被选中元素的全部类

判断有没有类样式：

做用：判断指定元素是否包含类 className

var hasC = $(selector).hasClass("liItem");
此时，会返回true或false

切换类样式：

做用：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。

$(selector).toggleClass("liItem");

注意点：

操做类样式的时候，全部的类名 都不带点（.）

经验：
1 操做的样式很是少，那么能够经过.css()这个 方法来操做
2 操做的样式不少，那么要经过使用类的方式来操做

3 若是考虑之后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操做。类比CSS书写位置（把css从html中分离出来）

2.2 jQuery动画

前面内容特点总结：简约、"粗暴"、干净利落、直截了当

jQuery动画是：
jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；
同时还提供给咱们了自定义动画的功能。

2.2.1 隐藏和显示

显示方法 show()

做用：让匹配的元素展现出来

// 用法一：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000表示动画执行时长为2000毫秒，即2秒钟 */
$(selector).show(2000);

// 用法二：
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* 跟用法一的对应关系为： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show("slow");

// 用法三：
// 参数一：能够是数值类型或者字符串类型
// 参数二：动画执行完后当即执行的回调函数
$(selector).show(2000, function() {});

// 用法四：
// 不带参数，做用等同于 css("display", "block")
/* 注意：此时没有动画效果 */
$(selector).show();

注意：
jQuery预设的三组动画效果的语法几乎一致：
参数能够有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。
第一个参数能够是：指定字符或者毫秒数

隐藏方法 hide()

做用：让匹配元素隐藏掉（用法参考show方法）
$(selector).hide(1000); 
$(selector).hide("slow");
$(selector).hide(1000, function(){});
$(selector).hide();

2.2.2 滑入滑出动画

滑入动画效果 slideDown()

做用：让元素如下拉动画效果展现出来
$(selector).slideDown(speed, callback);
$(selector).slideDown();

滑出动画效果 slideUp()

做用：让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed, callback);

滑入滑出切换动画效果 slideToggle()

$(selector).slideToggle(speed, callback);

注意点：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（一样适用于fadeIn/slideDown/slideUp）

2.2.3 淡入淡出动画

1 淡入动画效果
做用：让元素以淡淡的进入视线的方式展现出来
$(selector).fadeIn(speed, callback);

2 淡出动画效果
做用：让元素以渐渐消失的方式隐藏起来
$(selector).fadeOut(1000);

3 淡入淡出切换动画效果
做用：经过改变不透明度，切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast', callback);

改变不透明度到某个值

做用：改变匹配元素的不透明度 
// 用法有别于其余动画效果
// 第一个参数表示：时长
// 第二个参数表示：不透明度值，取值范围：0-1
$(selector).fadeTo(1000, .5); //  0全透，1全不透

// 第一个参数为0，此时做用至关于：.css("opacity", .5);
$(selector).fadeTo(0, .5);


与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 彻底不透明 到 彻底透明；
而fadeTo能够指定元素不透明度的具体值。

jQuery提供的动画使用方法总结：

2.2.4 自定义动画

jQuery内置动画的规律：

jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height: 400px; width: 300px; opacity: .4;}

这三个CSS属性的共性是：
1 样式属性的值只有一个
2 这个值是数值（去掉单位后）。

注意：全部可以执行动画的属性必须只有一个数字类型的值。
好比：要改变字体大小，要使用：fontSize（font-size），不要使用：font

动画支持的属性编程

自定义动画 animate()

做用：执行一组CSS属性的自定义动画
// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后当即执行的回调函数（可选）
$(selector).animate({params}, speed, callback);

2.2.5 中止动画 stop() （了解）

做用：中止当前正在执行的动画

// 第一个参数表示是否清空全部的后续动画
// 第二个参数表示是否当即执行完当前正在执行的动画
$(selector).stop(clearQueue, jumpToEnd);

解释：

stop(true, true)   后续动画不会执行，当前动画当即跳到结束的位置
stop(true, false)  后续动画不会执行，当前动画当即中止
stop(false, true)  当即执行后续动画，当前动画当即跳到结束的位置
stop(false, false) 当即执行后续动画，当前动画当即中止

注意：若是元素动画尚未执行完，调用sotp() 那么回调函数不会被执行

2.4 jQuery节点操做

2.4.1 动态建立元素

// $()函数的另一个做用：动态建立元素
var $spanNode = $("<span>我是一个span元素</span>");

2.4.2 添加元素（重点）

append() 追加元素（重点）

做用：在被选元素内部的最后一个子元素（或内容）后面插入内容（页面中存在或者建立出来的元素均可以）

// 在$(selector)中追加$node
$(selector).append($node);
// 在$(selector)中追加div元素，参数为htmlString
$(selector).append('<div></div>');

注意：
若是是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，而后再插入到新的位置。
     若是是给多个目标追加一个元素，那么append()方法的内部会复制多份这个元素，而后追加到多个目标里面去。（最好不要这么作）
经常使用参数：htmlString 或者 jQuery对象

不经常使用操做：（用法跟append()方法基本一致）（了解）

$(selector).appendTo(node);  做用：同append()，区别是：把$(selector)追加到node中去
$(selector).prepend(node);   做用：在元素的第一个子元素前面追加内容或节点
$(selector).after(node);     做用：在被选元素以后，做为兄弟元素插入内容或节点
$(selector).before(node);    做用：在被选元素以前，做为兄弟元素插入内容或节点

2.4.3 html建立元素（重点）

做用：设置或返回所选元素的html内容（包括 HTML 标记）
设置内容的时候，若是是html标记，会动态建立元素，此时做用跟js里面的 innerHTML属性相同

// 动态建立元素
$(selector).html("<span>传智播客</span>");
// 获取html内容
$(selector).html();

总结：推荐使用html("<span></span>")方法来建立元素或者html("")清空元素

2.4.4 清空元素

// 清空指定元素的全部子元素（光杆司令）
// 没有参数
$(selector).empty();
$(selector).html("");

// "自杀" 把本身（包括全部内部元素）从文档中删除掉
$(selector).remove();

2.4.5 复制元素

做用：复制匹配的元素

// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();

2.5 操做form表单（重点）

2.5.1 属性操做

设置属性：
// 第一个参数表示：要设置的属性名称
// 第二个参数表示：改属性名称对应的值
$(selector).attr("title", "传智播客");

获取属性：
// 参数为：要获取的属性的名称，改操做会返回指定属性对应的值
$(selector).attr("title");
此时，返回指定属性的值

移除属性：
// 参数为：要移除的属性的名称
$(selector).removeAttr("title"); 

注意：checked、selected、disabled要使用 .prop() 方法。
prop方法一般用来影响DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。
细节参考：http://api.jquery.com/prop/

2.5.2 值和内容

val()方法：
做用：设置或返回表单元素的值，例如：input,select,textarea的值
// 获取匹配元素的值，只匹配第一个元素
$(selector).val();
// 设置全部匹配到的元素的值
$(selector).val("具体值");

text() 方法:
做用：设置或获取匹配元素的文本内容
//获取操做不带参数（注意：这时候会把全部匹配到的元素内容拼接为一个字符串，不一样于其余获取操做！）
$(selector).text();
//设置操做带参数，参数表示要设置的文本内容
$(selector).text("我是内容");

2.6 其余样式操做（了解）

$(selector).height()        设置或返回匹配元素的高度。// 数值类型
$(selector).width()         设置或返回匹配元素的宽度。// 数值类型
$(selector).css("height");  字符串类型

$(selector).offset()        返回第一个匹配元素相对于文档左上角的位置。left,top
$(selector).offsetParent()  返回最近的定位祖先元素。
$(selector).position()      返回第一个匹配元素相对于父元素的位置。
$(window).scrollLeft()      设置或返回匹配元素相对滚动条左侧的偏移。
$(window).scrollTop(0)      设置或返回匹配元素相对滚动条顶部的偏移。

对scrollTop()的理解：
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
若是滚动条在最上方没有滚动 或者 当前元素没有出现滚动条，那么这个距离为0

$(selector).scroll(function() {}); 滚动事件

3 jQuery事件机制和补充

JS： 
    W3C : addEventListener / removeEventListener
    IE ： attachEvent / detachEvent

jQuery的事件机制，指的是：jQuery对JavaScript操做DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

绑定事件示例：

JavaScript：
btn.onclick = function() {}; 表示：给这个按钮绑定事件

jQuery：
$btn.click(function() {});   表示：给按钮绑定事件

3.1 jQuery事件的发展历程（了解）

简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on【重点】

简单事件绑定

click(handler)              单击事件
blur(handler)               失去焦点事件
mouseenter(handler)         鼠标进入事件
mouseleave(handler)         鼠标离开事件
dblclick(handler)           双击事件
change(handler)             改变事件，如：文本框值改变，下来列表值改变等
focus(handler)              得到焦点事件
keydown(handler)            键盘按下事件

其余参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

bind方式（1.7之后的jQuery版本被on取代）

做用：给匹配到的元素直接绑定事件

// 绑定单击事件处理程序
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter", function(e){
    //事件响应方法
});

$("button").bind({
    "click": function() {
        alert("click");
    },
    "mouseenter": function() {
        alert("enter");
    }
});

比简单事件绑定方式的优点：
能够同时绑定多个事件，好比：bind("mouseenter mouseleave", function(){ });

缺点：要绑定事件的元素必须存在文档中。

delegate方式（特色：性能高，支持动态建立的元素）

做用：给匹配到的元素绑定事件，对支持动态建立的元素有效
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的全部的p标签绑定事件
});
与前两种方式最大的优点：减小事件绑定次数提升效率，支持动态建立出来的元素绑定事件！

3.1.1 on方式（最现代的方式，兼容z epto(移动端相似jQuery的一个库，强烈建议使用的方式）（重点）

jQuery1.7版本后，jQuery用on统一了全部的事件处理的方法
做用：给匹配的元素绑定事件，包括了上面全部绑定事件方式的优势

语法：
// 第一个参数：events，绑定事件的名称能够是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素
// 第三个参数：data，传递给处理函数的数据，事件触发的时候经过event.data来使用
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on("click", "span", function() {});

// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on("click mouseenter", function(){ });

3.1.2 事件解绑

unbind() 方式和 undelegate() 方式

做用：解绑 bind方式绑定的事件
$(selector).unbind(); //解绑全部的事件
$(selector).unbind("click"); //解绑指定的事件

做用：解绑delegate方式绑定的事件
$( selector ).undelegate(); //解绑全部的delegate事件
$( selector).undelegate( "click" ); //解绑全部的click事件

off解绑on方式绑定的事件（重点）

// 解绑匹配元素的全部事件
$(selector).off();
// 解绑匹配元素的全部click事件
$(selector).off("click");

// 解绑全部代理的click事件，元素自己的事件不会被解绑 
$(selector).off( "click", "**" );

3.1.3 事件触发

$(selector).click();            // 简单事件触发，触发 click事件
$(selector).trigger("click");   // trigger方法触发事件
$(selector).triggerHandler("focus"); // triggerHandler触发 事件响应方法，不触发浏览器行为 好比:文本框得到焦点的默认行为

3.1.4 jQuery事件对象介绍

event.data                  传递给事件处理程序的额外数据

event.currentTarget         等同于this
event.delegateTarget        给谁绑定的事件，这个就是谁
event.target                触发事件源，不必定===this 单击的谁，target就是谁

event.pageX                 鼠标相对于页面左边的位置

* event.stopPropagation()；   阻止事件冒泡
* event.preventDefault();     阻止默认行为

event.type                  事件类型："click"，"dblclick"…
event.which                 鼠标的按键类型：左1 中2 右3
event.keyCode               键盘按键代码

return false; // 同时具备阻止冒泡和阻止默认行为的功能
this：哪一个元素触发的事件，this就指向这个元素。

3.2 jQuery补充

3.2.1 链式编程和隐式迭代

// 链式编程代码示例
$("li").parent("ul").parent("div").siblings("div").children("div").html("内容");
链式编程原理：return this;
一般状况下，只有设置操做才能把链式编程延续下去。由于获取操做的时候，会返回获取到的相应的值，没法返回 this。

end(); // 结束当前链最近的一次过滤操做，而且返回匹配元素以前的一次状态。

隐式迭代
// 设置操做
$("div").css("color", "red");

// 获取操做
$("div").css("color"); // 返回第一个元素的值
隐式迭代的意思是：在方法的内部会为匹配到的全部元素进行循环遍历，执行相应的方法；
而不用咱们再进行循环，简化咱们的操做，方便咱们调用。

注意点：若是获取的是多元素的值，返回的是第一个元素的值。

3.2.2 each方法

有了隐式迭代，为何还要使用each函数遍历？

大部分状况下是不须要使用each方法的，由于jQuery的隐式迭代特性。
若是要对每一个元素作不一样的处理，这时候就用到了each方法

做用：遍历jQuery对象集合，为每一个匹配的元素执行一个函数

$(selector).each(function(index, element){
// 参数一表示当前元素在全部匹配元素中的索引号
// 参数二表示当前元素（DOM对象）

});

$.each(object, function(k, v) {});

3.2.3 多库共存（了解）

此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，
而且引用的其余库（或者其余版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，
要保证每一个库都能正常使用，这时候就有了多库共存的问题。

// 模拟另外的库使用了 $ 这个变量
// 此时，就与jQuery库产生了冲突
var $ = { name : "itecast" };

解决方式：
$.noConflict();

让jQuery释放对$的控制权，让其余库可以使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法

3.2.4 jQuery插件机制

jQuery这个js库，虽然功能强大，但也不是面面俱到包含全部的功能。
jQuery是经过插件的方式，来扩展它的功能：
当你须要某个插件的时候，你能够"安装"到jQuery上面，而后，使用。
当你再也不须要这个插件，那你就能够从jQuery上"卸载"它。
（联想：手机软件，安装的app就比如插件，用的时候安装上，不用的时候卸载掉）

3.2.5 使用第三方插件

1 jQuery.color.js 插件

animate()自定义动画：不支持背景的动画效果

使用步骤：
1. 引入jQuery文件
2. 引入插件
3. 使用插件

2 jQueryUI 插件

使用场景：网站的管理后台

jQueryUI专指由jQuery官方维护的UI（用户接口）方向的插件。
官方API：http://api.jqueryui.com/category/all/
其余教程：http://www.runoob.com/jqueryui/jqueryui-intro.html

基本使用:
1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能

3.2.6 制做插件

如何建立jQuery插件：
http://learn.jquery.com/plugins/basic-plugin-creation/

全局jQuery函数扩展方法
$.pluginName = function() {};
$.pluginName();

jQuery对象扩展方法
$.fn.pluginName = function() {};
$(selector).pluginName();

jQuery概念

1 jQuery的基本使用和jQuery选择器

1.1 为何要学jQuery？

1.1.1 学习JS的遇到的痛点

1.2 jQuery是什么？

1.2.1 jQuery描述（理解）

1.2.2 学习jQuery主要是学什么？

1.3 如何使用jQuery？（重点）

1.3.1 jQuery的优点

1.4 jQuery详细解释

1.4.1 版本介绍（了解）

1.4.2 引包注意点（理解）

1.4.3 jQuery的入口函数（重点）

1.4.4 jQuery入口函数与js入口函数的区别（理解）

1.4.5 jQuery的$符号（重点）

1.4.6 jQuery对象和DOM对象的相互转换（难点）

1.5 JS跟jQuery的区别是什么？（理解）

1.6 jQuery选择器

1.6.1 JS提供的选择DOM元素的方法

1.6.2 强大的jQuery选择器（重点）

1.6.3 jQuery选择器（重点）

1.6.4 经常使用选择器汇总

1.6.5 jQuery选择方法

2 jQuery经常使用DOM操做

2.1 样式操做（重点）

2.1.1 基本样式属性操做

2.1.2 类样式操做

2.2 jQuery动画

2.2.1 隐藏和显示

2.2.2 滑入滑出动画

2.2.3 淡入淡出动画

2.2.4 自定义动画

2.2.5 中止动画 stop() （了解）

2.4 jQuery节点操做

2.4.1 动态建立元素

2.4.2 添加元素（重点）

2.4.3 html建立元素（重点）

2.4.4 清空元素

2.4.5 复制元素

2.5 操做form表单（重点）

2.5.1 属性操做

2.5.2 值和内容

2.6 其余样式操做（了解）

3 jQuery事件机制和补充

3.1 jQuery事件的发展历程（了解）

3.1.1 on方式（最现代的方式，兼容z epto(移动端相似jQuery的一个库 ，强烈建议使用的方式）（重点）

3.1.2 事件解绑

3.1.3 事件触发

3.1.4 jQuery事件对象介绍

3.2 jQuery补充

3.2.1 链式编程 和 隐式迭代

3.2.2 each方法

3.2.3 多库共存（了解）

3.2.4 jQuery插件机制

3.2.5 使用第三方插件

3.2.6 制做插件

3.1.1 on方式（最现代的方式，兼容z epto(移动端相似jQuery的一个库，强烈建议使用的方式）（重点）

3.2.1 链式编程和隐式迭代