使用jQuery操作DOM

       1.jQuery中的DOM操作

              jQuery对JavaScript中的DOM操作进行了封装

       2.设置和获取样式值

              1.使用css()为指定的元素设置样式值或获取样式值

         $(this).css("border","5px solid #f5f5f5");
       或
         $(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
       //opacity设置透明度

              2.addClass() 追加样式

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

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

                            });

              3.remove()移除加样式

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

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

                      });

              4.toggleClass()切换样式

                     模拟addClass()与removeClass()实现样式切换过程

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

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

                     });

              5.hasClass()判断是否包含指定样式

        $("h2").mouseover(function() {
           if(!$("p").hasClass("content ")){
                  $("p").addClass("content ");
           }
        });

       3.HTML代码操作

              html()可以对HTML代码进行操作，类似于JS中的innerHTML

              $("div.left").html();
              或
               $("div.left").html("<div class='content'>…</div>");

       4.标签内容操作

              text()可以获取或设置元素的文本内容

              html()用于获取第一个匹配元素的HTML内容或文本内容

              $("div.left").text();
              或
               $("div.left").text("<div class='content'>…</div>");

       5.属性值操作

              val()可以获取或设置元素的value属性值

              $(this).val();
              或  
              $(this).val(value);

       6.创建节点函数

              工厂函数$()用于获取或创建节点

                     $(selector)：通过选择器获取节点

                     $(element)：把DOM节点转化成jQuery节点

                     $(html)：使用HTML字符串创建jQuery节点

              var $newNode=$("<li></li>");
              var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
              var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

       7.删除节点

              remove()：删除整个节点

                     $(selector).remove([expr]);

              empty()：清空节点内容

                     $(selector).empty();

       8.替换节点

              replaceWith()和replaceAll()用于替换某个节点

                     var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

                     $(".gameList li:eq(2)").replaceWith($newNode1);

                     $($newNode1).replaceAll(".gameList li:eq(2)");

       9.复制节点

       clone()用于复制某个节点

                     $(".gameList li:eq(1)").click(function(){

                             $(this).clone(true).appendTo(".gameList");

                        })

                     $(".gameList li:eq(2)").click(function(){

                            $(this).clone(false).appendTo(".gameList");

                       })

       10.获取和设置元素属性

               attr()用来获取与设置元素属性 

                     $(".contain img").attr({"200",height:"80"});

              removeAttr()用来删除元素的属性

                     $(".contain img").removeAttr("alt");

       11.遍历子元素

              children()方法可以用来获取元素的所有子元素

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

                      alert($section.length);

       12.遍历同辈元素

              1.next()       用于获取紧邻匹配元素之后的元素       

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

              2.prev()        用于获取紧邻匹配元素之前的元素     

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

              3.slibings()      用于获取位于匹配元素前面和后面的所有同辈元素

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

       13.遍历前辈元素

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

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

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

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

       14.其他遍历方法

              1.each()规定为每个匹配元素规定运行的函数

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

                            $("li").each(function(){

                                   var str=$(this).text()+"<br>";

                                   $("section").append(str);

                            })

                     })

              2.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");

       15.回顾CSS-DOM操作