首页 > 代码库 > jQuery学习----------DOM操作

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


DOM操作之创建元素:

 

   DOM:

      var ele = document.createElement("element")

      例子:document.createElement("div")


   jQuery:

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

      例子:$("<div></div>")


DOM操作之输入文本:

 

   DOM:

      var txt = document.createTextNode("String")

      例子:document.createTextNode("test")


   jQuery:

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

      例子:var $div = $("<div>test</div>")


DOM操作之设置属性:

   

   DOM:

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


   jQuery:

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

      例子:var $div = $("<div align=‘center‘></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 = $("<div align=‘center‘>test</div>")
$("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("<b>test1</b>") 将在每个div元素后面插入test1文本


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

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


           例子:$("<b>test<b>").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("<h1>test<h1>");

      replaceAll()方法:

           例子:$("<h1>test<h1>").replaceAll("p");


DOM操作之包裹内容:


   jQuery:

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

           例子:$("div").wrap("<li></li>") 用li元素包含每一个div元素

      wrapInner()方法:

           例子:$("div").wrapInner("<li></li>") 给div添加内包含的元素li

      wrapAll()方法:

           例子:$("h1").wrapAll("<li></li>")

      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].cssRules[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对象。