第一堂课
1、将jquery引入到html页面
<script type="text/javascript" src="../script/jquery-1.5.js"></script>
第一个代码：
<head>
<script type="text/javascript" src="../script/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready( //此句可以替换为 $(function() {} )
function(){
windows.alert("Hello World");
});
</script>
</head>
2、将jQuery对象转换为DOM对象
var $ obj = $("#id"); //将html标签id为“id”的定义为ojb的jQuery对象
var dom = $obj[0]; //将jQuery对象转换为DOM对象
3、将DOM对象转换为jQuery对象
var dom = document.getElementById("p");
var $ dom = $ (dom );
4、jQuery开发工具 EditPlus
第二堂课 jquery选择器
A：基本选择器
1、标签选择器
<body> <h1>这是一号标题</h1> <p>这是一个<b>自然段</b></p> </body>
$("h1"); //获取<h1>标签
$("p"); //获取<p> 标签
2、id选择器
<body> <h1 id="one">这是一号标题</h1> <p id="two">这是一个<b>自然段</b></p> </body>
$("#one"); //获取id为one的标签
$("#two"); //获取id为two的标签
3、类选择器
<body> <h1 class="bt">这是一号标题</h1> <p class="dt">这是一个<b>自然段</b></p> </body>
$(".bt"); //获取class为bt的标签
$(".dt"); //获取class为dt的标签
4、通配符选择器
$("*") //表示选取所有的元素
5、群选择器
$("p, #two, span"); //表示同时选取所有的p标签、id为two的标签、所有的span标签
B：层次选择器
1、后代选择器 $("ancestor descendant"); 表示选择父元素的所有子元素。
2、子选择器 $("parent > child "); 表示选取父元素的直接子元素，不包括其孙元素
<body>
<div id="parent">
<div class="one" id="one">我是class为one， id也为one的div
<div class="mini" id="two">我是class为mini， id为two 的div </div>
</div>
</div>
</body>
(1) $("body div"); 返回的结果是选择body标签内的所有的三个div标签
（2）$("div #parent > div");
返回的结果是id值为parent的div标签的直接子节点，就是选择id值为one的div标签，id值为two的标签不被选中。
后代选择器举例：
$("body div" ); 选取body标签下所有的div标签
$("ul li "); 选取ul标签下所有的li标签
$(" #one div") 选取id为one的标签所包含的所有的div子标签
$("div #one div") 选取id为one的div标签所包含的所有的div子标签
$(".one div") 选取class为one的标签所包含的所有的div子标签
$("div .one span") 选取class为one的div标签包含的所有的span子标签
$(".one .two ") 选取class为one的标签所包含的所有的class为two的标签
子选择器举例：
$("body > div") 选取body标签下所有的第一级div子标签
$("ul > li") 选取ul标签下所有的第一级li子标签
$("#one > div") 选取id值为one的标签所包含的所有的div子标签
$("div #one div ") 选取id为one的div所包含的所有的div子标签
$(".one div") 选取class为one的标签所包含的所有的div子标签
$("div .one span") 选取class为one的div标签所包含的所有的span子标签
$(".one .two") 选取class为one的标签所包含的所有的class为two的标签
3、+和~选择器
$("prev + next ") 选取紧接在prev标签后的next标签，其中这两个标签是同级别的
可以使用next（）方法代替 + 选择器 如： $(".one + div ") 可以被替换成 $("one).next("div")
$("prev ~ sibling") 表示选取prev标签后的所有兄弟标签
可以使用nextAll()方法代替~选择器 如： $(".one ~ div ") 可以被替换成 $(".one").nextAll("div")
表示选取class为one的标签后门所有的兄弟标签。
3、过滤选择器
过滤选择器是通过一些指定的过滤规则来筛选出所需的标签，选择器都以一个冒号：开头。
A、基本过滤选择器
：first 匹配找到的第一个元素 $("div:first") 选取所有div元素的第一个div元素
：last 匹配找到的最后一个元素 $("div:last") 选取所有div元素的最后一个div元素
:even 匹配所有索引值为偶数的元素，从0开始计数 $("tr:even") 选取索引是偶数的表格行
:odd 匹配所有索引值为奇数的元素，从0开始计数 $("tr:odd") 选取索引值奇数的表格行
:eq(in) 匹配索引等于in的元素，索引是从0开始计算 $("tr:eq(1)") 匹配表格的第二行
:gt(in) 匹配索引大于in的元素， $("tr:gt(0)") 选取索引大于0 的表格，也就是表格的第一行以后的行
:lt(in) 匹配索引小于in的元素， $("tr:lt(2)") 匹配比2小的索引值，也就是表格的第一行和第二行
:header 匹配所有的h1、h2、h3...h7一类的标签 $(":header") 选取网页中所有的的h1、h2、h3...h7
:animated 匹配所有正在执行动画效果的所有元素 $("div:animated") 选取正在执行动画的div元素
B：内容过滤选择器
用来过滤所包含的子元素或者文本内容
:contains(text) 匹配包含给定文本的元素 $("p:contains('jarry')") 查找所有包含"jarry"文本的p标签
:empty 匹配所有不包含子元素或者文本的空元素 $("div:empty") 查找所有不包含子元素或者文本的div空标签
:has(selector) 匹配含有选择器所匹配的元素的元素 $("div:has(li)".addClass("wap") 给div标签中所有包含li标签的元素添加一个wap类
:parent 匹配含有子元素或者文本的元素 $("td:parent") 查找拥有子元素或者文本的td标签
C：可见性过滤选择器
根据标签或元素的可见性来选择标签或元素
:hidden 匹配所有看不见的标签或者元素 $("input:hidden") 查找不可见的input标签
:visible 匹配所有看不见的标签或者元素 $("div:visilble") 查找所有可见的div标签
D：属性过滤选择器
通过标签或元素的属性来选取标签或者元素
[attribute] 匹配包含给定属性的元素 $("p[id]") 查找所有包含id属性的p标签
[attribute=value] 匹配给定的属性是value值的元素 $("p[id='abc']") 查找所有id属性值为abc的p标签
[attribute != value] 同上反
[attribute ^=value] 匹配给定的属性是以value值开始的元素 $("p[id ^='abc']")
[attribute $=value] 匹配给定的属性是以value值 结尾的元素 $("p[id $='abc']")
[attribute *= value] 匹配给定的属性是包含value值的元素 $("p[id *='abc']")
[attr1][attr2][attr3] 复合属性选择器需要同时满足多个条件时使用 $("div [id] [id ^='abc']")
E:表单对象属性过滤选择器
主要对所选择的表单元素进行过滤，如可用、不可用、选择、被选择等。
:enalbed 选取所有可用的表单对象 $(" #name:enabled") 选取所有id值为name的表单内的所有可用表单对象
:disabled 选取所有不可用的表单对象 $(" #name:disabled") 选取所有id值为name的表单内的所有不可用表单对象
:checked 选取所有被选中的表单对象（主要是radiobox和checkbox） $("input:checked") 选取被选中的input表单对象
:selected 选取所有被选中的选项（主要是下拉列表selecte) $("select:selected") 选取所有被选中的选项
F：表单选择器
:input $(":input")
:text 选取所有单行文本框 $(":text")
:password $(" :password")
:radio $(" :radio")
:checkbox $(" checkbox")
:submit $(" :submit")
:image 选取所有图像按钮 $(" :image")
:reset 选取所有重置按钮 $(" :reset")
:button 选取所有按钮 $(" :button")
:file 选取所有的上传域 $(" :file")
:hidden 选取所有不可见元素 $(":hidden")
如果要得到表单元素的个数，则使用length方法 $(" #myform :input").length 获取id为myform的表单内的所有input元素的个数
G：子元素过滤选择器 主要是针对父元素和子元素之间做出选择
:nth-child(index/even/odd/equation) 陪陪其父元素下的第index个 或奇偶元素（从1开始计算）
$(" ul li :nth-child(2) ") 在每个ul标签中查找第2个例标签
:first-child 匹配每个父元素的一个子元素 $(" ul li :first-child") 查找每个ul中查找第一个li
last-child 匹配每个父元素的最后一个子元素
:only-child 如果某个元素是父元素中的唯一一个子元素，则匹配；否则不匹配
第三堂课 jQuery中的DOM
一：查找DOM节点
1、查找元素节点 例如：
<script type="text/javascript" src="../scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$().ready(function(){ //$().ready(function() {}) 可改写成 $(document).ready(function(){})
var $ li = $("ul li :eq(1) " ); //获取ul中的第2个li元素节点
var text = $li.text (); //取得第2个li元素节点的文本内容
window.alert(text); //输出该文本内容
})
</script>
2、查找属性节点 用attr（）方法
用法1：attr("属性值") 可以方便的从匹配元素中获取一个属性的值，如果没有相应属性则返回 undefined
用法2：attr("属性名称", "属性值") 为所有匹配的元素设置一个属性值，主义这个返回值是一个对象，可以再次使用attr（）方法显示设置后的更新过的属性值
<script type="text/javascript src="../scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$().ready(function(){
var li = $("ul li:eq(0)" ); //获取ul元素的第一个li元素节点
var li_attr = $li.attr("title"); //获取li元素节点的title属性节点的值
window.alert(li_attr);
var li_set_attr = $ li_attr("title", "this is php");
window.alert(li_set_attr.attr("title") );
})
</script>
二、创建DOM节点
1、创建元素节点 直接用$()来完成 如：
var $ li_one = $("<li></li>"); //创建第一个li元素
var $ li_two = $("<li></li>");
$("ul").append ($ li_one); //将第一个li添加到ul中
$("ul").append($ li_two);
2、创建文本节点 方法：在创建元素节点时直接将稳步内容写出来
var $ li_one = $("<li>asp</li>");
var $ li_two = $("<li>php</li>");
$("ul").append($ li_one);
$("ul").append($ li_two);
3、创建属性节点 方法同上类似，直接将属性内容写出来就可了
var $ li_one = $("<li title='asp'>asp</li>");
var $ li_two = $(" <li title='jsp'>jsp</li>");
$("ul).append($ li_one); $("ul").append($ li_two);
三、插入DOM节点
1、append（）方法 同上
2、appendTo() 方法 $("<p>Dom</p>").apendTo(".inner");
3、preend（）方法 这是向匹配元素内部的开始处插入内容的最佳的方式 $(".inner").prepend("<p>DOM</p>");
4、prependTo()
5、after（）在每个匹配的元素节点之后插入内容 $(".inner").after("<p>Dom</p>");
6、insertAfter（）在每个匹配的元素节点之后插入内容 $("<p>Dom</p>").insertAfter(".inner");
7、before（） 在美国匹配的元素节点之前插入内容 $(".inner").before("<P>Dom</p>");
8、insertBefore（）
四、删除DOM节点
1、remove（） 从DOM中删除所有匹配的元素
<ul>
<li class="'hello">Hello </li>
<li class = "inner"> jQuery </li>
</ul>
$(".hello").remove(); //删除class为hello的元素，不带参数
$("li").remove(".hello") //删除class为hello的元素，带参数
2、empty（） 不是删除节点，而是清空节点
$(".hello").empty();
五、复制DOM节点——clone（）
<ul>
<li class="'hello">Hello </li>
<li class = "inner"> jQuery </li>
</ul>
$(".hello").clone().appendTo(".inner"); 说明复制后的新节点不具备任何行为，所以需要把行为也一起复制，可用clone(true)来复制行为
六、替换DOM节点
1、replaceWith（content）
2、replaceAll（content）
$(".hello").replaceWith("<li>replaceWith</li>" );
七、包装DOM节点
1、wrap（）用其他元素的结构化标记包装起来 $("li").wrap("<b></b>");
2、wrapAll（） $("li").wrapAll("<b></b>");
3、wrapInner（）将每一个匹配的元素的子内容，包括文本节点包装起来 $("li").wrapInner("<b></b>");
八、DOM节点属性操作
1、attr（）
2、removeAttr（）删除某个元素的属性 $("li").removeAttr("class")
九、DOM节点Css属性
1、addClass（）追加css样式
<ul class="one"> <li>hello</li> <li>jQuery</li> </ul>
执行$("ul").addClass("two")后变成：<ul class="one two"> <li>hello</li> <li>jQuery</li> </ul>
2、removeClass（）删除css类
$("ul).removeClass("one");
$("ul).removeClass("one two"); //删除两个class时，用空格分开
$("ul).removeClass() //不带参数时，表示删除全部class
3、toggleClass（）控制样式的重复切换，如果样式类名存在，则删除；若不存在，则添加。
<ul> <li class = "one">hello</li> <li >css</li> </ul>
运行 $("li").toggleClass("one"); 后，变成了
<ul> <li >hello</li> <li class = "one">css</li> </ul>
4、hasClass（）用来判断元素中是否含有某个class，若有，返回true；若无，返回false；
var hasClassOne = $("li").hasClass("one");
十、Dom节点文本的值
1、html（） 读取和设置元素中的HTML内容，此函数不能用于XML文档，但可以用于XHTML。
<ul class="one")>
<li class="one">Hello</li> <li class="two">jQuery</li> <li>three</li>
</ul>
$().ready(function(){
var html = $("ul").html(); window.alert(html);
})
运行上面代码后的的结果是：请自己运行
2、text（）读取或设置元素节点的文本内容，此方法对html和xml文档都有效。
<ul class="one")>
<li class="one">Hello</li> <li class="two">jQuery</li> <li>three</li>
</ul>
var txt = $("li:eq(0)").text();
$(li:eq(1)").text("这是修改后的JQuery"); window.alert(txt);
3、val（）设置和获取元素的值 check、select、 radio等表单元素都能使用为赋值，如果多选，将返回一个数组，并包含所选的值
<script type="text/script>
$().ready(function(){
var s = $("#h").val(); window.alert(s);
$("#w").val("JQUERY");
})
</script>
<input id="h" value="hello" /> <input id="w" value="world" /> 自己运行看结果
十一、遍历DOM节点
1、children（） 只考虑子元素，而不考虑所有后代元素，取得一个包含匹配元素的所有子元素的集合，返回值是jQuery对象。
parents（）将查找所有祖辈元素
$("body").children();
2、next（）取得一个包含匹配的元素集合中，每个元素紧邻的后面同辈元素的集合，只是返回后面那个紧邻的同辈元素
nextAll（） 返回后面所有的同辈元素
$("p").next();
3、prev（） 与next（）相反
4、siblings（） 可以得到匹配元素前后所有的同辈元素 $("div").siblings()
十二、DOM中的Style
用css（）来对style对象的属性进行操作、读取、设置
读取css属性值 var txtColor = $("span").css("color"); var txtHeight = $("p").css("height")
设置css属性值 $("span").css("color", "red"); $("p").css("height","30");
第四堂课 jQuery的事件和动画
1、将jquery引入到html页面
<script type="text/javascript" src="../script/jquery-1.5.js"></script>
第一个代码：
<head>
<script type="text/javascript" src="../script/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready( //此句可以替换为 $(function() {} )
function(){
windows.alert("Hello World");
});
</script>
</head>
2、将jQuery对象转换为DOM对象
var $ obj = $("#id"); //将html标签id为“id”的定义为ojb的jQuery对象
var dom = $obj[0]; //将jQuery对象转换为DOM对象
3、将DOM对象转换为jQuery对象
var dom = document.getElementById("p");
var $ dom = $ (dom );
4、jQuery开发工具 EditPlus
第二堂课 jquery选择器
A：基本选择器
1、标签选择器
<body> <h1>这是一号标题</h1> <p>这是一个<b>自然段</b></p> </body>
$("h1"); //获取<h1>标签
$("p"); //获取<p> 标签
2、id选择器
<body> <h1 id="one">这是一号标题</h1> <p id="two">这是一个<b>自然段</b></p> </body>
$("#one"); //获取id为one的标签
$("#two"); //获取id为two的标签
3、类选择器
<body> <h1 class="bt">这是一号标题</h1> <p class="dt">这是一个<b>自然段</b></p> </body>
$(".bt"); //获取class为bt的标签
$(".dt"); //获取class为dt的标签
4、通配符选择器
$("*") //表示选取所有的元素
5、群选择器
$("p, #two, span"); //表示同时选取所有的p标签、id为two的标签、所有的span标签
B：层次选择器
1、后代选择器 $("ancestor descendant"); 表示选择父元素的所有子元素。
2、子选择器 $("parent > child "); 表示选取父元素的直接子元素，不包括其孙元素
<body>
<div id="parent">
<div class="one" id="one">我是class为one， id也为one的div
<div class="mini" id="two">我是class为mini， id为two 的div </div>
</div>
</div>
</body>
(1) $("body div"); 返回的结果是选择body标签内的所有的三个div标签
（2）$("div #parent > div");
返回的结果是id值为parent的div标签的直接子节点，就是选择id值为one的div标签，id值为two的标签不被选中。
后代选择器举例：
$("body div" ); 选取body标签下所有的div标签
$("ul li "); 选取ul标签下所有的li标签
$(" #one div") 选取id为one的标签所包含的所有的div子标签
$("div #one div") 选取id为one的div标签所包含的所有的div子标签
$(".one div") 选取class为one的标签所包含的所有的div子标签
$("div .one span") 选取class为one的div标签包含的所有的span子标签
$(".one .two ") 选取class为one的标签所包含的所有的class为two的标签
子选择器举例：
$("body > div") 选取body标签下所有的第一级div子标签
$("ul > li") 选取ul标签下所有的第一级li子标签
$("#one > div") 选取id值为one的标签所包含的所有的div子标签
$("div #one div ") 选取id为one的div所包含的所有的div子标签
$(".one div") 选取class为one的标签所包含的所有的div子标签
$("div .one span") 选取class为one的div标签所包含的所有的span子标签
$(".one .two") 选取class为one的标签所包含的所有的class为two的标签
3、+和~选择器
$("prev + next ") 选取紧接在prev标签后的next标签，其中这两个标签是同级别的
可以使用next（）方法代替 + 选择器 如： $(".one + div ") 可以被替换成 $("one).next("div")
$("prev ~ sibling") 表示选取prev标签后的所有兄弟标签
可以使用nextAll()方法代替~选择器 如： $(".one ~ div ") 可以被替换成 $(".one").nextAll("div")
表示选取class为one的标签后门所有的兄弟标签。
3、过滤选择器
过滤选择器是通过一些指定的过滤规则来筛选出所需的标签，选择器都以一个冒号：开头。
A、基本过滤选择器
：first 匹配找到的第一个元素 $("div:first") 选取所有div元素的第一个div元素
：last 匹配找到的最后一个元素 $("div:last") 选取所有div元素的最后一个div元素
:even 匹配所有索引值为偶数的元素，从0开始计数 $("tr:even") 选取索引是偶数的表格行
:odd 匹配所有索引值为奇数的元素，从0开始计数 $("tr:odd") 选取索引值奇数的表格行
:eq(in) 匹配索引等于in的元素，索引是从0开始计算 $("tr:eq(1)") 匹配表格的第二行
:gt(in) 匹配索引大于in的元素， $("tr:gt(0)") 选取索引大于0 的表格，也就是表格的第一行以后的行
:lt(in) 匹配索引小于in的元素， $("tr:lt(2)") 匹配比2小的索引值，也就是表格的第一行和第二行
:header 匹配所有的h1、h2、h3...h7一类的标签 $(":header") 选取网页中所有的的h1、h2、h3...h7
:animated 匹配所有正在执行动画效果的所有元素 $("div:animated") 选取正在执行动画的div元素
B：内容过滤选择器
用来过滤所包含的子元素或者文本内容
:contains(text) 匹配包含给定文本的元素 $("p:contains('jarry')") 查找所有包含"jarry"文本的p标签
:empty 匹配所有不包含子元素或者文本的空元素 $("div:empty") 查找所有不包含子元素或者文本的div空标签
:has(selector) 匹配含有选择器所匹配的元素的元素 $("div:has(li)".addClass("wap") 给div标签中所有包含li标签的元素添加一个wap类
:parent 匹配含有子元素或者文本的元素 $("td:parent") 查找拥有子元素或者文本的td标签
C：可见性过滤选择器
根据标签或元素的可见性来选择标签或元素
:hidden 匹配所有看不见的标签或者元素 $("input:hidden") 查找不可见的input标签
:visible 匹配所有看不见的标签或者元素 $("div:visilble") 查找所有可见的div标签
D：属性过滤选择器
通过标签或元素的属性来选取标签或者元素
[attribute] 匹配包含给定属性的元素 $("p[id]") 查找所有包含id属性的p标签
[attribute=value] 匹配给定的属性是value值的元素 $("p[id='abc']") 查找所有id属性值为abc的p标签
[attribute != value] 同上反
[attribute ^=value] 匹配给定的属性是以value值开始的元素 $("p[id ^='abc']")
[attribute $=value] 匹配给定的属性是以value值 结尾的元素 $("p[id $='abc']")
[attribute *= value] 匹配给定的属性是包含value值的元素 $("p[id *='abc']")
[attr1][attr2][attr3] 复合属性选择器需要同时满足多个条件时使用 $("div [id] [id ^='abc']")
E:表单对象属性过滤选择器
主要对所选择的表单元素进行过滤，如可用、不可用、选择、被选择等。
:enalbed 选取所有可用的表单对象 $(" #name:enabled") 选取所有id值为name的表单内的所有可用表单对象
:disabled 选取所有不可用的表单对象 $(" #name:disabled") 选取所有id值为name的表单内的所有不可用表单对象
:checked 选取所有被选中的表单对象（主要是radiobox和checkbox） $("input:checked") 选取被选中的input表单对象
:selected 选取所有被选中的选项（主要是下拉列表selecte) $("select:selected") 选取所有被选中的选项
F：表单选择器
:input $(":input")
:text 选取所有单行文本框 $(":text")
:password $(" :password")
:radio $(" :radio")
:checkbox $(" checkbox")
:submit $(" :submit")
:image 选取所有图像按钮 $(" :image")
:reset 选取所有重置按钮 $(" :reset")
:button 选取所有按钮 $(" :button")
:file 选取所有的上传域 $(" :file")
:hidden 选取所有不可见元素 $(":hidden")
如果要得到表单元素的个数，则使用length方法 $(" #myform :input").length 获取id为myform的表单内的所有input元素的个数
G：子元素过滤选择器 主要是针对父元素和子元素之间做出选择
:nth-child(index/even/odd/equation) 陪陪其父元素下的第index个 或奇偶元素（从1开始计算）
$(" ul li :nth-child(2) ") 在每个ul标签中查找第2个例标签
:first-child 匹配每个父元素的一个子元素 $(" ul li :first-child") 查找每个ul中查找第一个li
last-child 匹配每个父元素的最后一个子元素
:only-child 如果某个元素是父元素中的唯一一个子元素，则匹配；否则不匹配
第三堂课 jQuery中的DOM
一：查找DOM节点
1、查找元素节点 例如：
<script type="text/javascript" src="../scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$().ready(function(){ //$().ready(function() {}) 可改写成 $(document).ready(function(){})
var $ li = $("ul li :eq(1) " ); //获取ul中的第2个li元素节点
var text = $li.text (); //取得第2个li元素节点的文本内容
window.alert(text); //输出该文本内容
})
</script>
2、查找属性节点 用attr（）方法
用法1：attr("属性值") 可以方便的从匹配元素中获取一个属性的值，如果没有相应属性则返回 undefined
用法2：attr("属性名称", "属性值") 为所有匹配的元素设置一个属性值，主义这个返回值是一个对象，可以再次使用attr（）方法显示设置后的更新过的属性值
<script type="text/javascript src="../scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$().ready(function(){
var li = $("ul li:eq(0)" ); //获取ul元素的第一个li元素节点
var li_attr = $li.attr("title"); //获取li元素节点的title属性节点的值
window.alert(li_attr);
var li_set_attr = $ li_attr("title", "this is php");
window.alert(li_set_attr.attr("title") );
})
</script>
二、创建DOM节点
1、创建元素节点 直接用$()来完成 如：
var $ li_one = $("<li></li>"); //创建第一个li元素
var $ li_two = $("<li></li>");
$("ul").append ($ li_one); //将第一个li添加到ul中
$("ul").append($ li_two);
2、创建文本节点 方法：在创建元素节点时直接将稳步内容写出来
var $ li_one = $("<li>asp</li>");
var $ li_two = $("<li>php</li>");
$("ul").append($ li_one);
$("ul").append($ li_two);
3、创建属性节点 方法同上类似，直接将属性内容写出来就可了
var $ li_one = $("<li title='asp'>asp</li>");
var $ li_two = $(" <li title='jsp'>jsp</li>");
$("ul).append($ li_one); $("ul").append($ li_two);
三、插入DOM节点
1、append（）方法 同上
2、appendTo() 方法 $("<p>Dom</p>").apendTo(".inner");
3、preend（）方法 这是向匹配元素内部的开始处插入内容的最佳的方式 $(".inner").prepend("<p>DOM</p>");
4、prependTo()
5、after（）在每个匹配的元素节点之后插入内容 $(".inner").after("<p>Dom</p>");
6、insertAfter（）在每个匹配的元素节点之后插入内容 $("<p>Dom</p>").insertAfter(".inner");
7、before（） 在美国匹配的元素节点之前插入内容 $(".inner").before("<P>Dom</p>");
8、insertBefore（）
四、删除DOM节点
1、remove（） 从DOM中删除所有匹配的元素
<ul>
<li class="'hello">Hello </li>
<li class = "inner"> jQuery </li>
</ul>
$(".hello").remove(); //删除class为hello的元素，不带参数
$("li").remove(".hello") //删除class为hello的元素，带参数
2、empty（） 不是删除节点，而是清空节点
$(".hello").empty();
五、复制DOM节点——clone（）
<ul>
<li class="'hello">Hello </li>
<li class = "inner"> jQuery </li>
</ul>
$(".hello").clone().appendTo(".inner"); 说明复制后的新节点不具备任何行为，所以需要把行为也一起复制，可用clone(true)来复制行为
六、替换DOM节点
1、replaceWith（content）
2、replaceAll（content）
$(".hello").replaceWith("<li>replaceWith</li>" );
七、包装DOM节点
1、wrap（）用其他元素的结构化标记包装起来 $("li").wrap("<b></b>");
2、wrapAll（） $("li").wrapAll("<b></b>");
3、wrapInner（）将每一个匹配的元素的子内容，包括文本节点包装起来 $("li").wrapInner("<b></b>");
八、DOM节点属性操作
1、attr（）
2、removeAttr（）删除某个元素的属性 $("li").removeAttr("class")
九、DOM节点Css属性
1、addClass（）追加css样式
<ul class="one"> <li>hello</li> <li>jQuery</li> </ul>
执行$("ul").addClass("two")后变成：<ul class="one two"> <li>hello</li> <li>jQuery</li> </ul>
2、removeClass（）删除css类
$("ul).removeClass("one");
$("ul).removeClass("one two"); //删除两个class时，用空格分开
$("ul).removeClass() //不带参数时，表示删除全部class
3、toggleClass（）控制样式的重复切换，如果样式类名存在，则删除；若不存在，则添加。
<ul> <li class = "one">hello</li> <li >css</li> </ul>
运行 $("li").toggleClass("one"); 后，变成了
<ul> <li >hello</li> <li class = "one">css</li> </ul>
4、hasClass（）用来判断元素中是否含有某个class，若有，返回true；若无，返回false；
var hasClassOne = $("li").hasClass("one");
十、Dom节点文本的值
1、html（） 读取和设置元素中的HTML内容，此函数不能用于XML文档，但可以用于XHTML。
<ul class="one")>
<li class="one">Hello</li> <li class="two">jQuery</li> <li>three</li>
</ul>
$().ready(function(){
var html = $("ul").html(); window.alert(html);
})
运行上面代码后的的结果是：请自己运行
2、text（）读取或设置元素节点的文本内容，此方法对html和xml文档都有效。
<ul class="one")>
<li class="one">Hello</li> <li class="two">jQuery</li> <li>three</li>
</ul>
var txt = $("li:eq(0)").text();
$(li:eq(1)").text("这是修改后的JQuery"); window.alert(txt);
3、val（）设置和获取元素的值 check、select、 radio等表单元素都能使用为赋值，如果多选，将返回一个数组，并包含所选的值
<script type="text/script>
$().ready(function(){
var s = $("#h").val(); window.alert(s);
$("#w").val("JQUERY");
})
</script>
<input id="h" value="hello" /> <input id="w" value="world" /> 自己运行看结果
十一、遍历DOM节点
1、children（） 只考虑子元素，而不考虑所有后代元素，取得一个包含匹配元素的所有子元素的集合，返回值是jQuery对象。
parents（）将查找所有祖辈元素
$("body").children();
2、next（）取得一个包含匹配的元素集合中，每个元素紧邻的后面同辈元素的集合，只是返回后面那个紧邻的同辈元素
nextAll（） 返回后面所有的同辈元素
$("p").next();
3、prev（） 与next（）相反
4、siblings（） 可以得到匹配元素前后所有的同辈元素 $("div").siblings()
十二、DOM中的Style
用css（）来对style对象的属性进行操作、读取、设置
读取css属性值 var txtColor = $("span").css("color"); var txtHeight = $("p").css("height")
设置css属性值 $("span").css("color", "red"); $("p").css("height","30");
第四堂课 jQuery的事件和动画
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
