jquery操作DOM

样式操作

      css（）设置样式

           语法：css(name,value) ;  --设置单个属性

                       或

                     css({name:value, name:value,name:value…}) ;    --设置多个属性

                     css(name) ;   --获取属性值

           示例：$(this).css("border","5px solid #f5f5f5");

                      或

                      $(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

      addClass（）追加样式

           语法：$(selector).addClass(class);

                      或   $(selector).addClass(class1 class2 … classN);

          示例：.text{ padding:15px;}

                     .content {background-color:#FFFF00; }

                     .border {border:2px solid #f00; }

                     $("h2").mouseover(function() {

                       $("p").addClass("content border");

                     });

     removeClass（）移除样式

           语法：$(selector).removeClass("class") ;

                     或   $(selector

           示例：$("h2").mouseout(function() {

                        $("p").removeClass("text content");

                      });

     toggleClass（）切换样式

          语法：$(selector).toggleClass(class) ;

          示例：$("h2").click(function() {

                       $("p").toggleClass("content  border");

                     });

     hasClass（）判断是否含有指定样式

         语法：$(selector). hasClass(class);

         示例：$("h2").mouseover(function() {

                      if(!$("p").hasClass("content ")){

                       $("p").addClass("content ");

                      }

                   });

内容操作

     html（）代码操作

        语法：$("div.left").html();      --获取元素中html代码

                   或

                  $("div.left").html("<div class='content'>…</div>");   --设置元素中html代码

     text（）内容操作

       语法：$("div.left").text();    --获取元素中的文本内容

                  或

                  $("div.left").text("<div class='content'>…</div>");    --设置元素中的文本内容

     var（）属性操作

       语法：$(this).val();    --获取元素的value属性值

                 或     $(this).val(value);   --设置元素的value属性值

节点操作

    查找、创建、插入节点

         元素内部插入子节点

            apped（content）

           appendTo（content）

            prepend（content）

            prependTo（content）

        元素外部插入同辈节点

            after（content）

            insertAfter（content）

            before（content）

            insertBefore（content）

    删除、替换、复制节点

         删除        

            remove()：删除整个节点

            语法：$(selector).remove([expr]);

            uempty()：清空节点内容

            语法：$(selector).empty();

属性操作

   attr（）获取和设置元素属性

   removeAttr（）删除元素属性

节点遍历

    遍历子节点    children（）

        语法：$(selector).children([expr]);

        示例：var $section =$("section").children();

                   alert($section.length);

    遍历同辈节点   

       

next([expr])	用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange");
prev([expr])	用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange");
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("orange");

    遍历前辈元素

       parent（）

       parents（） 

     parent()：获取元素的父级元素

     parents()：获取元素的祖先元素

      示例：

        $("li:eq(1)").parent().addClass("orange");

        $("li:eq(1)").parents().addClass("orange");

   其他遍历方法

      each（）

      语法：$(selector).each(function(index,element)) ;     --index：选择器的位置；element：当前的元素

      end（）：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

      示例：

          $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

         $(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");

         $(".gameList li:last").css("border","none");