摘要：前面也花了不少时间，专门介绍了基础这一块，从最基础的讲起，再到以及特效。对象，文档对象模型，每一份都可以表示成一棵树。注意选择器返回的是对象。名称用法描述相当于，子类选择器相当于后代选择器查找兄弟节点，不包括自己本身。

Sorry：由于春节前工作的调动，加上这段时间公司任务比较多一直加班，所以文章停更了很久，期间也有不少朋友私信、评论我，希望我写的快一点，在这里跟大家道个歉，后面更新速度可能会放缓，但是不会影响文章的质量，谢谢大家的支持。

前面也花了不少时间，专门介绍了js基础这一块，从最基础的js讲起，再到DOM、BOM以及特效。虽然花费了不少时间，不过在写这些文章的时候，自己也收获了很多东西。所以我还是会一如既往的写下去。希望收藏文章的小伙伴们，不仅仅只是收藏，更重要的是多阅读、多理解。

jQuery是一个javascript库，jQuery凭借着简洁的语法和跨平台的兼容性，极大的简化了js操作DOM、处理事件、执行动画等操作。jQuery强调的理念是："write less, do more"(写的少，做的多)。

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。官网地址
js库：把一些常用到的方法写到一个多带带的js文件，使用的时候直接去引用这js文件就可以了。(animate.js、common.js)。

我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

官网下载地址：点击下载。jQuery的版本有很多，分为：1.x、2.x、3.x。

版本分类：

1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

压缩版与未压缩版：

jQuery不需要安装，直接在页面中引用即可。

使用jQuery的三个步骤：

引入jQuery文件

入口函数

功能实现

关于jQuery的入口函数：

第一种写法：

$(document).ready(function(){
    // 执行代码
});

第二种写法：

$(function(){
    // 执行代码
});

首先我们得明确一点，在 jQuery 库中， ‘$’ 就是 jQuery 的一个简写形式。

jQuery入口函数与js入口函数对比：

示例代码： [ 01-初识jQuery.html ]

$(document).ready(function() {
    alert("123");
});

// 简写入口函数
$(function() {
    alert("呵呵");
});

第一次学习jQuery，经常分辨不清哪些是jQuery对象，哪些是DOM对象，通过本节我们来了解一下它们之间的关系。

1、DOM对象

DOM(Document Object Model，文档对象模型)，每一份DOM都可以表示成一棵树。

var domObj = document.getElementById("id");    // 获得DOM对象
var objHTML = domObj.innerHTML;                // 使用Javascript中的属性-innerHTML

在 js 中，通过 getElementByTagName 或者 getElementById 来获取元素节点。像这样得到的 DOM 元素就是 DOM 对象。而且 DOM 对象可以使用 js 中的方法，如： innerHTML。

2、jQuery对象

jQuery对象，是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，它可以使用jQuery里面的方法。

例如：

// 获取id为test的元素内的html代码
$("#test").html();  // .html()是jQ里面的方法

上面的代码等同于：

document.getElementById("test").innerHTML;

在jQ中，无法使用任何DOM对象的方法，例如：$("id").innerHTML，这是错误的写法。同样，在js中也无法使用jQ对象里面的方法，例如：document.getElementById("id").html()，这样也是错误的。

为了大家在两者对象转换的时候不混淆，在定义jQ对象的时候，前面加上‘$’符。

var $variable; // jQuery 对象

var variable;  // DOM 对象

1、jQ对象转成DOM对象：

jQ对象中是不能使用DOM对象里的方法的，但是如果jQ里的一些方法忘记的时候，只记得DOM中的方法的时候，怎么办呢？这时候就可以将jQ对象转换成DOM对象。

方法一(常用)：[index]

var $box = $("#box");       // jQ获取到的对象
var box = $box[0];          // 转成DOM对象
box.innerHTML = "哈哈哈";   // 使用DOM对象的方法

方法二：get(index)

var $box = $("#box");       // jQ获取到的对象
var box = $box.get(0);      // 转成DOM对象
box.innerHTML = "哈哈哈";   // 使用DOM对象的方法

2、DOM对象转成jQ对象：

DOM对象转成jQ对象的十分简单，只需要用$()把DOM对象包裹起来就是一个jQ对象了。转换之后就可以任意使用jQ的方法了。

var box = document.getElementById("#box");  // 获取的DOM对象
var $box = $(box);      // 转成jQ对象

示例代码：隔行变色 [ 02-jq对象与DOM对象转换-隔行变色.html ]

    
1
    
2
    
3
    
4
    
5
    
6

效果图：

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。

注意： jQuery选择器返回的是jQuery对象。

我们都知道css选择器，这里的基本选择器跟css的是一模一样的。

.css("name","value")是jQ的一个方法，可以为jQ对象设置样式。name是样式的名字，value是样式的值

例如设置一个背景色：

$(function(){
    $("#box").css("backgroundColor","cyan");
})

示例代码：基本选择器的应用 [ 03-jq选择器-基本选择器.html ]

    

        我是第ID为one的盒子
    
    

        我是Class为two的盒子
    
    
我是Class为Three的盒子
    
我是标签p
    我是标签span
    我是标签i

效果图：

涉及到的方法：

示例代码：

    
我是box1的子代
    
我是box1的子代
    

        
我是box1的后代
        
我是box1的后代
    


    
我是box2的子代
    
我是box2的子代
    

        
我是box2的后代
        
我是box2的后代
    

效果图：

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与css中的伪类选择器语法相同。即选择器都以一个冒号‘:’开头。按照不同的过滤规则，过滤选择器可以分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1、基本过滤选择器：

示例代码：隔行变色 [ 05-jq选择器-过滤选择器.html ]

    
这是第1个li
    
这是第2个li
    
这是第3个li
    
这是第4个li
    
这是第5个li
    
这是第6个li
    
这是第7个li
    
这是第8个li
    
这是第9个li
    
这是第10个li

效果图：

2、内容过滤选择器：

3、可见性过滤选择器：

4、属性过滤选择器：

属性过滤选择器是通过元素的属性来获取相应的元素。

5、子元素过滤选择器：

nth-child()选择器是很常用的子元素过滤选择器：

:nth-child(even)能选取每个父元素下的索引值是偶数的元素；

:nth-child(odd)能选取每个父元素下的索引值是奇数的元素；

:nth-child(2)能选取每个父元素下的索引值是2的元素；

:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素；(n从1开始)

:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的倍数的元素；(n从1开始)

5、表单对象属性过滤选择器

为了能够更加方便的操作表单，jQuery还为我们添加了表单选择器。

想要得到获取的个数直接使用：.length方法：

$("#form :input").length;  // 获得页面中表单元素的个数

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

1、简单版手风琴 [ 06-jq选择器案例-简单版手风琴.html ]

    

        标题1
        
我是弹出来的div1
    
    

        标题2
        
我是弹出来的div2
    
    

        标题3
        
我是弹出来的div3
    
    

        标题4
        
我是弹出来的div4
    

涉及到的方法：

注意： this指的是当前的DOM对象，$(this)，将this转化为jQ对象

效果图：

2、下拉菜单栏案例 [ 07-jq选择器案例-下拉菜单栏.html ]

    

        

            一级菜单1
            

                
二级菜单11
                
二级菜单12
                
二级菜单13
            
        
        

            一级菜单2
            

                
二级菜单21
                
二级菜单22
                
二级菜单23
            
        
        

            一级菜单3
            

                
二级菜单31
                
二级菜单32
                
二级菜单33
            
        
    

涉及到的方法：

效果图：

3、高亮显示图片 [ 08-jq选择器案例-高亮显示.html ]

在案例之前，跟大家说一个东西，在jQ中，不需要for循环遍历，因为jQ自己会进行遍历，这在jQ里面就叫隐式迭代。

涉及到的方法：

效果图：

4、淘宝广告案例 [ 09-jq选择器案例-淘宝广告案例.html ]

    

        
女靴
        
雪地靴
        
冬裙
        
呢大衣
        
毛衣
        
棉服
        
女裤
        
羽绒服
        
牛仔裤
    

    

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

    


    

        
女包
        
男靴
        
登山鞋
        
皮带
        
围巾
        
皮衣
        
男毛衣
        
男棉服
        
男包
    

涉及到的方法：

效果图：

5、index()方法详解： [ 10-jq选择器案例-index方法解读.html ]

获取的是当前元素在他兄弟元素里面的下标。

我是wrap1

    
这是内容
    
这是内容
    
这是内容
    
这是内容
    
这是内容

我是wrap2

    
这是内容
    
这是内容
    
这是内容
    
这是内容
    
这是内容

我们可以看到，在wrap1里面的时候，li点击的时候，获取的是它在兄弟元素里面的下标。在wrap2里面的时候，我们点击的是a标签，此时a标签是没有兄弟元素的，所以，不管点击哪一个都是返回‘0’。

效果图：

查找节点非常容易，只要结合前面选择器来完成。

1、查找元素节点 [ 11-jqDOM操作-查找元素节点.html ]

    
北京
    
上海
    
广州
    
天津
    
重庆

2、查找属性节点 [ 12-jqDOM操作-查找属性节点.html ]

使用jQ选择器，查找到需要的元素后，可以使用attr()方法来获取它的各种属性的值。attr()的参数可以是一个，也可以是两个，参数是一个的时候，则是要查询的属性的名字。

这是一句意味深长的话

我们可以轻松的找到文档中某个特定的元素节点，并且可以通过attr()方法来获取元素各种各样的属性的值。但是真正的DOM操作并非这么简单。在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到人机交互的目的。 [ 13-jqDOM操作-创建节点.html ]

1、创建元素节点

创建元素节点很简单，直接使用  $(html)，html就是需要添加的元素。$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

$(function() {
    // 创建一个li元素
    var $li = $("
");
    // 将创建的li添加到ul中
    $("ul").append($li);    // append 添加节点 下一节讲
});

因为创建的只是一个元素节点，所以里面没有内容只会看到li的一个标题点：

2、创建文本节点

var $li_1 = $("
北京
");  // 创建一个li元素，包括元素节点 文本节点
                                // "北京"就是文本节点
var $li_2 = $("
上海
");
$("ul").append($li_1);
$("ul").append($li_2); 

创建文本节点就是在创建元素节点时，直接把文本内容写出来：

3、创建属性节点

var $li_3 = $("
深圳
");  // 创建一个li元素，包括元素、文本、属性节点
                                             // title="城市" 就是属性节点
$("ul").append($li_3);

创建属性节点的时候，与创建文本节点类似，直接将属性写在标签里：

上面我们知道了如何动态创建一个元素，但是没有实际用处，所以还需要将新创建的元素添加到文档中。

添加节点的方法：

示例代码： [ 14-jqDOM操作-添加节点.html ]

    
我是本来就有的

这是ul外面的p标签


   

效果图：

如果文档中某一个元素多余的时候，那么就应该将其删除。jQuery提供了三种删除节点的方法：remove()，detach()，empty()。

1、remove()方法

从DOM中删除所有匹配的元素，当某个节点用remove()方法删除之后，该节点包含的所有后代节点将同时被删除，并且返回值就是该删除的节点。

示例代码： [ 15-jqDOM操作-remove删除节点.html ]

    
北京
    
上海
        

            
闵行区
            
浦东区
            
徐汇区
            
虹口区
        
    
    
深圳
    
天津
    
重庆

点击remove上海
点击添加上海

效果图：

另外remove()方法也可以通过传递参数来选择性的删除元素：

$("ul li").remove("li[title != 上海]"); // 将li中属性title不等于‘上海’的li移除掉

2、detach()方法

detach()方法和remove()一样，也是从DOM中，去掉所有匹配的元素。但是这个方法不会把匹配的元素从jQuery对象中删除，就是说所有绑定的事件、附加的数据都会保留下来。

示例代码： [ 16-jqDOM操作-detach删除节点.html ]

    

        
北京
        
上海
        
深圳
        
天津
        
重庆
    
    点击detach上海
    点击appendTo上海

效果图：

我们可以看到，“上海”一开始是可以被点击的，detach删除以后，再添加到ul中的时候，它的点击事件还在，还可以点击。但是如果使用的是remove删除的话，点击事件就会被移除。

3、empty()方法

empty方法不是删除节点，准确的说，它是清空节点，它能清除匹配元素中的所有后代节点和内容。

示例代码： [ 17-jqDOM操作-empty清空节点.html ]

    
北京
    
上海
        

            
闵行区
            
浦东区
            
徐汇区
            
虹口区
        
    
    
深圳
    
天津
    
重庆

点击empty上海

效果图：

empty是清空匹配项的内容，不管里面是文本还是有其它标签，都会被清空，但是匹配项的标签还会保留，不会被清空

克隆节点也是常用的DOM操作之一，它是通过clone()方法实现的，同样的，它也有深拷贝和浅拷贝。深拷贝和浅拷贝的区别就是，深拷贝会复制绑定的事件，而浅拷贝不会。实现原理很简单，只要clone(true)，加上true，就是深拷贝，默认不传或者传false就是浅拷贝。

示例代码： [ 18-jqDOM操作-克隆节点.html ]

浅拷贝

    
北京
    
上海
    
深圳
    
天津
    
重庆

深拷贝

    
北京
    
上海
    
深圳
    
天津
    
重庆

效果图：

我们可以看出，浅拷贝的时候，点击“北京”克隆了一个“北京”的标签，并且添加到了ul中，但是新创建出来的没有点击事件。深拷贝的时候，新创建出来的还可以再次被点击，说明绑定事件，也拷贝了。

如果要替换某个节点，jQuery提供了两个方法，即replaceWith()和replaceAll()。
replaceWith()方法是将所有匹配的元素替换成指定的HTML或DOM，replaceAll()方法的作用与replaceWith()方法的作用一模一样，只是颠倒了参数。

示例代码： [ 19-jqDOM操作-替换节点.html ]

    
北京
    
北京
    
上海
    
上海


点击替换北京
点击替换上海

效果图：

替换前如果已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失。

如果想要将某个节点，用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。它还有两个其他的方法：wrapAll()、wrapInner()。

示例代码： [ 20-jqDOM操作-包裹节点.html ]

这里是上海
这里是上海
这里是上海
这里是上海
这里是上海
这里是上海

效果图：

本章第一节的时候，我们知道了如何查找节点，在jQuery中，还提供了一些查找节点的方法，我们通过这一小节的学习，来认识它们。

1、children()方法：

该方法用于获得匹配元素的子元素的集合。

    
ul里面的子元素li里面的子元素
    
ul里面的子元素li里面的子元素
    
ul里面的子元素li里面的子元素
    
ul里面的子元素li里面的子元素

注意： children()方法只能考虑子元素，后代元素不考虑。

2、next()方法 和 nextAll()方法：

next()方法用于获得匹配元素后面紧邻的同级元素。nextAll()方法用于获得匹配元素后面所有的同级元素。

这是一段意味深长的话

    
ul里面的子元素
    
ul里面的子元素
    
ul里面的子元素
    
ul里面的子元素

哈哈哈

3、prev()方法 和 prevAll()方法：

prev()方法用于获得匹配元素前面紧邻的同级元素。prevAll()方法用于获得匹配元素前面所有的同级元素。

这是一段意味深长的话

    
ul的子元素
    
ul的子元素
    
ul的子元素

哈哈哈

    

4、siblings()方法：

该方法用于匹配元素前后所有的兄弟元素。

这是一段意味深长的话

    
ul的子元素
    
ul的子元素
    
ul的子元素

呵呵呵
我会让你见识一下什么叫残忍

5、closest()方法：

该方法用于获取最近的匹配元素。首先检查当前元素是否匹配，匹配的话直接返回，如果不匹配则向上查找父元素，逐级向上，直到找到匹配的元素，如果什么也没找到，返回一个空的jQ对象。

6、parent() 和 parents()方法：

parent()方法是获得匹配元素的父级元素。parents()方法获取的是匹配元素的祖先元素。

我们可以对比下closest()方法和parent()、parents()方法的区别，根据实际需求灵活使用。

1、选好友案例：

    大乔0
    小乔1
    甄姬2
    虞姬3
    妲己4
    女娲5
    芈月6
    露娜7


>>
<<
>
<

效果图：

2、微博发布案例

    微博发布
    
    发布
    

效果图：

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

1、获取属性和设置属性

attr()，可