这篇文章主要是想介绍关于 jQuery 的基本使用，重点的内容就是 jQuery 的选择器、jQuery 对于 DOM 文档的操作以及 jQuery 的事件机制，其中也会有非常多的 jQuery 方法，都提供了非常有用而且强大的功能，因为 jQuery 中的内容是非常多的，因此如果介绍时，只是方法和选择器的罗列的话，看一会之后就会很无聊了，而且就算很认真的看下去，往往都会记住了当前的，而忘记了前面的，因此这篇文章想要通过一些小的例子来介绍，通过实现一些简单的功能来介绍相关的内容，同时也会遇到很多有用的方法，这样的话，看起来会有意思一点。
1.jQuery简介
jQuery 是一个 JavaScript 框架，相当于封装了之前由 JavaScript 编写的功能代码，然后提供了更加简单以及简洁的方法调用，所以我们使用起来会非常简单，我们使用 jQuery 可以进行如下几方面的操作：
1.操作HTML文档对象；
2.进行事件处理；
3.简单的动画特效；
4.进行ajax交互。
其实除了 jQuery 这个 JavaScript 框架之外，还有很多别的优秀的 JavaScript 框架，我们也可以进行学习，比如 AngularJS 之类的框架，其实学会使用了一种 JavaScript 框架之后，对于再去学习别的 JavaScript 框架也会有很大帮助，因此还是要相信技多不压身这个道理，努力先把当下这个技术学好。
jQuery 除了自身提供很多简单而高效的方法之外，也还有很多优秀的插件，也是提供了很多强大的功能，比如表单校验的插件、树形结构的插件等等，因此我们可以利用 jQuery 做到的事还是蛮多的。
2.jQuery入门
先写一个简单的例子来看 jQuery 是如何使用的，要想使用 jQuery 的话，首先需要引入它的文件，我们这里使用的版本就是 jquery-1.8.3.js 了，所以我们就先在 <head> 标签中使用下面的语句引入 jQuery 的文件。
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
然后我们写一个最简单的例子，就是当页面加载完成之后去触发事件。
<script type="text/javascript">
$(function(){
alert("jQuery coming");
});
</script>
这里代码的意思就是当页面加载完成之后，会在页面中弹出 jQuery coming 的文本信息，而如果我们不使用 jQuery ，直接使用 JavaScript 的话，那代码就应该是下面这样的：
<script type="text/javascript">
// 页面加载完成函数
window.onload = function() {
alert("jQuery coming");
}
</script>
对比上下的代码之后，很容易就会发现，使用了 jQuery 的代码会更加简洁，而且实现的功能都是一样的，还可以看下面的代码：
<script type="text/javascript">
// 页面加载完成函数
window.onload = function() {
alert("jQuery coming");
}
window.onload = function() {
alert("jQuery coming2");
}
</script>
当我们像这样使用 JavaScript 代码绑定两个页面加载完成事件后，是两个文本都会被弹出吗？其实不会，浏览器只会弹回一个值，那就是 jQuery coming2，这是因为使用 JavaScript 绑定事件的话，只能绑定一次。再看下面的 jQuery 代码：
<script type="text/javascript">
$(function(){
alert("jQuery coming");
});
$(function(){
alert("jQuery coming2");
});
</script>
这个的话是会在浏览器中依次弹出两个文本值的，这是因为 jQuery 是允许绑定事件多次的。
3.jQuery核心函数
这里我们想要介绍的核心函数主要是以下 3 个：
jQuery(callback)
jQuery(html,[ownerDocument])
jQuery([selector,[context]])
单看函数的名称还是不容易理解的，但是我们看一些小的例子就好多了。
3.1 jQuery(callback)
jQuery(callback) 函数其实是 $(document).ready() 的简写，而 $(document).ready(function(){}) 的意思就是当页面完全加载之后执行函数，其实我们在 jQuery 的源码中就可以发现其实 jQuery 就是 $ 的，源码如下：
window.jQuery = window.$ = jQuery;
因此我们如果想设置一个函数是在页面加载完成之后执行的话，最完整的写法到最简洁的写法应该是这样的：
<script type="text/javascript">
// 最完整的写法
jQuery(document).ready(function() {
alert("jQuery 1");
});
// 简写1
$(document).ready(function() {
alert("jQuery 2");
});
// 简写2
jQuery(function() {
alert("jQuery 3");
});
// 简写3
$(function() {
alert("jQuery 4");
});
</script>
3.2 jQuery(html,[ownerDocument])
下面再看 jQuery(html,[ownerDocument]) 函数，这个函数的作用就是可以将我们网页中的 dom 对象转换为 jQuery 对象，那我们为什么需要 jQuery 对象呢？就是因为 jQuery 中提供的方法和属性，只有 jQuery 对象才能使用。关于这个函数其中的参数的话：
第1个参数：html代码，即将被转换成jQuery对象的元素；
第2个参数：可选的，用来设置dom对象的相关属性。
下面我们看一下简单的代码示例，比如想往网页中添加一些网页元素，就可以使用这个函数。
$("<font>good news</font>").attr("color","red").appendTo("body");
上面的代码就是在 body 中添加一下文本内容，并设置相关的字体颜色，需要说明的是 appendTo() 函数是 jQuery 用来操作 dom 对象进行插入的一个函数，就是在 body 标签中插入相关的网页元素。
$("<input>",{
"type": "text",
"value": "test",
"click": function(){
alert("ddd");
}
}).appendTo("body");
这个例子的话就是在 body 标签中插入一个普通文本输入项元素了，第 1 属性只是说明了想插入的是一个 input 元素，第 2 个属性才为前面的 input 元素中的属性进行了赋值。
3.3 jQuery([selector,[context]])
这个函数主要是用来在页面中进行查找元素的，其中函数的参数说明如下：
第1个参数：css选择器，jQuery中提供了9种选择器；
第2个参数：就是指定我们想要查找的dom集。
因为我们 jQuery 中提供的选择器有很多，因此我们在网页中查找相关元素的方法也就会有很多，而且在网页中查找相关元素也是我们平时开发中的重点内容，因此掌握好 9 种选择器和这个核心函数还是非常重要的。
3.4 dom对象与jQuery对象相互转换
能够将 dom 对象和 jQuery 对象进行相互转换是非常重要的，因为这会使我们编码的方法更多，而且这两者之间的相互转换也是非常简单的，只要平时多注意一下就好了。
dom对象转为jQuery对象：只需要使用$()将dom对象包裹起来就行了，$(dom);
jQuery对象转为dom对象：只需要使用jQuery对象[0]，或者jQuery对象.get(0)。
下面我们还是写一个简单的例子来帮忙理解，其实代码的用意也很清楚，就是将 dom 对象转换为 jQuery 对象之后调用 jQuery 对象的方法，同样的，将 jQuery 对象转换为 dom 对象后使用 dom 对象的属性，这样的话，就可以证明 dom 对象和 jQuery 对象之间相互转换是没有问题的。
首先在 body 标签当中有一个 div 元素，然后我们想做的就是在 div 元素中加入文本内容：
<div id="dd"></div>
首先是使用 dom 对象来完成。
<script type="text/javascript">
$(function(){
// 得到div的dom对象
var div = document.getElementById("dd");
// 将dom对象转换为jQuery对象
$(div).html("dom对象转换为jQuery对象");
});
</script>
这样就可以证明 dom 对象转换为 jQuery 对象是可以的，下面再使用 jQuery 对象来完成。
<script type="text/javascript">
$(function(){
// 得到div的jQuery对象
var jqueryDiv = $("#dd");
// 将jQuery对象转换为dom对象
// jqueryDiv[0].innerHTML= "将jQuery对象转换为dom对象";
jqueryDiv.get(0).innerHTML= "将jQuery对象转换为dom对象";
});
</script>
上面的代码同样也证明了 jQuery 对象也是可以转换为 dom 对象的。
4.jQuery选择器
从现在开始，我们开始介绍 jQuery 选择器的内容，这一部分内容是非常重要的，因为我们开发时经常会需要查找网页中的某些元素，并进行操作，因此熟练地掌握选择器是至关重要的，同时 jQuery 的选择器是非常多的，一共有 9 个，如果能够灵活地使用这 9 个选择器，那么我们想在页面中查找某些元素就是非常简单的事了，当然一开始学习的话，不要想着一下子就完全掌握这 9 个选择器，而是应该一个一个认真去学，把每一个选择器当做一个点，当掌握的点多了之后，就会形成一个面，解决问题的方法也就会越来越多。
还需要说明的就是，在我们介绍每个选择器的时候，会尽量使用小的例子进行说明，因为这样的话不会太枯燥，而且结合实际情况也更加便于理解，同时完成例子的过程中可能还会使用到很多方法，我们都会一起进行说明。
4.1 基本选择器
基本选择器一共有 5 个，当然也是最简单的几个了，因为有几个在我们之前已经学过了，比如 id 选择器、class 选择器这些，我们在使用 JavaScript 编程的时候就使用过，下面先具体看看这基本选择器到底是哪几个以及它们具体的功能是什么。
#id ：根据id属性查找一个元素；
element ：根据标签名称查找元素；
.class ：根据class属性查找元素；
* ：匹配所有元素；
selector1,selector2,selectorN ：将每一个选择器匹配到的元素合并后一起返回。
下面通过一个小例子来进行说明，首先看页面中已有的元素：
<body>
<div id="d1"><a>Kobe</a></div>
<div class="d2">Jordan</div>
<div class="d2">James</div>
<div>Nash</div>
<div>Paul</div>
</body>
然后再看我们想要实现的功能：
1.得到id=d1的元素里面的内容
var html = $("#d1").html();// 获取元素中所有的html
alert(html);
var text = $("#d1").text();// 获取元素中所有的文本
alert(text);
上面代码中的 html() 方法和 text() 都可以获得选中元素中的内容，但是第 1 个方法获得的是元素中所有的 html 代码，而第 2 个方法则是只获得元素中所有的文本信息，因此通过使用第 1 个方法在浏览器中弹出的应该是 <a>Kobe</a>，而通过第 2 个方法在浏览器中弹出的应该是 Kobe，这就是两个方法的差别。
2.将所有class=d2的元素内容后面加上play basketball
$(".d2").each(function(){
// this在这里是dom对象，应该先转换为jQuery对象
$(this).html($(this).html()+" play basketball");
});
这里的 .d2 就是我们的 class 选择器了，而我们需要注意的就是 each() 这个方法，它的作用就是遍历之前选择器选中的每一个元素，因为 each() 方法的参数是一个函数，因此也是表明可以使用这个函数对每一个遍历的元素对象进行操作。关于 $(this) 这种写法的话，是因为 this 是一个 dom 对象，我们这里就将它转换为一个 jQuery 对象来进行操作。这里的 html() 方法也需要再进行说明一下，当方法里面没有参数时，其用法是获取对应对象里面的全部 html 代码，而如果方法中有参数的话，那就是赋值操作了，就是将参数中的 html 代码赋值给相关对象。
3.得到id=d1的div元素在所有的div元素中是第几个
var index = $("div").index($("#d1"));
alert(index);
这里就是分别使用了 id 选择器和标签选择器了，然后通过 index() 方法得到一个元素在另一个元素集合中的索引值，这个索引值是从 0 开始计数的。
4.得到class=d2的元素个数
var size = $(".d2").size();
alert(size);
通过这个例子的话，我们就可以知道 size() 方法是得到前面选择器选中元素的个数的。
5.将class=d2或者id=d1的元素内容修改为Java
$(".d2,#d1").html("Java");
两个选择器通过逗号 , 并列使用，则是说明将两个选择器选中的元素合并之后返回，然后使用 html() 方法为元素中的内容赋值。
在上面使用小的例子介绍选择器的时候，可以发现我们也使用了很多有用的方法，因此还是在这里进行总结说明一下，在后面使用也更加熟练。
方法总结
html() 方法：无参数方法代表获取元素中的 html 代码，而带参数的方法则表示为元素中的 html 代码赋值。
text() 方法：无参数方法表示获取元素中的文本信息，而带参数的方法则是为元素中的文本信息赋值。
each() 方法：用来遍历元素，其中可以传入一个函数 each(function(n))，其中的 n 是表示每一个元素的序号，我们可以在函数中使用 this 来获取遍历元素的 dom 对象。
index() 方法：用来获取一个元素在一个元素集合当中的索引值，索引值从 0 开始。
size() 方法：用来获取元素集合中的元素个数。
4.2 层级选择器
由于在我们网页都是由标签组成的，往往都是一个标签包含另外一个标签，因此在网页中就会有很多的层级关系，这时候查找某个父元素中所有的子元素，或者某个兄弟元素查找另外一个兄弟元素，使用层级选择器的话，类似这样的需求都可以很容易地解决。
层级选择器一共有 4 种，分别如下：
1.空格(" ")：获取元素中所有的子元素，包括直接子元素和间接子元素；
2.大于号(">")：获取元素中的直接子元素；
3.加号("+")：获取元素直接的一个兄弟元素；
4.波浪线("~")：获取元素后面所有的兄弟元素。
还是通过小例子的方式进行说明，网页中已有的元素为：
<body>
<div id="d1">
<a>java</a>
<p>
<a>shell</a>
</p>
<a>c</a>
</div>
<p>python</p>
<p>php</p>
</body>
然后再看我们需要实现的功能：
1.获取id=d1元素里面的所有a元素
var size = $("#d1 a").size();
alert(size);
这里便是使用的空格，也就是选取元素下面的 a 标签子元素，根据我们的网页内容，这里获取到的格式就应该是 3 了。
2.获取id=d1的所有直接a元素
var size = $("#d1>a").size();
alert(size);
这里是使用的大于号，就是获取元素的直接子元素，不包括间接子元素了，因此获取到的元素个数应该是 2。
3.获取id=d1的第一个兄弟p元素
var html = $("#d1+p").html();
alert(html);
这里就是使用的加号了，获取到元素的第一个直接兄弟元素，所以这里在浏览器中弹出的内容应该是 python。
4.获取id=d1的所有兄弟p元素
var size = $("#d1~p").size();
alert(size);
这里使用的是波浪线，用于获取元素后面所有的兄弟元素，因此这里获取到的元素个数应该是 2。
5.将所有id=d1元素里面的a元素字体颜色设置为红色
$("#d1 a").css("color","red");
这里首先是获取到所有满足条件的 a 标签，然后为 a 标签的属性赋值，这里需要注意的就是 css() 方法了，它主要是用来设置元素的样式，当我们只需要设置元素的一个样式属性时，那就可以像上面这样写了，但是如果想要设置多个样式属性的话，则必须使用下面这种格式了。
$("#d1 a").css({"color":"red","background":"blue"});
是的，需要将多个属性放在一个大括号之中，然后分别使用键值对的方式来进行设置。
方法总结
css() 方法：用来设置元素的样式，当只有一个样式属性需要设置的时候，使用 css(name,value) 这样的方式，当有多个样式属性需要设置的时候，使用 css({name:value,name:value}) 这样的方式。
现在已经介绍了基本选择器和层级选择器了，下面就要开始介绍过滤选择器了，其实过滤器就是当我们使用基本选择器和层级选择器选中满足条件的元素之后，然后再进行过滤操作，过滤选择器的个数很多，一共有 7 个，除了属性过滤选择器之外，一般的过滤选择器都是以冒号 : 进行开头的。下面开始分别进行介绍。
4.3 基本过滤选择器
下面我们先看基本过滤选择器有哪些。
:first ：选择第一个元素；
:last ：选择最后一个元素；
:not(selector) ：排除掉参数选择器选中元素集合中的元素；
:even ：匹配所有索引值为偶数的元素，索引值是从0开始的；
:odd ：匹配所有索引值为奇数的元素，索引值是从0开始的；
:eq(index) ：配置索引值等于某个数的元素，同样的，索引值也是从0开始的；
:gt(index) ：匹配索引值大于某个数的元素，索引值从0开始；
:lt(index) ：匹配索引值小于某个数的元素，索引值从0开始；
:header ：匹配h1,h2,h3这样的标题元素。
我们还是通过小的例子来掌握上面这些内容，首先还是网页中已经存在的元素如下：
<body>
<h1>商品信息</h1>
<table border='1'>
<tr>
<td>商品编号</td>
<td>商品名称</td>
<td>价格</td>
<td>数量</td>
</tr>
<tr>
<td>001</td>
<td>电视机</td>
<td>2100</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>洗衣机</td>
<td>1100</td>
<td>200</td>
</tr>
<tr>
<td>003</td>
<td>缝纫机</td>
<td>200</td>
<td>1000</td>
</tr>
<tr>
<td>004</td>
<td>割草机</td>
<td>1100</td>
<td>10</td>
</tr>
</table>
</body>
下面再看我们需要实现的功能。
1.设置表格的第1行，显示为红色
$("tr:first").css("color","red");
这里就是首先获得所有的 tr 标签，然后过滤得到第 1 个 tr 标签，最后为我们选中元素的某些样式属性赋值。
2.设置除了表格的第1行之外，显示为蓝色
$("tr:not(tr:first)").css("color","blue");
$("tr:gt(0)").css("color","blue");
上面两行代码中的任意一行都可以实现我们的需求，只是实现的思路不同罢了，第 1 行代码是选择所有的 tr 元素，但是要排除掉第 1 个 tr 元素；第 2 行代码则是选择所有的 tr 元素中序列号大于 0 的，这样也是可以达到要求的。
3.将表格的行设置为不同的颜色，奇数行设置为红色，偶数行设置为蓝色
$("tr:odd").css("color","blue");
$("tr:even").css("color","red");
需要注意的是我们代码中的 odd() 和 even() 这两个函数所表示的奇偶数意义，都是表示的元素索引值，而这个索引值是从 0 开始的。
4.设置页面上面的标题为灰色
$(":header").css("color","gray");
这也是非常好理解了，直接获取得到页面中的标题元素，然后对相关属性进行赋值操作。
4.4 内容过滤选择器
内容过滤选择器是根据元素内容的文本内容进行过滤选择的，内容过滤选择器一共有以下这些：
:contains(text) ：包含某些文本的元素；
:empty ：没有子元素的元素；
:has(selector) ：包含某些元素的元素；
:parent ：选择带有子元素或者带有文本的元素。
下面还是根据实际的例子进行学习，首先看网页中已经存在的元素：
<body>
<div>学习Java</div>
<div>学习PHP</div>
<div></div>
<div>
<a>学习</a>欢迎您
</div>
<div>
世界第一语言<a>Java</a>
</div>
<div>
<span>今天天天气很好</span>
</div>
</body>
然后再看我们需要实现的功能：
1.设置含有文本内容Java的div字体颜色为红色
$("div:contains('Java')").css("color","red");
这里就是先选中带有 Java 文本的元素，然后再为这些元素赋上样式属性。
2.设置没有子元素的div文本内容为”这是一个空的div”
$("div:empty").html("这是一个空的div");
同样的也是首先选中没有子元素的元素，然后再为选中元素的 html 代码赋值。
3.包含 <a> 元素的div字体颜色为黄色
<style type="text/css">
.divColor {
color: yellow;
}
</style>
$("div:has(a)").addClass("divColor");
当然前面就是选中带有 a 标签的元素了，然后后面就是使用 addClass() 为选中的元素增加 class 属性，当前前面是需要定义好 class 所对应的属性名以及属性值的。
4.设置所有含有子元素的span的字体为蓝色
$("span:parent").css("color","blue");
这里的 :parent 便是选中有子元素或者是包含文本的内容，其实反过来说也就是父元素。
方法总结
addClass() 方法：就是为我们选中的元素添加 class 属性，当有多个 class 属性需要添加的时候，则应该使用空格进行分割。
4.5 可见性过滤选择器
可见性过滤选择器主要是根据元素的可见性来匹配元素的，所以主要就是针对于 display:none 或者表单中 <input type="hidden"> 这样的元素的，可见性过滤选择器一共有 2 个，如下所示：
:hidden ：匹配隐藏的元素；
:visible ：匹配可见的元素。
我们还是通过例子来进行学习，首先在网页中已经存在的元素为：
<body>
<form>
<input type="text" name="email" /><br>
<input type="hidden" name="id" value="10" />
</form>
<table>
<tr style="display: none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
</tr>
</table>
</body>
然后再看具体的需求是怎样的：
1.获取表单中隐藏域的值
var value = $("input:hidden").val();
alert(value);
这样的话就可以得到我们网页中隐藏的 input 元素了，然后再获取到其中的值，其实还有下面这种方式也是可以获取到值的。
alert($("form :hidden").val());
即获取表单元素中隐藏的子元素，这里就只有一个了。
2.设置table中所有可见tr背景色为蓝色
$("tr:visible").css("background-color","blue");
这个当然也是很好理解的了，就是获取所有可见的 tr 元素，然后再为其的样式属性赋值。
3.获取table中所有隐藏tr中文本值，并将隐藏tr显示出来，原来显示的tr隐藏起来
这个其实应该是有 3 个操作，应该分开来做的，首先是获取table中所有隐藏tr中文本值，这个因为隐藏的只有 1 个，因此可以直接使用下面的代码。
var text = $("tr:hidden").text();
alert(text);
然后就是将隐藏tr显示出来，这个也好办，那就是：
$("tr:hidden").show();
这里的 show() 方法便是将隐藏元素进行显示的，再看最后一个需求：原来显示的tr隐藏起来
$("tr:visible").hide();
这里的 hide() 方法就是将显示的元素进行隐藏的。
方法总结
val() 方法：获取元素当前的 value 值；
show() 方法：将原本隐藏的元素在页面上进行显示；
hide() 方法：将原本在网页上显示的元素进行隐藏。
4.6 属性过滤选择器
属性过滤选择器就是根据元素的属性来进行选择元素的，分别有以下几种：
[attribute] ：具有某属性的元素；
[attribute=value] ：某属性取值为value的元素；
[attribute!=value] ：某属性取值不等于value的元素；
[attribute^=value] ：某属性取值以value开始的元素；
[attribute$=value] ：某属性取值以value结尾的元素；
[attribute*=value] ：某属性取值包含value的元素；
[attrSel1][attrSel2][attrSelN] ：满足多个属性选择器筛选条件的元素。
下面也是以例子来进行学习，首先看网页中已经存在的元素：
<body>
<div id="d">这是一个div</div>
<form>
<input type="text" name="username" value="tom"><br>
<input type="checkbox" class="kobe1" name="food" value="米饭">米饭
<input type="checkbox" class="kobe2" name="food" value="牛奶">牛奶
<input type="checkbox" class="kobe3" name="food" value="洋肉">洋肉
<hr>
<input type="checkbox" name="hobby" class="james1" value="篮球">篮球
<input type="checkbox" name="hobby" class="james2" value="篮球">篮球
<input type="checkbox" name="hobby" class="james3" value="足球">足球
</form>
<span id="s"> 这是一个span</span>
</body>
然后再看我们具体要实现的需求：
1.设置所有含有id属性的div，字体颜色红色
$("div[id]").css("color","red");
这个是很好理解的，只需要选择带有 id 属性的 div 元素即可。
2.获取name=username的value值
var value = $("[name=username]").val();
alert(value);
这个便是根据 name 属性取值为 username 的元素了，然后获取该元素的值。
3.设置所有多选框被选中
$("input[type=checkbox]").attr("checked","true");
首先是选中所有的多选框元素，即 type 属性取值为 checkbox 的元素，然后再使用 attr() 方法将这些元素的 checked 属性赋值为 true ，这样就可以完成需求了。
4.设置class中包含kobe的多选框被选中
$("input[type=checkbox][class*=kobe]").attr("checked","true");
这个需求需要选中的元素其实是，首先为多选框，然后 class 属性中包含 kobe ，这样就是我们需要的元素，最后选中这些多选框元素的话，其实就是将这些元素的 checked 属性赋值为 true。
5.获取class包含kobe的多选框的name属性值
alert($("input[type=checkbox][class*=kobe]").attr("name"));
首先还是选中 class 属性取值包含 kobe 的多选框元素，然后再获取这些元素的 name 属性取值。
方法总结
attr() 方法：这个方法是用来获取元素相关属性的属性值或者设置相关元素的属性值的，使用方法的话，就是如果是获取属性值的话，那就应该只传入一个参数，也就是属性名，如 attr(name)，而如果想设置一个属性值的话，则需要传入两个参数，也就是属性名和属性值，如 attr(name,value)。
4.7 子元素过滤选择器
子元素过滤选择器就是用来获取元素的子元素的，使用起来也是非常简单，一共有以下 4 个：
:nth-child ：传入一个参数，代表是第几个子元素，从1开始计数，也可以通过odd或者even这样的奇偶性来获得元素，同时也可以通过设置倍数来获得元素，比如2n则是表示只要是2的倍数就应该获取得到；
:first-child ：第一个子元素；
:last-child ：最后一个子元素；
:only-child ：唯一的一个子元素。
下面还是通过例子来学习，首先在网页中的元素为：
<body>
<ul>
<li>JAVA</li>
<li>IOS</li>
<li>PYTHON</li>
<li>C++</li>
</ul>
<ul>
<li>刘德华</li>
<li>张学友</li>
<li>郭富城</li>
</ul>
<ul>
<li>NodeJS</li>
</ul>
</body>
然后再看具体的需求：
1.设置列表中第2个li字号为30
$("ul li:nth-child(2)").css("font-size",30);
这里就是获取 ul 元素下第 2 个 li 子元素了，然后再对该元素的样式属性进行赋值。
2.设置列表中第一行字体为红色
$("ul li:first-child").css("color","red");
这里就是获取 ul 下的第 1 个 li 子元素了。
3.设置列表中最后一行字体为蓝色
$("ul li:last-child").css("color","blue");
这里便是获得 ul 下最后一个 li 子元素了。
4.获取ul下只有一个li的信息
var html = $("ul li:only-child").html();
alert(html);
这里便是获得只有唯一一个 li 子元素的 ul 元素的子元素了，然后再获取其中的 html 代码。
4.8 表单过滤选择器
表单过滤选择器就是选择表单中的元素的，从选择器的名称中就可以看出来，如下所示：
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
因为我们之前就学过 html 里面的元素，因此看到上面这些名称也就应该很清楚它们所对应的元素了，还是通过例子来进行学习，网页中已经存在的元素如下：
<body>
<form>
USERNAME:<input type="text" name="username"><br>
PASSWORD:<input type="password" name="password"><br>
<input type="button" value="按钮">
</form>
</body>
再看我们需要实现的需求：
1.当username与password失去焦点后，判断录入的数据不能为空
$(":text,:password").blur(function() {
var value = $(this).val();
if ($.trim(value) == "") {
alert($(this).attr("name") + "不能为空！");
}
});
上面的 blur() 方法便是为我们的用户名输入框和密码输入框绑定失焦事件，在这两者失去焦点之后触发其中的函数，而我们就需要在函数中判断两个输入框之中的值都不能为空，其中的 trim() 方法就是去掉字符串前后的空格。
2.对button添加点击事件，提交form表单
$(":button").click(function() {
$("form").submit();
});
这里的 click() 方法便是为我们的按钮元素添加点击事件，当按钮被点击时，我们在函数中便可以提交表单了。
方法总结
trim() 方法：去除文本前后的空格。
blur(function(){}) ：失去焦点事件。
click(function(){}) ：点击事件。
submit() 方法：表单提交。
4.9 表单对象属性过滤选择器
表单对象属性过滤选择器是根据表单中元素属性来选择元素的，一共有如下 4 个：
:enabled ：用于判断表单元素可用；
:disabled ：用于判断表单元素不可用；
:checked ：用于radio或者checkbox判断被选中；
:selected ：用于select下拉框判断选中。
下面还是通过例子来进行学习，首先看页面中已经存在的元素：
<body>
<form>
性别: <input type="radio" name="sex" value='男'>男
<input type="radio" name="sex" value='女'>女
<hr>
爱好: <input type="checkbox" name="hobby" class="itheima1" value="篮球">篮球
<input type="checkbox" name="hobby" class="itheima2" value="排球">排球
<input type="checkbox" name="hobby" class="itheima3" value="足球">足球
<hr>
城市 <select>
<option value="">--请选择--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select> <br>
<input type="button" value="打印">
</form>
</body>
然后再来看我们需要做的具体需求：
1.获取选中的性别信息
alert($(":radio:checked").val());
这里就是判断 radio 单选框哪一个被选中了。
2.获取选中的爱好信息
$(":checkbox:checked").each(function(){
alert($(this).val());
})
这里便是获取到多选框中被选中的元素，然后进行遍历操作。
3.获取选中的城市
alert($("select option:selected").val());
这里就是获取到下拉框中被选中的元素了。
4.10 选择器总结
上面就是我们想要介绍的 jQuery 选择器部分的内容，对于这么多选择器来说，当然全部掌握是最好的，但是也不要太过于心急，想一下子就全部掌握，这样反而会让我们变得比较浮躁，其实最好的办法还是在实际中进行运用，碰到不会的赶快回来查，这也是我们为什么自己需要整理一下的原因，知识都是一个一个点进行学习掌握的，掌握的点多了之后才能形成面，对于这么多的选择器来说，我们在开发中用的比较多的是哪些呢？
1.基本选择器：id,class,element
2.层级选择器：父子关系，兄弟关系
3.过滤选择器：属性过滤，基本过滤，内容过滤，表单过滤
5.jQuery对DOM的操作
介绍了 jQuery 中的选择器之后，我们再来看 jQuery 中另一个十分重要的部分，那就是对于 DOM 对象的操作了，其实对于 DOM 对象的操作的话，也无非就是插入、删除、替换和克隆这几项操作，当我们掌握了这几项操作之后，也就掌握了对于 DOM 对象的操作了，当然我们还是根据实际的小例子来进行学习。
5.1 插入操作
关于插入操作，一般的动作只有 2 个，那就是在前面插入和在后面插入，我们看一下具体的方法以及说明。
内部插入
append(content|fn) ：在元素后面插入
appendTo(content) ：在元素后面插入
prepend(content|fn) ：在元素前面插入
prependTo(content) ：在元素前面插入
外部插入
after(content|fn) ：在元素后面插入
before(content|fn) ：在元素前面插入
insertAfter(content) ：在元素后面插入
insertBefore(content) ：在元素前面插入
插入操作的话，分为内部插入和外部插入，其实这只是看的角度不一样而已，内部插入的话肯定就是相对于外部元素来说的了，这个外部元素也就是我们想在它其中插入元素的元素了，这时候插入的元素也就是在相对元素的子级了，而外部插入肯定是相对于内部元素来说的了，在元素的外部插入一个元素，这时候插入的元素和相对元素来说就是同级元素了，下面的讲解我们也还是通过小例子来进行说明。
首先看网页中已经存在的元素：
<body>
<select id="edu">
<option value="小学">小学</option>
<option value="中学">中学</option>
<option value="本科">本科</option>
</select>
</body>
下面再看内部插入和外部插入具体需要实现的功能。
内部插入
1.在select中的开始添加一项 <option value='学前班'>学前班</option>
$("#edu").prepend($("<option value='学前班'>学前班</option>"));
或
$("<option value='学前班'>学前班</option>").prependTo($("#edu"));
其实这里代码写出来之后，就可以很清楚地看明白 prepend() 方法和 prependTo() 方法的差别了，其实就是相当于一个是插入，而另一个是插入到，因此动作的主体是不一样的，一个是在前面添加，另一个则是前面添加到。
2.在select最后添加一项 <option value='研究生'>研究生</option>
$("#edu").append($("<option value='研究生'>研究生</option>"));
或
$("<option value='研究生'>研究生</option>").appendTo($("#edu"));
这里的 append() 方法与 appendTo() 方法和前面的意思也是一样的了，一个是在后面添加，另一个则是后面添加到，同样的动作主体不一样，两者是互为相反的。
外部插入
1.在select中开始添加一项 <option value='学前班'>学前班</option>
$("select option:first").before($("<option value='学前班'>学前班</option>"));
或
$("<option value='学前班'>学前班</option>").insertBefore($("select option:first"));
这里的 before() 方法和 insertBefore() 方法也是和上面的一样，动作的主体的是互换的，一个是在前面插入，而另外一个则是在前面插入到。
2.在select最后添加一项 <option value='研究生'>研究生</option>
$("select option:last").after($("<option value='研究生'>研究生</option>"));
或
$("<option value='研究生'>研究生</option>").insertAfter($("select option:last"));
这个的意思也是和上面的是一致的，一个是在后面插入，另一个则是在后面插入到。
其实插入操作的话，不管是内部插入还是外部插入，它们的在前面插入和在后面插入都提供了两种不同的方式，平时在使用的时候多加注意就好了，也可以先熟练掌握一种方法，然后再向其它的方法扩展，这样也是可以的，只要能灵活运用就行。
5.2 删除操作
删除操作的话就是将我们网页中的元素进行删除了，一共是有下面的 3 个方法：
empty() ：删除元素下面所有的子元素
remove([expr]) ：删除元素，并同时删除元素所绑定的方法
detach([expr]) ：删除元素，但是不删除元素所绑定的方法
下面我们也还是通过实际的例子来进行学习相关的方法，首先网页中已有的元素为：
<body>
<div id="d1">
<p>ppppp</p>
<span>ssssss</span>
</div>
<div id="d2"></div>
</body>
再看具体需要实现的需求。
1.empty代表的是将元素下所有子元素删除
$("#d1").empty();
使用这个 empty() 方法的话，就是删除我们选中元素中所有的子元素。
2.remove与detach的删除功能
其实我们可以对这两个方法的不同进行测试的，首先在 div 元素下面的 p 元素上面绑定一个方法，然后将该元素从 id 为 d1 的 div 中删除掉，并将它添加到 id 为 d2 的 div 元素中，在进行删除操作的时候，我们就可以分别使用这两个不同的方法，然后看是否有差别。
$("div p").click(function(){
alert($(this).text());
});
var p = $("div p").remove();
// var p = $("div p").detach();
$("#d2").append(p);
其实当我们在页面中再去点击 id 为 d2 的 div 元素下面的 p 元素时，就可以看到其中的差别了，当我们使用 remove() 方法时，当我们在页面中取点击 p 元素时，是不会看到有弹窗事件的，而如果是使用的 detach() 方法的话，则还会看到弹窗方法，这就是因为我们使用 remove() 方法时，不仅会删除掉选中元素，而且还会删除掉元素绑定的事件，而 detach() 方法则只会删除选中元素，不会删除相关的绑定事件。
5.3 克隆和替换操作
下面我们再看看克隆和替换操作，克隆就是将选中元素进行复制了，而替换操作则是使用某个元素替换之前的元素了，先看具体的方法。
克隆：
clone([Even[,deepEven]])
替换：
replaceWith(content|fn)
replaceAll(selector)
下面还是通过具体的例子来进行学习，首先看页面中已经存在的元素：
<body>
<div id="d1">
<p>
<a>p1</a>
</p>
<p>p2</p>
</div>
<div id="d2">
<span>span1</span> <span>span2</span>
</div>
</body>
然后再看我们具体需要实现的功能。
1.将id=d1中的第一个p来克隆一份来替换id=d2的div中的第二个span
其实整个需要实现的功能是可以分成两步来做的，第一步就是先获取得到 id 为 d1 的 div 元素里面的第 1 个 p 元素，然后再对其进行克隆，第二步便是使用前面的克隆元素来替换 id 为 d2 的 div 元素里面的第 2 个 span 元素，这样就可以完成具体的需求了。
var cp = $("#d1 p:first").clone();
$("#d2 :nth-child(2)").replaceWith(cp);
// cp.replaceAll($("#d2 :nth-child(2)"));
这里需要注意的是 replaceWith() 方法和 replaceAll() 方法的差别，和前面插入操作相类似的，都是角度不对的原因，replaceWith() 方法则是使用什么元素来替换方法调用的元素，而 replaceAll() 方法则是方法调用的元素会替换掉方法参数中的元素。
这里还需要注意的一点就是，clone() 方法里面其实是可以传递两个参数的，比如：clone(true,true)，关于方法中两个参数的具体意义，如下所示：
第1个参数表示当前元素的绑定事件是否会被复制，为true表示会被复制，为false则不会被复制；
第2个参数表示当前元素的子元素绑定的事件是否会被复制，为true则会复制，false则不会复制，(当然第2个参数起作用的前提是第1个参数为true，否则第2个参数不会起作用)
其实我们是可以在被替换元素的子元素上面绑定相关事件进行测试的，这样就能明白相关参数的作用了。
$("#d1 p:first").click(function(){
alert($(this).text());
});
$("a").mouseover(function(){
alert($(this).text());
});
5.4 综合练习
下面我们再看一个综合练习，具体的要求就是：在页面中，有一个表格，然后下面还有姓名、电话以及邮箱对应的输入框，当我们在 3 个输入框中输入数据之后，然后点击添加按钮，输入框中的值就会加入到表格当中，对于表格中的每一条数据，最后都有一个删除按钮，点击该按钮就会删除对应行的记录，这样我们就能够对表格中的数据进行增加和删除操作了。
首先我们可以先在页面中写一个表格元素，以及三个输入框。
<body>
<div align="center">
<table id="tab" border='1'>
<tr>
<td>姓名</td>
<td>电话</td>
<td>邮箱</td>
<td>删除</td>
</tr>
</table>
<hr>
姓名:<input type="text" id="username">
电话:<input type="text" id="phone">
邮箱:<input type="text" id="email">
<input type="button" value="添加">
</div>
</body>
其实最原始的界面出来之后，我们就会发现，最重要的功能就是为页面中的添加按钮绑定事件，就是点击添加按钮时，获取到三个输入框当中的值，然后将它们组合之后形成一个 tr 元素添加到表格当中，同时为了之后能够进行删除操作，需要在每行数据后面添加一个删除按钮，用来删除该行数据。
<script type="text/javascript">
$(function(){
$(":button").click(function(){
var tr = $("<tr></tr>");
var td1 = $("<td></td>");
td1.append($("#username").val());
var td2 = $("<td></td>");
td2.append($("#phone").val());
var td3 = $("<td></td>");
td3.append($("#email").val());
var td4 = $("<td></td>");
var a = $("<a href='javascript:void(0)' onclick='del(this)'>删除</a>");
td4.append(a);
tr.append(td1).append(td2).append(td3).append(td4);
$("#tab").append(tr);
});
});
function del(who){
// $(who).parent().parent().remove();
$(who).parents("tr").remove();
}
</script>
这样的话就可以完成我们的需求了，其中需要说明一下就是的 parent() 方法，这个方法就是用来获取当前元素的父元素，如果需要获取高几级的父元素的话，也可以使用 parents() 方法，然后其中传入一个参数，用来确实具体需要到哪一级，这里的 parents("tr")，那就是表示确认到 tr 这一级了。
5.5 筛选操作
这里所说的筛选操作，其实是包含过滤操作和查找操作的，而过滤操作所做的事，其实我们前面介绍的选择器也可以做，只是这里的过滤操作提供了更加简单的操作方法，这样我们使用起来也更加简单，而查找操作也是一样，同样也能使我们能够更加简单地使用。
这里只是简单地找几个方法进行说明，比如过滤操作中的:
eq(index) ：获取到第n个元素，从0算起
first() ：得到第1个元素
last() ：得到最后一个元素
下面还是通过一个简单的例子来进行说明，如果有如下的元素：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
那我们使用 $('li').first() 的话，就是获取到的第 1 个元素，也就是 <li>list item 1</li>，而如果使用的是 $('li').last()，那么获取到的就是最后一个元素，也就是 <li>list item 5</li>，最后如果我们使用的是 $('li').eq(1)，那就是获取得到第 2 个元素了，因为是从 0 开始计数的，因此最后获取得到的也就是 <li>list item 2</li> 了。
下面再看关于查找操作的，其实我们在上面的综合练习中就已经使用过了，那就是 parent() 和 parents() 方法，这两个都是查找父元素的方法，其实还有查找子元素的方法，比如 children() 这个方法，其实这些方法中都是可以传入参数的，比如 parents("tr")，就是查找父元素时，查找到 tr 元素这一级。
所有的这些操作其实也都可以使用前面的选择器实现，但是这里确实是更简单的操作，比如我们需要查找 p 元素下面的 span 元素，如果我们使用选择器的话，那就应该是 $("p span")，而如果使用筛选操作的话，就是 $("p").find("span")，这样看起来也会更加直观。关于筛选操作的方法还有很多，在需要使用时，还是应该多去查阅 api 说明，这样就能知道具体的使用方法了。
6.jQuery的事件机制
关于 jQuery 的事件机制，我们首先看看 jQuery 中的事件和 JavaScript 中的有什么不同，然后再看看 jQuery 的事件绑定机制，最后就是看 jQuery 中有哪些特殊的方法，可以供我们在平时开发时使用，以便提升我们的开发效率。
6.1 jQuery事件介绍
我们先看看 jQuery 事件与 JavaScript 事件有什么关系，首先看页面加载完成事件，如果是 JavaScript 的话，那相应的代码就是：
window.onload = function() {
alert("页面1加载完成");
};
于是当页面加载完成时，就会弹出相应的文本内容，那如果想使用 JavaScript 来绑定两个加载完成事件呢？是不是就应该如下面所示：
window.onload = function() {
alert("页面1加载完成");
};
window.onload = function() {
alert("页面2加载完成");
};
但其实这样的话，当页面加载完成时，还是只会有一个文本弹出，那就是 页面2加载完成，而不是两个文本依次弹出；如果我们使用 jQuery 来完成相同的功能的话，那代码应该是：
$(function(){
alert("页面1加载完成");
});
$(function(){
alert("页面2加载完成");
});
这种情况就能得到我们预想的结果，两个文本依次弹出，那这是为什么呢？其实就是因为 JavaScript 一个事件只能绑定一个函数，而 jQuery 中一个事件是可以绑定多个函数的。
除了页面加载完成事件之外，我们还可以看其它的普通事件，比如为一个普通的按钮绑定事件，首先页面中有一个按钮:
<body>
<input type="button" id="btn" value="按钮">
</body>
如果我们使用 JavaScript 为该按钮绑定事件的话，那相应的代码就是：
window.onload = function() {
document.getElementById("btn").onclick = function() {
alert("btn1");
};
document.getElementById("btn").onclick = function() {
alert("btn2");
};
};
这样就是在 JavaScript 中尝试为一个按钮绑定多个事件，但是如我们上面已经知道的，其实在 JavaScript 中一个事件是只能绑定一个函数的，因此，当我们点击按钮时，只会有 btn2 文本会弹出。
而如果使用 jQuery 进行事件的绑定的话，那代码就如下：
$(function() {
$("#btn").click(function() {
alert("btn1");
});
$("#btn").click(function() {
alert("btn2");
});
});
这样的话，两个文本就会依次弹出了，因为 jQuery 是允许一个事件绑定多个函数的。
6.2 jQuery事件绑定
在说 jQuery 进行事件绑定之前，我们可以先看看 JavaScript 是如何进行事件的绑定的，JavaScript 绑定事件一般有如下两种方式：
<input type="button" id="btn" value="按钮" onclick="fun1()">
和
window.onload = function() {
document.getElementById("btn").onclick = function() {
alert("JavaScript绑定事件");
}
};
第 1 种方式是直接在页面元素中使用 onclick 属性来进行事件的绑定的，这种方式就显得代码太过于耦合，第 2 种方式则是先获取到对应元素，然后再将元素的 onclick 属性赋值为一个函数，这样就可以实现函数的绑定了。
那我们再看看 jQuery 是如何进行事件的绑定的：
$("#btn").click(function(){
alert("jQuery绑定事件");
});
上面的 click() 函数中传入一个函数，其实就是将选中元素的点击事件和我们参数中的函数进行绑定，在 jQuery 中为我们提供了很多这样的方法，比如 click() 是点击事件，dblclick() 是双击事件，类似于这样，还有很多，可以查阅 api 进行详细的理解，使用方法都是类似的，同时，一个按钮想要绑定点击方法除了上面的这种方法之外，也还有其它的方法，比如使用 bind() 方法，其中需要传递两个参数，分别为事件类型和绑定的函数，这样也是能够实现事件的绑定的，比如：
$("#btn").bind("click",function(){
alert("jQuery使用bind()绑定事件");
});
当然，这里如果不是想要绑定点击事件，那么第 1 个参数就不要传 click 了，而是其它的事件类型，比如 submit，这就是绑定选中元素的提交事件，当我们想要解除事件的绑定时，也可以通过 unbind() 方法来解除事件的绑定。
$("#btn").unbind("click");
其实在这里除了 bind() 和 unbind() 方法能够完成对事件的绑定和解除绑定之外，live() 和 die() 这两个方法也可以完成相同的功能。
$("#btn").live("click",function(){
alert("jQuery使用live()绑定事件");
});
$("#btn").die("click");
我们使用 bind() 方法来绑定事件和使用 live() 方法有什么区别呢？其实区别就是在于两者作用的范围不一样，bind() 方法是只能为当前就存在的元素绑定事件，而 live() 则是可以为后面添加的元素绑定事件，比如，我们现在在页面中有一个按钮，而且我们使用 bind() 为所有的按钮绑定点击事件，当我们在绑定之后再到页面上添加一个按钮时，前面按钮的点击事件是可以执行的，但是后面的就执行不了了，但是如果我们是使用的 live() 方法进行绑定的时候，则所有的按钮都是可以触发点击事件的。
$(":button").bind("click",function(){
alert("jQuery使用bind()绑定事件");
});
/* $(":button").live("click",function(){
alert("jQuery使用live()绑定事件");
}); */
$("#btn").after("<input type='button' value='新按钮'>")
6.3 一次性事件和事件触发
下面我们就开始介绍一些比较特殊的函数，用来帮助我们更好地实现需求功能，比如这里的一次性事件，所谓的一次性事件，那就是只会触发执行一次的事件。
还是先假设网页中已经有一个按钮，然后我们使用 one() 方法绑定实现一次性事件。
<body>
<input type="button" id="btn" value="按钮">
</body>
下面我们就可以使用 one() 方法来进行绑定。
$("#btn").one("click", function() {
alert("jQuery一次性事件");
});
这样当我们点击按钮时，就会触发对应的点击事件，但是也只会触发一次。
下面我们再来看事件的触发，其实也就是通过 trigger() 方法来触发别的事件，下面看具体的例子，当然页面中还是有上面那个按钮。
首先我们为这个按钮绑定一个点击事件：
$("#btn").bind("click", function() {
alert("btn被触发了");
});
这次我们不是直接点击该按钮来触发该事件了，而是在另一个事件中进行触发：
$("#btn").mouseover(function(){
$(this).trigger("click");
});
也就是在鼠标经过该按钮时进行触发，这样看代码的话就能明白它的使用方法了。
6.4 事件切换
下面再看两个关于事件切换的函数，其实就是下面这两个函数：
hover()：绑定两个函数，当触发mouseover事件时，第1个函数执行，当触发mouseout事件时，第2个函数执行
toggle()：绑定多个函数，当触发click事件时，多个函数轮流执行
下面我们就可以根据这两个函数写一些具体的案例了，首先是使用 hover() 函数，我们可以将一段介绍文字隐藏，然后鼠标移动到相应标题时进行展示，鼠标移出再将其隐藏，首先在网页中需要的元素：
<body>
<h1>jquery介绍</h1>
<div>
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。<br>
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。<br>
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。<br>
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。<br>
jQuery兼容各种主流浏览器，如IE6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。[1]<br>
</div>
</body>
然后最重要的就是为我们的标题元素绑定事件了：
<script type="text/javascript">
$(function() {
$("div").hide();
$("h1").hover(function() {
// $("div").show(2000);
// $("div").slideDown(2000);
$("div").fadeIn(2000);
}, function() {
// $("div").hide(2000);
// $("div").slideUp(2000);
$("div").fadeOut(2000);
});
});
</script>
需要说明的是，上面代码中的 fadeIn() 和 fadeOut() 以及 slideDown() 这些都是 jQuery 中的一些动画特效，比如淡入淡出、文字滑出之类，其实是可以查询 api 的，这些方法中的数字则是动画运行的时间，比如 2 秒钟滑动显示文字这样，时间是可以进行设置的。
下面我们再看 toggle() 方法的使用，这个就是用来绑定多个函数的，那我们就可以在页面中进行图片的展示，但是绑定的多个函数改变图片的 src 属性，这样我们就可以实现变换图片的效果了，首先还是需要在网页中有一个图片元素：
<body>
<img alt="图片" src="1.png">
</body>
然后在绑定的多个函数中进行图片元素 src 属性的改变：
<script type="text/javascript">
$(function() {
$("img").toggle(function() {
$(this).attr("src", "2.png");
}, function() {
$(this).attr("src", "3.png");
}, function() {
$(this).attr("src", "1.png");
});
});
</script>
这样我们就实现图片切换的效果了，这里我就不提供具体的图片了，其实自己可以找几张图片试一下。
7.总结
这篇文章主要是介绍了 jQuery 的选择器、对 dom 对象进行操作，以及 jQuery 事件这些内容，其实内容还是非常多的，要想掌握的话，还是只有在平时多使用，如果有不熟悉的地方赶快查 api 文档或者笔记，这样有问题时及时进行查询，印象反而会更加深刻，其实静下心来想想，写博客不就是为了以后方便查找吗？
