jQuery学习----------DOM操作

DOM操作之创建元素：

 

   DOM：

      var ele = document.createElement("element")

      例子：document.createElement("div")

   jQuery:

      var $ele = $("element")    //返回的是一个jQuery对象

      例子：$("

")

DOM操作之输入文本：

 

   DOM：

      var txt = document.createTextNode("String")

      例子：document.createTextNode("test")

   jQuery：

      可以直接添加文字到标签中

      例子：var $div = $("

test

")

DOM操作之设置属性：

   

   DOM：

      ele.setAttribute("AttName","AttValue")

   jQuery：

      可以直接添加属性到标签中

      例子:var $div = $("

")

 示例：

//DOM
window.onload = function(){
	  	var txt = document.createTextNode("test");
	  	var div = document.createElement("div");
	  	div.appendChild(txt);
	  	div.setAttribute("align","center");
	  	document.body.appendChild(div);
	  }
	  
//jQuery
var $div = $("test

") $("body").append($div)

DOM操作之插入内容：

   内部插入：

       DOM：

          appendChild()   //在指定节点的内部末尾插入

          insertBefore()  //在指定节点的内部最前插入

  

       jQuery：

          append()     //把参数指定的内容插入到指定节点中，返回jQuery对象

          appendto()   //将匹配的元素出插入到目标元素之后

               示例：$("div").append($("h2"))

                     $("h2").appendto($("div"))

          prepend()    //将参数指定的内容插入到指定节点中，返回jQuery对象

          prependto() 

               示例：$("div").prepend($("h2"))

                     $("h2").prependto($("div"))

   外部插入：

       jQuery：

         after()        //在每个匹配的元素之后插入内容

         before()       //在每个匹配的元素之前插入内容

        

           例子：$("div").after("test1") 将在每个div元素后面插入test1文本

         insertAfter()  //把所有匹配的元素插入到另一个指定的元素集合的后面

         insertBefore() //把所有匹配的元素插入到另一个指定的元素集合的前面

           例子：$("test").insertAfter("p")  将test文本插入到p元素后

DOM操作之删除元素：

   DOM：

      removeChild()

   

   jQuery：

     remove()  //删除所有匹配的元素 remove([selector),selector用来过滤元素

               例子：$("p").remove(); //删除所有p元素

                     $("div").remove(".red");  //删除所有含有类red的div元素

     empty()   //删除元素包含的内容，不删除元素本身，该方法没有参数

               例子：$("p").empty()   //删除p元素包含的内容

     detach()  //将匹配的元素从DOM中分离出来

               例子： $("p").detach(".red");

     注意：remove和detach的区别：

          detach()是将元素分离出去，会保留绑定在改元素上的事件、附加的数等；

           当重新把该元素加入DOM中，所绑定的事件仍然有效

           remove()是删除元素，不会保留该元素上的事件等信息

DOM操作之克隆内容：

   DOM：

      cloneNode()方法：

            nodeObject.cloneNode(false|true)

            //false表示不复制节点的属性和子节点，true表示要复制

   jQuery：

      clone()方法：

           clone([withDataAndEvent])

           clone([withDataAndEvent],[deepWithDataAndEvent])

           例子：$("p").clone(true)  //克隆p元素，并保留事件

DOM操作之替换内容：

   DOM：

      replaceChild()方法：

           nodeObject.replaceChild(new_node,old_node)

   jQuery：

      replaceWith()方法：

           例子：$("p").replaceWith("

test

");

      replaceAll()方法：

           例子：$("

test

").replaceAll("p");

DOM操作之包裹内容：

   jQuery：

      wrap()方法：wrap(element|function)

           例子：$("div").wrap("

") 用li元素包含每一个div元素

      wrapInner()方法：

           例子：$("div").wrapInner("

") 给div添加内包含的元素li

      wrapAll()方法：

           例子：$("h1").wrapAll("

")

      unwrap()方法： 将匹配元素的父级元素删除

           例子：$("p").unwrap()

DOM操作之属性操作

设置属性：

    DOM：

       setAttribute()方法：node.setAttribute(name,value)

            例子：div.setAttribute("align","center")

  

   jQuery：

       prop()方法：

            prop(name,value)

               例子：$("div.green").prop({"align","value"})

            prop(map)：参数map指：{属性，值}

               例子：$("div.green").prop({"id":"divid","align":"value"})

            prop(name,function(index,oldvalue))

       attr()方法：

            attr(name,value)

            attr(map)

            attr(name,function(index,oldvalue))

          

       上面两种方法的差别：prop()添加checked这一类属性较好。

访问属性：

    DOM：

       getAttribute()方法：node.getAttribute(name)

     

    jQuery：

       prop()方法：prop(name)

       attr()方法：attr(name)

       区别：attr()方法只用来返回默认的属性值，或者初始值

            如：$("input").attr("checked") //当复选框的状态改变时，返回的值不会变

       注：

          上述方法只会获取第一个匹配的元素

          可以通过each()方法访问所有匹配元素的属性：

             如：$("div").each(function(){

        console.log($(this).prop("class"))

         })

删除属性：

    DOM：

       removeAttribute()方法：node.removeAttribute

    jQuery：

       removeProp()方法：

           例子：$("div.green").removeProp("id")

       removeAttr()方法：

   例子：$("div.green").removeAttr("id")

DOM操作之类操作：

添加样式：

    jQuery：

       addClass()方法：增加类样式

       removeClass()方法：删除类样式

       toggleClass()方法：切换类样式

          语法：toggleClass(className)

                toggleClass(className,switch)

                         (switch：用来判断样式添加还是移除的boolean值）

                toggleClass(function(index,class),[switch])

     

判断样式

    DOM：

        hasAttribute()方法：判断是否拥有某个属性，可以用来判断是否拥有某个类

    jQuery：

        hasClass()方法

DOM操作之读写文本值：

读写HTML：

    DOM：

       innerHTML()方法

    jQuery：

       html()方法

读写文本：

    DOM：

       innerText()方法

    jQuery：

       text()方法

读写值：（这里的值是指表单元素中的value属性的值）

    DOM：

       通过属性value获取

    jQuery：

       val()方法

DOM操作之样式表操作：

读写CSS样式：

   DOM：

      借助style属性可以访问行内样式的值，

          但是他没有办法访问外部css样式表（文档内部样式表和文档外部样式表）！！

      借助document对象的styleSheets对象访问外部样式表！！

      

      获取样式表：document.styleSheets[0]//获取第一个样式表

      获取样式表中的样式：（考虑兼容性） 

           非IE浏览器：document.styleSheets[0].c***ules[0]

                            //获取样式表中的第一个样式的

           IE浏览器：  document.styleSheets[0].rules[0]

      写入样式：（考虑兼容性）

       非IE浏览器：document.styleSheets[0].insertRule("rule",index)

                       insertRule("rule",index)：

                           rule：是一个完整的css样式字符串

                           index：必须设置，当值为0时，将样式插入到样式表末尾

       IE浏览器：document.styleSheets[0].addRule("selector","style",index)

                           index：可以不设置，默认为-1，表示样式表的末尾

      

      document.styleSheets[0].length//获取样式表中的样式数目

   jQuery:

      css()方法：读取或设置css样式

          例子： $("div").css("font-size","40px")

                 $("div").css({"font-size":"20px","color":"red"})

         $("div").css("font-size")

         

绝对定位：

    jQuery：

       offset()方法：获取匹配元素在当前视口的相对偏移

          语法：offset()：返回一个对象包含top和left两个属性

                offset(coordinates)：coordinates是一个对象，包含top和left属性

                offset(function(index,coords))：

                                   function函数返回一个包含top和left属性的对象

                                   index：元素的索引位置

                                   coords：元素的当前坐标

       例子：       

           var cood = new Object()
	   cood.top =120
	   cood.left = 120
	   $("div").offset(cood)
	   console.log($("div").offset())

相对定位：

    jQuery：

       position()方法：获取匹配元素的相对偏移位置。

设置大小：

    jQuery：

       width()和height()方法：读写元素的大小

            语法：width()/height()

                  width(value)/height(value)

                  width(function(index,width))/height(function(index,width))

    例子：

         $("div.blue").width("150px").height("150px")

 var w = $("div.green").width();

 $("div.green").width(function(index,w){

  return w/2;

  })

       innerHeight()、innerWidth()：返回元素的总宽高（包括宽高、内边距和边框高度）

       outerHeight()、outerWidth()：返回元素的内容宽高（包括宽高和内边距）

DOM操作之访问文档树：

   DOM：

      使用ChildNode、parentNode、nextSibling、previousSibling、firstChild、lastChild属性

   jQuery：

      children()：获取当前元素的所有子元素；

      next()：获取当前元素的下一个相邻元素；

      prev()：获取当前元素的上一个相邻元素；

      parent()：获取当前元素的父元素

      注意：这些方法返回的是jQuery对象。