DOM操作

DOM操作
  jQuery的DOM操作
    核心操作
      创建节点
        使用函数$(html)创建节点，如：var $element=$("<div id="insertdiv" >insertdiv的文本节点</div>");
      插入节点
        append()
          向每一个匹配元素内部追加节点
          例：$("div").append("<p></p>"); 调试时结果如：<div><a></a><b><b><p></p></div>
        prepend()
          向每一个匹配元素内部最前面添加节点
          例：$("div").preappend("<p></p>"); 调试结果如：<div><p></p><a></a><b></b><div>
        after()
          向每一个匹配元素外部的后面添加节点
          例：$("div").after("<p></p>");调试结果如：<div><a></a><b></b></div><p></p>
        before()
          向每一个匹配元素外部的前面添加节点
          例：$("div").before("<p></p>");调试结果如：<p></p><div><a></a><b></b></div>
        appendto(),prependto(),insertafter(),insertbefore()
          与上面四个方法相对应，表示方式倒过来了，但调试结果没有改变
          例：$("<p></p>").appendto("div"); 调试结果：<div><a></a><b><b><p></p></div>
      替换节点
        replacewith()
          将所有匹配元素都替换成HTML或DOM元素
          例：$("div").replace("<p></p>");
        replaceall()
          与上面的替换节点的方法一样，只是表达方式倒过来
      包裹节点
        wrap()
          将所有匹配元素外部单独包裹
          例：$("p").warp("<div></div>");结果：<div><p></p></div> <div><p></p></div>
        wrapall()
          将所有匹配元素外部全部包裹
          例：$("p").warpall("<div></div>");结果：<div><p></p><p></p></div>
        wrapinner()
          将每一个匹配元素内部全部包裹
          例：$("p").warpinner("<div></div>");结果：<p><div></div></p><p><div></div></p>
      复制节点
        clone()
          复制节点（将复制节点的样式和属性）
        clone(true
          复制节点，并将该节点的事件一起复制
      删除节点
        remove()
          删除节点，并返回该节点的引用
          例：var $li= $("ul li:eq(1)").remove() ,
        empty()
          删除节点及清空内容，即不会返回该节点的引用
    属性操作
      attr()
        对元素的属性进行取值或赋值操作，一个参数是取值，有两个参数是赋值
        例：$("p").attr("title");表示取值，$("p").attr("title","mytitle");表示赋值
        可对元素多个属性进行赋值，如：$("p").attr({"title":"我的标题","name":"zhangsan"})
      removeattr()
        对元素的特定属性进行移除
        如：$("P").removeattr("title")
      html()
        获取元素中的HTML内容，相当于Javascript中的innerHTML属性
      text()
        获取元素中的文本内容,相当于javascript的innerText属性
      val()
        获取元素value值，相当于Javascript的value属性
    样式操作
      css()
        获取或设置样式，一个参数是获取样式，两个参数是设置样式
        如：$("p").css("color");表示获取样式 而$("p").css("color","red");表示设置样式
        可以同时设置多个样式，如：$("div").css({"width":"100px","height":"100px"})
      addclass()
        追加样式
        例：$("p").addclss("anthor") anthor 表示css 中的class选择器
      removeclass
        移除样式
      toggle()
        鼠标单击切换
        toggle(function(){},function(){});表示在鼠标单击在两个函数中重复切换
      toggleclass()
        鼠标单击切换样式
        toggleclass(function1(){},...,functionN());表示样式在function1到functionN 的重复切换
      height(),widht()
        获取元素的在页面的实际高度和宽度
      offset()
        元素相对于是视窗的相对位移
      scrolltop(),scrollleft()
        获取元素的滚动条距顶端和左端的距离
    遍历节点
      children()
        获取匹配元素的直接子元素
      next()
        获取匹配元素的下一个同辈元素
      prev()
        获取匹配袁术的上一个同辈元素
      siblings()
        获取匹配元素的上下同辈元素
      closest()
        寻找最近的匹配元素，如果同辈中没有，则向上查找匹配元素
      find()
        查找元素
      nextall()
        所有匹配元素的下一个同辈元素
      prevall()
        所有匹配元素的上一个同辈元素
      parent()
        直接父元素
      parents()
        所有父元素
  Javascript的DOM操作
    DOM核心操作
      获取文档对象的操作
      如：document.getElementById()
    HTML DOM操作
      操作DOM元素的属性
      如：var href=document.getElementById(element).href
    CSS DOM操作
      对DOM元素的样式操作
      如：document.getElementById(element).style.backgroundColor="red";