jQuery DOM 操作
1. jQuery查找元素
1， 查找元素节点
var $p=$(“p”).text();
alert($p); 获得的是<p></p>标签的内容
获得元素的内容 text( )
2， 查找属性节点
$p=$(“p”).attr(“title”,”friut”);
给p标签添加title属性属性值为 fruit
attr( ) 第一个参数：节点的属性 第二个属性：属性的值
只写第一个参数，表示查找节点的属性
写两个参数，表示给元素添加属性及对应的属性值
2. jQuery创建节点
1， 创建元素节点
在ul列表中添加一个li
var $a=$ (“<li></li>”);
$(“ul”).append($a);
append( ):向匹配的元素内追加内容
2， 创建属性节点
在ul列表中添加一个id=”li”的li
var $a=$(“<li id=’li’></li>”);
$(“ul”).append($a);
3， 创建文本节点
在ul列表中添加一个li,内容是“苹果”
var $a=$(“<li>苹果</li>”)；
$(“ul”).append($a); 或者
$a.appendTo($(“ul”));
appendTo( ) 节点追加到某一个元素
3. 删除节点
1， 移除节点 remove（）
<ul>
<li name=”a”>苹果</li>
<li title=”水果”>橙子</li>
</ul>
移除name=”a”的节点
$(“li[name=a]”).remove();
或者 $(“ul li”).remove(“li[name=a]”);
2， 清空节点 empty( )
清空title=水果的li
$(“li[title=水果]”).empty( );
4. 复制节点
1， clone()方法,默认不复制绑定的事件,如果需要复制元素的时候也同时复制这个元素身上的事件，需要增加一个参数(true)
复制p标签，而且复制的p标签的内容也可以复制
$(“p”).clone(“true”).appendTo(“ul”);
5. 替换节点
1， replaceWith() 使用with后面的标签替换匹配的元素
$(“p”).replaceWith(“<span>用span标签替换p标签</span>”)
2， replaceAll()使用某个元素替换所有的其他元素
$(“p”).replaceAll( “<span>用span标签替换所有的p标签</span>”)
6. 包裹节点
1. wrap()将所有的元素单独包裹
将每一个p标签单独加粗
$(“p”).wrap(“<b></b>”);
2. wrapAll()将所有匹配的用一个元素包裹
将所有的p标签加粗用一个<b></b>标签包裹
$(“p”).wrap(“<b></b>”);
7. 属性操作
1. attr()获取和设置属性
alert($(“p”).attr(“id”)); 显示p标签的id属性
$(“p”).attr(“title”,”aa”); 将p标签设置属性title及值
2. removeAttr()删除属性
$(“p”).removeAttr(“id”); 删除p标签的id属性
8. 样式属性
1. addClass( )追加样式
$(“p”).addClass(“a”).appendTo(“div”);
给p标签追加class为a的样式追加到div下
2. removeClass( )移除样式
$(“p”).removeClass(“a”) ; 删除p标签中a样式
3. toggleClass( )切换样式 如果你有这个class属性我就删除，如果没有就增加
$(“p”).toggleClass(“a”);
9. 设置和获取html( ),文本和值
1. html( )获取某个元素中html内容
$(“p”).html( ); //读取html的内容
$(“p”).html(“hahah”);设置html的内容
2. text( ) 某元素中的文本内容
$(“p”).text();
3. val( )获得某元素的值
$(“input”).val(); 获取input的属性值
$(“input”).val(“asad”);//设置input的value属性值
10. 遍历节点
1,children() 取得匹配元素的子元素的集合
Alert($(“p”).childern());
3. next() 取得匹配元素后面的同辈元素
alert($(“p”).next().html());
4. prev() 取得匹配元素前面紧邻的同辈元素
alert($(“ul”).prev().html());
5. siblings() 取得匹配元素前后所有的同辈元素
alert($(“ul”).siblings( ).length());
