jQuery框架选择器2

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());