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($("h3"))

                     $("h3").appendto($("div"))

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

          prependto() 

               示例:$("div").prepend($("h3"))

                     $("h3").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()方法:

               例子:$("h2").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对象。


    本文标题:jQuery学习----------DOM操作
    转载来于:http://pwwzsj.com/article/jgcsdp.html