jQuery即JavaScript，它是一个.js文件（官网下载）。使用时须将jQuery库的声明写在HTML文档的head标签里。
章节内容：
1、选择DOM节点 2、延迟的JavaScript的执行 3、把CSS应用到元素上 4、选择一系列非标准的HTML元素 5、计数DOM节点和显示其文本
6、快速创建DOM节点
1、选择DOM节点(常用)
（1）$(‘p’)——访问HTML页面文档中所有的段落元素；
（2）$(‘#A’)——访问HTML页面文档中id=A的元素；（id号唯一）
（3）$(‘.b’)——访问HTML页面文档中所有class = b的元素；
2、延迟的JavaScript的执行
HTML文档head部分中引用了JavaScript文件。一旦浏览器发现脚本行就会立即执行该JavaScript文件，但此时HTML页面文档还没有完全加载完（body部分未加载），此时需要用到延迟JavaScript代码的执行直到HTML页面加载完。（其实也可以将JavaScript放在body的尾部这样就不用延迟执行）
用来通知JavaScript代码DOM准备完毕的方法是$(document).ready()。在DOM记载完毕后，此方法执行函数调用（函数作为它的参数）。
$(document).ready(function(){
})
函数体在DOM加载完后被调用，函数体被作为参数表示不希望该函数被第二次执行，即只执行一次。相当于$(document).ready()给文档注册了一个ready(就绪)事件。在JavaScript就是window.onload=function()一样的意思。
3、把CSS应用到元素上
addClass()方法用于应用一个CSS类到网页的选中部分。它包含CSS类的名称作为方法的参数(注意参数打引号，作为字符传，而不是变量)。
一个CSS类：
.highlight{
font-style:italic;
background-color:#0f0;
}
应用CSS类的Jquery代码：
$(‘div’).addClass(‘highlight’);
$(‘body’).addClass(‘highlight’);
4、选择一系列非标准的HTML元素
（1）$(‘span:contains(Life)’)——选择包含单词Life的Span元素；
（2）$(‘div:odd’)——选择偶数div元素，从0开始计数。
（3）$(‘div:even’)——选择奇数div元素，从0开始计数。
（4）$(‘p:eq(1)’)——选择第二个段落元素，从0开始计数。
5、计数DOM节点和显示其文本
在DOM中，网页被表示为一个根节点（parent）和一些分支节点（children）的树结构形式，其中每一个HTML元素表示一个节点。
|
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $nodes = $('#parent').children(); alert("Number of nodes is" + $nodes.length); var txt = ""; $('#parent').children().each(function(){ txt += $(this).text(); }); alert(txt); }); </script> </head> <body> <div id="parent"> <div id="child1">child1</div> <div id="child2">child2</div> <div id="child3">child3</div> </div> |
以上代码访问HTML页面的id = parent的DIV元素的子节点，并将它的子节点存储在变量$nodes中，用alert显示子节点数组长度。然后用each()方法逐个访问其子节点（遍历数组$nodes），使用text()方法返回每个子节点的文本，并连接成一个字符串，最后用alert显示出来。
几个方法讲解：
①children()是遍历树的方法，它搜索指点元素的直接子节点，并返回一个新的jQuery对象。此方法仅在DOM树中向下遍历一层。
②each()方法用于循环访问包装集合中的每个元素。它包含一个迭代函数，在迭代函数中编写代码，应用于集合的每个单独元素。
③text()方法是jQuery对象的一个方法，用于访问指定元素的文本内容。
④parent()方法是遍历树的方法，用于搜索每个指定元素的直接亲元素（父元素），并返回一个新的jQuery对象。此方法仅在DOM树中向上遍历一层。
⑤html()方法从指定元素中的第一个元素获取HTML内容，以字符串的形式返回HTML内容，与text()方法不同，text()方法只返回文本。如HTML页面有一个段落元素：<p>我是段落元素<span>我是段落元素里的span元素</span></p>；
此时jQuery代码：$(‘p’).html()；调用html方法，返回的是“我是段落元素<span>我是段落元素里的span元素</span>”
⑥text(text) ，html(html)；即带参数的text()方法和html()方法可以用于改变DOM节点的内容。其中html(html)的参数html可以包含html标记；
6、快速创建DOM节点
这里列举三个创建DOM节点的方法：prepend()、prependTo()和clone()方法。（还有其他的一些方法，如:append()、appendTo()、before()、insertBefore()等）
HTML页面代码：
|
<body> <p>我是段落元素<span>我是段落元素里的span元素</span></p> <h2>我是一个h2元素</h2> </body> |
页面显示效果：
（1）predend()方法在指点元素前插入指定的内容，并返回一个jQuery对象。内容可以是文本、HMTL元素或jQuery对象。在段落元素之前插入一个h2元素，其文本为“我是插入元素”。加入jQuery代码：
$(‘p’).prepend(‘<h2>我是插入元素</h2>’);
页面显示效果：
（2）prependTo()方法在指定目标之前插入指定元素（和prepend方法类似，就是写法不同）。
实现上面功能的prependTo方法示例：$(‘<h2>我是插入元素</h2>’).prependTo(‘p’); 指定目标在后，插入元素在前；（用英语语法来理解）。：）
（3）clone()方法：为了快速添加DOM节点（该节点是已有元素的副本）时使用clone()方法。复制一个h2元素，在段落元素之前插入该段元素；
$(‘h2’).clone().prependTo(‘p’);
注意：如果使用prepend方法插入DOM元素，则插入内容和目标元素会被合并，这就是说如果把样式应用于段落元素，则该样式也会被应用于之前插入的h2元素。现在拿上面的HTML页面元素做验证；
编写一个CSS类：
|
.highlight{ background-color:#0f0; font-style:italic; } |
HTML页面代码如下：
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('p').prepend('<h2>我是插入元素</h2>'); //在段落元素前插入h2元素 $('p').addClass('highlight'); //为段落元素添加样式 }); </script> </head> <body> <p>我是段落元素<span>我是段落元素里的span元素</span></p> <h2>我是一个h2元素</h2> </body> </html> |
页面显示效果：
可见，样式也被应用于插入的h2元素。