jQuery中的DOM操作

可以把DOM看成是一个页面文件的元素目录树，对DOM的各种操作都是围绕这棵树开展的。
对DOM的操作，其实就是对节点的操作。

查找节点：
查找元素节点：用JQ的选择器即可选定元素节点；     $(“p”)
查找属性节点：在查找到元素节点后，用JQ的attr()方法查找其属性节点;     $(“p”).attr(“title”)

创建节点：
创建元素节点的同时，可以将属性节点和文本节点一起创建，即添加一个完整的HTML标签。
分两步：
1，新建元素
2，插入到DOM中
新建用$( )创建
如在ul下添加一个li元素
var $li=$(“<li>内容</li>”);
插入DOM中用append()方法
$(“ul”).append($li);

注：新建元素时要遵守XHTML规范，区分大小写，须闭合标签。

插入节点：
JQ提供了不止append()一种插入节点的方法，归纳如下：
A.append(B)     向匹配的A元素内部追加元素B
A.appendTo(B)     将匹配的A元素追加到元素B中
A.prepend(B)     向匹配的A元素内部前置添加元素B
A.prependTo(B)     将匹配的A元素前置添加到元素B中
A.after(B)     在匹配的A元素后面添加元素B
A.insertAfter(B)     将匹配的A元素添加到元素B后面
A.before(B)     在匹配的A元素之前添加元素B
A.insertBefore(B)     将匹配的A元素添加到元素B前面

删除节点：
remove()
var $a=A.remove()     删除匹配的元素A，返回值是被删除的节点的匹配引用，即A，所以删掉后如果想恢复，可以用$a.appendTo(B)恢复
empty()
准确的说，empty()不是删除节点，而是清空所匹配的节点的所有内容和后代节点

复制节点：
clone()
A.clone().appendTo()     //即 匹配的元素.clone([true]).复制到哪去
clone()中的true参数是可选的，不带则表示只复制节点，不复制节点绑定的方法事件，不具备任何行为。如果带着true，则表示在复制了节点的同时也复制了节点中所绑定的事件。

替换节点：
replaceWith()     repalceAll()
二者作用相同，只是表现形式相反。
如将p元素节点替换为strong节点：
$(“P”).replaceWith(“<strong>…..</strong>”)
$(“<strong>…..</strong>”).replaceAll(“P”)
被替换的节点所绑定的事件也会随之消失。

包裹节点：
wrap()     wrapAll()     wraplnner()
把某个节点用其他标记包裹起来
例如把p节点用strong包裹起来：
$(“p”).wrap(“<strong></strong>”);     //即<strong><p>………</p></strong>

注：
wrap()是将匹配的元素分别单独包裹
warpAll()是将匹配的元素一起包裹，如果被包裹的元素中间有其他元素，则其他元素会放到包裹元素之后。
wraplnner()是将匹配元素的字内容用某标记包裹起来。

属性操作：
attr()     //获取，设置元素属性,语法类似与css()
$(“p”).attr(“title”)
$(“p”).attr(“title,titlevalue”)
$(“p”).attr({
属性名：值，
属性名：值，
………………….
})
removeAttr()     //删除元素属性
$(“p”).removeAttr(“title”)

样式操作：即对元素中的class属性进行操作，
addClass()     //是追加，不是替换，class=”a b c ”
removeClass()

切换样式：
toggleClass()     //控制样式上的重复切换，如果类名存在则删除它，如果类名不存在则添加它，即该样式有何无之间的切换
类似与toggle()，toggle()是控制行为上的重复切换。

判断是否有某个样式：
hasClass()      //有则返回true，否则返回false
用法同于is()

区分：html()     text()

html()     获取或替换匹配元素中的html源码
text()      获取或替换匹配元素中的文本内容