jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装，使用起来也更简便

jQuery中的DOM操作可分为： 

 样式操作  

内容及Value属性值操作  

节点操作  

节点属性操作  

节点遍历  

CSS-DOM操作 

1.样式操作

直接样式操作

使用css()为指定的元素设置样式值

设置单个属性 

css(name,value)

 同时设置多个属性

css({name:value, name:value,name:value…}) 

 追加样式

addClass(class)或addClass(class1 class2 … classN) 

移除样式

removeClass(“style2 ”)或removeClass("style1 style2 ") 

切换样式

toggleClass()模拟了addClass()与removeClass()实现样式切换的过程

 含义：如果存在（不存在）就删除（添加）一个类。

2.内容及Value属性值操作

html代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

获取元素中的html代码 

$(选择器).html();

设置元素中的html代码

$(选择器).html("标签及内容"); 

文本操作

text()可以获取或设置元素的文本内容

获取元素中文本内容

$(选择器).text();

 设置元素中文本内容

$(选择器).text(“内容”);

 html()和text()的区别

 Value值操作

val()可以获取或设置元素的value属性值

获取元素中value属性值

$(选择器).val();

设置元素中value属性值

$(选择器).val("值");

3.节点操作

jQuery中节点操作主要分为

查找节点

创建节点  

插入节点 

替换节点

 复制节点  

删除节点

创建节点元素

工厂函数$()用于获取或创建节点

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点  

$(html)：使用HTML字符串创建jQuery节点  

示例：创建含文本与属性的

元素节点 

 var $newNode2=$(“<li title='标题为千与千寻'>千与千寻</li>”); 

 插入子节点

 插入同辈节点

 替换节点

replaceWith()和replaceAll()用于替换某个节点

两者的关系类似于append()和appendTo()

复制节点

clone()用于复制某个节点 

 参数true表示复制事件处理

可以使用clone()实现输出DOM元素本身的HTML

删除节点

jQuery提供了三种删除节点的方法

 remove()：删除整个节点

 detach()：删除整个节点，保留元素的绑定事件、附加的数据  

empty()：清空节点内容

4.节点属性操作

获取与设置节点属性

attr()用来获取与设置元素属性

获取alt属性值

$(“选择器”).attr("属性名");

 设置属性的值

$(“选择器").attr({“属性名”:"值",”属性名”:"值"});

removeAttr()用来删除元素的属性

$(“选择器").removeAttr("属性名");

5.节点遍历

遍历子元素

children()方法可以用来获取元素的所有子元素 但不包含子元素的子元素

eq()根据索引获取元素

遍历同辈元素

 遍历前辈元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

6.CSS-DOM操作 

 示例：

$("#d1").css("background-color","#00F");
$("#d1").height("300");
$("#d1").width("400");
$("#d1").offset({“top”:"50",”left”:"100"});