使用jquery操作DOM对象

目录

1、DOM操作分类

2、jQuery中的DOM操作

①使用jQuery操作CSS样式——css()、 addClass()、 removeClass()、 toggleClass()

②使用jQuery操作文本与属性值内容——html()、 text()、 val()

③使用jQuery操作DOM节点——查找、创建、插入、删除、替换、复制和遍历

④节点属性操作：attr() 、removeAttr()

⑤使用jQuery遍历DOM节点——遍历子元素、遍历同辈元素和遍历前辈元素

3、使用jQuery操作CSS-DOM

---

1、DOM操作分类

DOM操作分为三类：

• DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
• HTML-DOM：用于处理HTML文档，如document.forms
• CSS-DOM：用于操作CSS，如element.style.color="green"

JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

2、jQuery中的DOM操作

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

jQuery中的DOM操作可分为：

• 样式操作
• 内容及Value属性值操作
• 节点操作
• 节点属性操作
• 节点遍历
• CSS-DOM操作

①使用jQuery操作CSS样式——css()、 addClass()、 removeClass()、 toggleClass()

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

②追加和移除样式

addClass(class)或addClass(class1 class2 … classN);//追加样式

removeClass(“style2 ”)或removeClass("style1 style2 ");//移除样式

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

toggleClass(class);

②使用jQuery操作文本与属性值内容——html()、 text()、 val()

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

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

html()和text()的区别

语法	参数	功能
html()	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content参数为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text()	无参数	用于获取所有匹配元素的文本内容
text (content)	content参数为元素的文本内容	用于设置所有匹配元素的文本内容

③Value值操作：val()可以获取或设置元素的value属性值

③使用jQuery操作DOM节点——查找、创建、插入、删除、替换、复制和遍历

jQuery中节点操作主要分为：

• 查找节点——利用选择器和工厂函数
• 创建节点
• 插入节点
• 删除节点
• 替换节点
• 复制节点

①创建节点元素

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

• $(selector)：通过选择器获取节点
• $(element)：把DOM节点转化成jQuery节点
• $(html)：使用HTML字符串创建jQuery节点

②插入子节点：元素内部插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul");

③插入同辈节点：元素外部插入同辈节点

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul");

④删除节点

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

• remove()：删除整个节点
• detach()：删除整个节点，保留元素的绑定事件、附加的数据
• empty()：清空节点内容

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

⑥复制节点：clone()用于复制某个节点

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

$("
").append($(DOM元素).clone()).html();

④节点属性操作：attr() 、removeAttr()

获取与设置节点属性

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

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

 

⑤使用jQuery遍历DOM节点——遍历子元素、遍历同辈元素和遍历前辈元素

①遍历子元素：children()方法可以用来获取元素的所有子元素

②遍历同辈元素：jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

语法	功能
next([expr])	用于获取紧邻匹配元素之后的元素， 如：$("li:eq(1)").next().css("background-color","#F06");
prev([expr])	用于获取紧邻匹配元素之前的元素， 如：$("li:eq(1)").prev().css("background-color","#F06");
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素， 如：$("li:eq(1)").siblings().css("background-color","#F06");

③遍历前辈元素：

jQuery中可以遍历前辈元素，方法如下：

• parent()：获取元素的父级元素
• parents()：元素元素的祖先元素

3、使用jQuery操作CSS-DOM

除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。此方法仅对可见元素有效