HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../script/jquery-1.10.1.js"></script> <style type="text/css"></style> <title>jQueryTest_0301</title> </head> <body> <p title="选择你喜欢吃的水果">选择你喜欢吃的水果</p> <ul> <li title="苹果">苹果</li> <li title="西瓜">西瓜</li> <li title="香蕉">香蕉</li> <li title="桔子">桔子</li> </ul> </body> </html>
1.查找节点（元素节点和属性节点）
<script type="text/javascript">
//查找元素节点
var $li = $("ul li:eq(2)"); //获取<ul>里第2个<li>节点
var li_txt = $li.text(); //获取第2个<li>节点的文本内容
//查找属性节点
var $param = $("p"); //获取<p>节点
var p_txt = $param.attr("title");//获取属性title的内容
</script>
2.创建节点
<script type="text/javascript">
var $li_01 = $("<li title='甜橙'>甜橙</li>");//创建一个<li>元素，包含元素结点和文本结点以及属性
$("ul").append($li_01);
</script>
3.插入节点
插入节点方法：
| append() | 向每个匹配的元素的内部追加内容 |
| prepend() | 向每个匹配的元素的内部前置内容 |
| after() | 向每个匹配的元素之后插入内容 |
| before() | 向每个匹配元素之前插入内容 |
jQuery还提供了一些其它的插入方法：appentTo()、prependTo()、insertAfter()、insertBefore()
4.删除节点
jQuery提供了两种删除节点的方法：
● remove()方法：从DOM中删除所有匹配的元素
$("ul li:eq(2)").remove();//删除第二个<li>元素
● empty()方法：清空匹配元素中所有后代结点
$("ul li:eq(2)").empty();
5.复制节点
<script type="text/javascript">
$("ul li").click(function(){
$(this).clone().appendTo("ul");
});
</script>
6.替换节点
● replaceWith()：将所有匹配的元素都替换成指定的HTML或者DOM元素
● replaceAll()：该方法作用与replaceWith()完全相同，只是颠倒了replaceWith()的操作
<script type="text/javascript">
$("ul li").click(function(){
var txt = $(this).text();
$(this).replaceWith("<li><strong>"+txt+"</strong></li>");
});
</script>
7.包裹节点
● wrap()：将所有的元素进行单独包裹
● wrapAll()：将所有匹配的元素用一个元素包裹起来
● wrapInner()：将第一个匹配的元素的子内容（包括文本节点）用其它结构化的标记包裹起来
$("p").wrap("<b></b>");//用<b>元素将<p>元素包裹起来
8.属性操作
<script type="text/javascript">
var $para = $("p");
$para.attr("title","你最不喜欢吃的水果？");
var txt = $para.attr("title");//获得<p>元素属性title
$para.removeAttr(title");//删除<p>的title属性
</script>
9.样式操作
addClass()：追加样式
removeClass()：移除样式
hasClass()：判断是否含有某个样式
toggleClass()：切换样式
<script type="text/javascript">
$("ul li:eq(0)").addClass("high");
$("ul li:eq(1)").addClass("another");//追加样式
$("ul li:eq(1)").removeClass("another");//移除样式
$("#changeButton").click(function(){
$("p").toggleClass("another");
});
</script>
10.设置和获取HTML、文本和值
● html()方法：读取或设置某个元素中的HTML内容
● text()方法：读取或设置某个元素中的文本内容
● val()方法：设置或获取元素的值，如果元素为多选，则返回一个包含所有选择的值的数组
<select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option> </select> <input type="checkbox" value="check1">多选1</input> <input type="checkbox" value="check2">多选2</input> <input type="checkbox" value="check3">多选3</input> <input type="checkbox" value="check4">多选4</input> <input type="radio" value="radio1">单选1</input> <input type="radio" value="radio2">单选2</input> <input type="radio" value="radio3">单选3</input>
使用val()方法设置选中项：
<script type="text/javascript">
$("#single").val("选择3号");
$("#multiple").val(["选择2号","选择4号"]);
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
</script>
对于下拉列表框，在jQuery中，val()方法从最后一个选项往前读取，如果选项的value或者text中任意一项符合就会选中。
11.遍历节点
● children()方法：取得匹配元素的子元素集合
● next()方法：取得匹配元素后面紧邻的同辈元素
● prev()方法：取得匹配元素前面紧邻的同辈元素
● siblings()方法：取得匹配元素前、后所有的同辈元素
● closest()方法：取得最近的匹配元素