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()方法用于将某个节点用其他标签包裹起来