jQuery对JavaScript中的DOM操作进行了封装
样式操作
内容及Value值操作
DOM操作分类： 节点操作
节点属性操作
节点遍历
CSS-DOMC操作
“元素”和“节点”含义大同小异，并不严格区分
1.样式操作
设置和获取样式值 css() $().css(设置属性);
追加和移除样式 addClass() $().addClass();
removeClass()$().removeClass();
切换样式 toggleClass() $().toggleClass();
判断是否含指定的样式 hasClass() $().hasClass();
总结：
- 如果操作到的样式非常少，可以考虑css方法
- 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
- 如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。
2.内容操作
HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
$().html(); 获取元素中的html代码
$().html(设置元素中的html代码);
标签内容操作 text()
$().text(); 获取元素中的文本内容
$().text(设置元素中的文本内容);
Html()和text()方法区别
|
语法样式 |
参数说明 |
功能描述 |
|
Html() |
无参数 |
用于获取第一个匹配元素的HTML内容或文本内容 |
|
Html(content) |
content为元素的HTML内容 |
用于设置所有匹配元素的HTML内容或文本内容 |
|
Text() |
无参数 |
用于获取所有匹配元素的文本内容 |
|
Text(content) |
content为元素的文本内容内容 |
用于设置所有匹配元素的文本内容 |
属性值操作 val()
$().val(); 获取元素的vallue属性值
$().val(设置元素的value属性值);
3.节点操作
查找节点
创建节点
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
总结：
A.document.write()只能以整个文档为单位操作，并且在页面加载完成过后调用会导航整个页面重绘不推荐使用。
B.document.innerHTML在数组拼接下速度相比document.createElement()快1倍左右。
C.document.innerHTML在程序处理嵌套结构时结构不如document.createElement()清析。
D.日常使用推荐document.createElement()在处理数据时结构更清晰，方便后期维护并且现在出现有大量数据需要网页显示，一般都是通过分页显示，同时不显示大量数据，当出现有大量数据又需要同时在网页显示性能优先可以考虑document.innerHTML
插入节点 Append(cotent)
appendTo(content)
- 元素内部插入节点 Prepend(content)
prependTo(content)
After(content)
insertAfter(con)
- 元素外部插入同辈节点 before(content)
insertBefore(con)
1、append()和appendTo()：在现存元素的内部，从后面插入元素
2、prepend()和prependTo()：在现存元素的内部，从前面插入元素
3、after()和insertAfter()：在现存元素的外部，从后面插入元素
4、before()和insertBefore()：在现存元素的外部，从前面插入元素
删除节点
remove()删除整个节点
Empty()清空节点内容
替换节点
replaceWith()、replaceAll()
复制节点
clone()用于复制某个节点
$(selector).clone([includeEvents]) ;
[参数ture或flase, true复制事件处理，flase时反之]
4.属性操作
获取与设置元素属性
attr()用来获取与设置元素属性
删除元素属性
removeAttr()用来删除元素的属性
5.节点遍历
遍历子元素 children() $(selector).children();
遍历同辈元素
next() 获取紧邻匹配元素之后的元素
Prev() 获取紧邻匹配元素之前的元素
Slibings() 获取位于匹配元素前面和后面的所有同辈元素
遍历前辈元素 parent() 获取元素的父级元素
Parents() 获取元素的祖先元素
其他遍历方法
each() 规定为每个匹配元素规定运行的函数
End() 结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
6.CSS-DOM操作
Css()
Height() 设置或返回匹配元素的高度
Width() 设置或返回匹配元素的宽度
Offset() 返回一像素为单位的top和left坐标
offsetParent() 返回最近的已定位祖先元素。定位元素指的是元素的css position值被设置为relative、absolute或fixed的元素
Position() 返回第一个匹配元素相对于父元素的位置
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移