第3章 jQuery中的DOM操作

DOM操作分为3个：DOM care(核心)、HTM_DOM和CSS_DOM，着重讲了jQuery中的DOM操作.
jQuey中的DOM操作:
1.查找节点:一般通过jQuery选择器来查找。例：

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

 查找节点属性:attr(),其方法的参数可以是一个或两个

 var txt=$("p").attr("title"); 　　//获取<p>元素的节点属性title

2.创建节点 例:创建一个<li>元素并添加到<ul>元素中

 $("ul").append($("<li>xxxx</li>")); 　　 //append()把元素添加到内部

3.插入节点的方法
 append():　　　　把一个元素添加到本元素的内部.(把a添加到A中),属于元素内部添加
 appendTo():　　把A元素追加到B元素的集合中,属于外部添加,并且A元素里的所有内容会自动删除
 prepend():　　　　把一个元素添加到本元素的前面.
 prependTo():　　把A元素前置到B元素的集合中.
 after():　　　　插入元素外部的后面
 insertAfter():　　将元素插入到指定元素的后面.
 before():　　　　插入元素外部之前
 insertBefore():　　将元素插入到指定元素的前面.

//例:
var $li1=$("<li title='乒乓球'>乒乓球</li>");
var $li2=$("<li title='羽毛球'>羽毛球</li>");
var $li3=$("<li title='其它'>其它</li>");
var $parent=$("ul");
var $twoli=$("ul li:eq(1)");    //获取<ul>中的第二个<li>节点
$parent.append($li1);
//append()方法将创建的第一个<li>元素添加到父元素的最后面
$parent.prepend($li2);
//prepend()方法将创建的第二个<li>元素添加到父元素的最前面
$li3.insertAfter($twoli);//insertAfter将创建的第三个<li>元素插入到获取<li>之后

4.删除节点:remove()和empty()
 remove():用remove删除后,该节点所包含的所有后代节点将同时被删除
 例: var $li=$("ul li:eq(1)").remove(); //获取第二个<li>元素节点之后,将它从网页中删除
 注:删除只是从网页中删除,在jQuery对象中还存在.
 empty():用于清空节点.

5.复制接点:clone().

$(function(){
    $("ul li").click(function(){      //复制当前点击的节点,并追加到<ul>元素
    $(this).clone().appendTo("ul");    //clone()里面传入true,表示复制元素的同时也复制所绑定的事件
            });
        });

6.替换节点:replaceWith()和replaceAll()

//例: 将网页中"<p>sssss</p>"替换成
$("p").replaceWith("<strong>xxxxx</strong>");   //replaceAll()的操作则和replaceWith()的相反

7.包裹节点: wrap(),wrapAll()和wrapInner()三个方法
 wrap()和wrapAll()都属于元素外部包裹

8.设置和获取MTML,文本和值
 html():获取或设置元素中的html内容
 text():获取元素中的文本内容
 var():获取元素的值

9.遍历节点的常用方法
 children()方法: 获取子元素的集合
 next(): 获取元素的下一个同辈元素
 prev(): 获取前一个同辈元素
 siblings(): 取得元素后面所有的同辈元素
 closest(): 取得相邻的一个元素

10. CSS DOM操作
 css(): 设置元素的属性样式
 opacity(): 对透明度的设置
 height(): 获取元素的高度
 width(): 取得元素的高度值
 offset(): 获取元素在浏览器边框的相对距离
 position(): 获取相对旁边元素的距离
 scrollTop()和scrollLeft(): 获取元素的滚动条距顶端和左侧的距离