jQuery操作DOM对象

DOM 是一种与浏览器,平台, 语言无关的接口, 使用该接口可以轻松的访问页面中的所有标准组件.
一. DOM 的分类:
   此概念先不管了, 知道一个大概分类就ok:
    1. DOM core;
    2. HTML-DOM;
    3. CSS-DOM;
二. jQuery 中的DOM操作:
    其实所谓的"操作", 无非也就是 增, 删, 改, 查 这几个, 以下意义列举:
    1.查找节点
      (1)查找元素节点:
   

      var $li = $("ul li:eq(1)");    //获取ul 中li的第二个节点
    

      (2)查找属性节点:
   

      var $li = $("ul li:eq(1)");    //获取ul 中li的第二个节点
      var li_id = $li.attr("id");    //获取li节点的id属性
    

    2.创建节点
      (1)创建元素节点,使用jQuery的工厂函数$()可以完成此功能:
   

       var $li_1 = $("<li></li>");
       var $li_2 = $("<li></li>");
    

      注: 新创建的元素不会被加到DOM中, 需要手工插入到DOM中才能显示
     
      (2)创建文本节点, 跟创建元素节点差不多, 就是在标签中加入了文本内容:
    

        var $li_1 = $("<li>Joyce</li>");
        var $li_2 = $("<li>Crystal</li>");
     

      (3)创建属性节点, 跟创建文本节点类似, 就是在文本节点中加入了属性内容:
     

         var $li_1 = $("<li id="Joyce">Joyce</li>");
         var $li_2 = $("<li id="Crystal">Crystal</li>");
      

    3.插入节点
        可以使用的方法(每一对方法是一个相反的过程):
      append(): 向每个匹配的元素内部追加内容, 例如,$(A).append(B),將B加入到A中;
      appendTo():将所有匹配的内容加到指定的元素中,例如, $(A).appendTo(B), 將A加入到B中;

      prepend():向每个匹配的元素内部前置内容, 例如,$(A).prepend(B), 將B放到A前面;
      prependTo():將所有匹配的內容前置倒指定元素中,例如 $(A).prependTo(B), 将A放到B前面;

      after():在每个匹配的元素之后插入内容,例如 $(A).after(B), 将B插入到A后面;
      insertAfter():将所匹配的元素内容插入到指定元素的后面, 例如 $(A).insertAfter(B), 將A插入到B后面;

      before(): 向每个匹配的元素之前加入内容, 例如,$(A).before(B), 将B加入到A前面;
      insertBefore(): 将所匹配的元素加入到指定元素的前面, 例如, $(A).insertBefore(B), 将A插入到B的前面;

   其实很好记, 一共4对方法, append 和 prepend 是在元素内部插入, 一后一前; 而 after 和 before 是在元素外部插入, 也是以后以前, 注意内部和外部的区别;

    4.删除节点
      jQuery提供了2种删除节点的方法: remove() 和 empty();
      (1)remove()
        注意: 1. remove()方法会将该节点的所有后代节点全部删除, 这个好理解:就像一颗树一样, 把树根砍了, 这颗树上的所有枝叶都活不了.
             2. remove()方法可以有返回值, 返回的是该删除的节点.
             3. remove()方法可以通过传递参数来选择性的删除节点, 这个要看一下代码就比较清楚了
   

       var $li = $("ul li:eq(1)").remove();     //获取第二个li元素节点之后, 将它删除
       $("ul li").remove("li[title!='apple']");    //将li元素中title属性不等于apple的元素删除
    

      (2)empty()
         严格来讲, empty只是将元素的内容清空了, 并没有将元素删除.

    5.复制节点
        clone(), 此方法可以有一个参数true, 指的是在复制元素的同时, 复制该元素所绑定的事件.
    
    6.替换节点
        replaceWith() 和 replaceAll(), 这也是一对相反的操作;

    7.包裹节点
        wrap()方法用于将某个节点用其他标签包裹起来