学jquery必会的DOM操作

1.jquery查找节点

（1）    查找元素节点

var $p_txt=$(“p”).text();

alert($p_txt);

（2）    查找属性节点

        Var $title =$("p").attr("title");

       alert($title);

2.    jquery创建节点

（1）    创建元素节点

$(“ul”).append($(“<li></li>”));

（2）    创建属性节点

$(“ul”).append($(“<li name=’orange’></li>”));

（3）    创建文本节点

$(“ul”).append($(“<li name=’apple’>苹果</li>”));

3.    jquery插入节点

（1）    append（）相匹配的元素内部追加内容

 $(“p”).append($(“苹果”));

（2）    appendTo()将匹配的元素追加到指定的元素中

$(“<li name=’banana’>香蕉</li>”).appendTo(“ul”);

4.    jquery删除节点

（1）根据参数删除指定的元素    remove（）

    $(“ul li”).remmove(“li[name=banana]”);

 (2) 清空节点，只清空内容 empty（）

    $(“ul li[name=orange]”).empty();

5.    复制和替换节点

（1）    clone（）复制节点

$(“ul li”).click(function(){

$(this).clone().appendTo(“ul”);

//clone()方法,默认不复制绑定的事件,如果需要复制元素的时候也同时复制这个元素身上的事件，需要增加一个参数（true）

$(this).clone(true).appendTo(“ul”);

});

（2）    替换节点  

①  replaceWith（）使用with后面的标签替换匹配的元素

     $(“p”).click(function(){

   $(“p”).replaceWith(“<span>大将军掉进</span>”);

});

②           replaceAll（）使用某个元素替换所有的其他的元素

    $(“p”).click(function(){

   $(“<span>大将军掉进</span>”).replaceAll(“p”);

});

6.    包裹节点   将某个节点，用其他标记包裹起来

     （1）将所有的元素单独包裹   wrap（）

           $("p").click(function(){

                  $("ulli").wrap("<b></b>");

              });

     （2）将所有匹配的用一个元素来包裹    wrapAll（）

 

           $("p").click(function(){

              $("ulli").wrapAll("<div></div>");

           });

7.    jquery属性操作

（1）    获得属性和设置属性    attr()

      如果一个参数:获得这个属性的值

    var $p =$("p").attr("title");

    alert($p);

如果2个参数:设置这个属性的值为xxx

$("p").attr({"name":"fruit","id":"fruit1"});

（2）    删除属性   removeAttr（）

     $("p").removeAttr("title");

8.    jquery样式操作

     （1）获取样式和设置样式    attr（）

           $("p").click(function(){

                  $(this).attr("class","high");

              });

     （2）追加样式  addClass（）

           $("p").click(function(){

                  $(this).addClass("high");

              });

     （3）移除样式   removeClass（）

           $("p").removeClass("high");

     （4）切换样式   toggle（）

           $(“p”).toggle(“high”);

9.设置和获取html，文本和值

      （1）读取某个元素中html内容    html（）

            var $p = $("p").html();

            alert($p);

       （2）某元素中的文本内容   text（）

             var $p = $("p").text();

           alert($p);

        （3）获取某元素的值    val（）

              var $val =$("input").val();

              $("input").val("xxx");

              alert($val);

10.遍历节点

      （1）取得匹配元素的子元素的集合   children（）

            var $body =$("body").children();

            alert($body.length);

       （2）取得匹配元素后面紧邻的同辈元素   next（）

             var $p = $("p").next();

             alert($p.html());

       （3）取得匹配元素前面紧邻的同辈元素   prev（）

             var $pre =$("ul").prev();

             alert($pre.html());

       （4）取得匹配元素前后紧邻的同辈元素   siblings()

             var $siblings =$("ul").siblings();

            alert($siblings.length);