jQuery操作DOM

使用jQuery操作DOM：
样式操作：
1.设置样式值：
$(selector).css(name,value)    //设置单个属性
$(selector).css(name:value,name:value,....)    //设置多个属性

获取样式值：
$(selector).css(name)    获取name属性的值

2.追加样式和移除样式：
$(selector).addClass(class)
$(selector).addClass(class1 class2...classN)    //多个样式以空格隔开

移除样式：
$(selector).removeClass(class)
$(selector).removeClass(class1,class2...)    

3.切换样式：
$(selector).toggleClass(class)    //在增加class这个样式和删除这个样式之间切换

4.判断是否含指定的样式：
$(selector).hasClass(class);//返回值为布尔值

内容操作：
1.html代码操作：
html([content])
content:可选参数，规定被选元素的新内容
无参数时，表示获取该元素的内容

2.标签内容操作：
text([content]);    //仅为文本内容，不含html标签
无参表示获取该元素的文本内容

html()    和text()的区别：
html可以获取和设置带html标签的内容，而text仅可以设置文本内容

3.属性值操作：
val([value])
无参返回被选元素的属性值

节点操作：
1.查找节点，即利用工厂函数获取节点对象
2.创建节点元素(仅创建，但并未插入到文档中)
$(html)
例如：
var $newNode=$("<li></li>");    //空li
var $newNode1=$("<li>你号码</li>");    //含文本li
3.插入节点：
方法：
内部插入：
$(A).append(B)    把B追加到A中
$(A).appendTo(B)    append的颠倒模式，把A追加到B中
$(A).prepend(B)        把B插入并前置在A中
A.prependTo(B)        把A插入并前置在B中
外部插入：
$(A).after(B)    将A插入到B后面
$(A).insertAfter(B)    将B插入到A后面
$(A).before(B)        将B插入A前面
$(A).insertBefore(B)    将A插入到B前

4.删除节点：
$(selector).remove([expr])
expr：可选参数，表示筛选元素的jQuery表达式

detach（）也能删除节点：
与remove的区别是：
相同处：都能将匹配的元素从DOM中删除，而且删除后该元素在jQuery对象中仍然存在
不同：detach（）可以再删除元素后，保留元素相关的绑定事件，附加数据。。。，而remove则删除的比较彻底

empty（）也能删除节点
但他不是删除节点，而是清空节点，清空元素中所有后代元素，但本身的标签还在

5.替换节点：
replaceWith（） 将选中的元素替换成指定的html内容或DOM元素
replaceAll（）    replaceWith的颠倒

6.复制节点：
clone([includeEvent])
includeEvent为布尔类型，true代表赋值所选元素的所有事件处理，false反之

属性操作：
1.获取和设置元素属性
$(selector).attr([name])    //获取元素属性值
$(selector).attr([name:value1],[name2:value2]....)    //设置多个属性值

2.删除元素属性：
$(seletor).removeAttr(name)

节点遍历：
遍历子元素：
$(selector).children()
遍历同辈元素：
$(selector).next()    匹配元素后面的元素
$(selector).prev()    匹配元素前面的元素
$(selector).siblings()    前面后面所有的同辈元素
遍历前辈元素：
parent()    //只获取父辈
parents()    //获取当前元素集合中每个元素的祖先元素，从父辈到祖先都会被获取

其他遍历方法：
1.each(function(index,element))
其中index表示选择器的index位置，element表示当前的元素，当function返回值为false时，会即早停止循环
2.end()
在链式操作中，可用end方法结束end方法前面对某个元素的获取，
例如：
$("li").next().end().click();这样next（）就失效了，最终选择的时li元素