Jquery操作DOM，笔记2
本文欢迎转载,但必须在文章显眼处保留原文地址
http://blog.163.com/ganlanfei@126/blog/static/121819871201011160936439/
接着上一篇Jquery操作DOM(笔记1)继续
1.替换节点
在Jquery中提供了两个替换节点的方法,即replaceWidth()和replaceAll();
replaceWidth：
说明：将匹配到的元素替换成指定的HTML元素
$("p").replaceWidth("<b>AA</b>"); //将所有P标记替换成<b>AA</b>
replaceAll：
说明：与replaceWidth相反
$(("<b>AA</b>")).replaceAll("p"); //将所有P标记替换成<b>AA</b>
2.包裹节点
在Jquery中提供了三个包裹节点的方法 wrap(),wrapAll()和wrapInner()
wrap：
说明：将指定的HTML元素包裹所有匹配的元素
$("p").wrap("<div></div>"); //在每个P标记外面增加一个div容器;
wrapAll:
说明：将指定的html元素包裹所有匹配的元素，与warp不同的是，warp是将匹配到的元素进行单独包裹，而warpAll是将所有匹配到的元素集中到一起(在匹配到的第一个元素的位置)进行包裹，会改变到DOM的结构。
$("p").wrapAll("<div></div>"); //在所有P标记外面增加一个div容器;
PS:读者最好自己试一下两个的区别，可使用Firebug或者IE自带的开发工者工(在ie下按F12自动弹出)查看;
WrapInner：
说明：该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。
$("strong").wrapInner("<b></b>");
使用前<strong>AA</strong> 使用后<strong><b>AA</b></strong>
3.属性操作：
在Jquery中，用attr()方法来获取和设置元素的属性，用removeAttr()方法来删除元素的属性
例： var title=$("p").attr("title"); //获取第一个p元素的title属性,有多个时，也只是得到第一个p标记而以
var title=$("p")[1].title; //转换成dom对象，获取第二个p标记的title属性
$("p").attr("title","you title value"); //设置p元素的title属性值
$("p").attr("title":"you title value","name":"you name values"); //同时设置p元素多个属性值
$("P").removeAttr("title");//删除p元素的title属性
获取，设置或者删除样式一样可以用上面的方法，因为元素有class属性。
除了可以改变样式外，还可以追加样式,在jquery里面提供了addClass()方法
例：<p class="myClassA" title="my title value">哈哈</p>
$("p").addClass("myClassB");
<p class="myClassA myClassB" title="my title value">哈哈</p>
PS:如果给一个元素添加了多个class值，那么就相当于合并了它们的样式，如果有不同的class设定同一个样式属性，那后者覆盖前者.
有追加，当然也有删除，与addClass()相反的则是removeClass()
例：$("p").removeClass("myClassA").removeClass("myClassB");
简写$("p").removeClass("myClassA myClassB");
4.接下来介绍一个交替执行的方法,即toggle()
例： <p >点我呀</p>
$().ready(function() {
$("p").toggle(function() {
alert("单击");//代码1
}, function() {
alert("再单击"); //代码2
})
})
第一次点击的时候执行代码1,第二次执行代码2,第三次执行代码1,就是这样不断的重复切换。
5.判断是否含有某个样式
hasClass()可以用来判断元素中是否含有某个class，如果有返回true,否则返回false
例：$("p").hasClass("myClassA");//也可以写成$("p").is(".myClassA")，完全是等价的，hasClass实际上也是调用了is()方法。
6.设置和获取html，文本和值
html()此方法类似javascript中的innerHTML属性，可以用来读取或设置某个元素中的html内容
例：<p><b>aa</b></p>
alert($("p").html());
弹出：<b>aa</b>
设置p元素里面的内容
$("p").html("<i>aaa</i>");
结果:<p><i>aa</i></p>
text()此方法类似javascript中的innerText属性，可以用来读取或设置某个元素中的text内容
例：<p><b>aa</b></p>
alert($("p").text());
弹出：aa
设置p元素里面的内容
$("p").text("<b><i>aaa</i></b>");
结果:<b><i>aaa</i></b>
PS:javascript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有浏览器。
夜深了，待续。。。