第三部分 jquery的DOM操作

一.DOM-Core操作

  1..属性操作

          $(“p”).attr("title");                        //如果要获取元素的属性

          $(“p”).attr(“title”,"your title");     //设置元素的属性

          $(“p”).attr({“title”:"your title","name":"test"});    // 一次性为同一个元素设置多个属性

          $(“p”).removeAttr("title")    //.删除属性

  2..样式操作

        因为class也是<p>元素的属性，因此获取class和设置class都可以用attr()方法来完成   //获取样式和设置样式

        jQuery提供了专门的addClass()来追加样式          //追加样式

        $("p").removeClass("high");                      //移除样式

        $("p").toggle("")       //切换样式,如果样式存在则删除它，如果不存在则添加它

        $("p").hasClass()  //.判断是否含有某个样式

二.HTML-DOM操作

1.设置和获取HTML（）、文本和值

       $("p").html();    //类似于javaScript中的innerHtml属性，可用来读取或者设置某个元素的html内容

       $("p").text();     //类似于JavaScript中的innerText属性，可用来读取或者设置某个元素的text内容

       $("p").val();      //类似于JavaScript中的value属性，可用来设置和获取元素的值  

2..遍历节点

       $("p").children();  //用于获取匹配元素的子元素集合

       $("p").next();         //用于取得匹配元素后面紧邻的同辈元素

       $("p").prev();        //用于取得匹配元素前面紧邻的同辈元素  

三.CSS-DOM操作

  1. 样式css()

      $("p").css("color");                                //获取<p>元素的样式颜色

      $("p").css("color","red");                      //设置<p>元素的样式颜色为红色

      $("p").css({"color" : "red","backgroundColor" : "#888888"});    //同是设置字体大小和背景

  2. 高度height()

      $("p").height();                          //获取<p>元素的高度值

      $("p").height(100);                   //设置<p>元素的高度值为100px

      $("p").height("10em");            //设置<p>元素的高度值为10em

  3.宽度width()

      $("p").width();                          //获取<p>元素的宽度值

      $("p").width(100);                   //设置<p>元素的宽度值为100px

   4.offset方法

     作用是获取元素当前视窗的相对偏移，其中返回的对象包含两个属性，即top与left,它只对可见元素有效

     var  offset  =  $("p").offset();    //获取<p>元素的offset()

     var  left  =  offset.left;                //获取左偏移

     var  top  =  offset.top;               //获取右偏移

   5.position()方法

     作用是获取元素的相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，

     返回的对象包含两个属性，即top和left。

      var  position  =  $("p").position();  //获取<p>元素的position()

      var  left  =  position.left;                   //获取左偏移

      var  top  =  position.top;                  //获取右偏移

   6.scrollTop()方法和scrollLeft()  

      var  $p  =  $("p");

      var  scrollTop  =  $p.scrollTop();   //获取元素的滚动条距顶端的距离

      var  scrollLeft  =  $p.scrollLeft();   //获取元素的滚动条距左端的距离