jQuery学习----------DOM操作-创新互联

//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

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对象。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：jQuery学习----------DOM操作-创新互联
网页路径：http://ybzwz.com/article/deoicg.html