本节内容
- 操作元素的样式名
- 设置
DOM
元素的内容 - 获取和设置元素的值
- 克隆
DOM
元素 - 通过添加、移动或者删除来修改
DOM
树
1.修改元素的样式
修改元素的样式主要由两种方法:
一、通过添加或者删除class
属性来对元素的样式重新设置。
二、直接给DOM
元素添加样式定义
1.1 添加与删除样式名
方法 | 描述 |
---|
addClass(names) | 为集合中的元素添加指定的样式名 |
removeClass(names) | 从jQuery 集合中删除每个元素指定的样式名 |
toggleClass([names][, switch]) | 为没有样式的元素添加指定的样式名,或者删除已经存在的样式 |
hasClass(name) | 确定集合中的元素是否包含指定的样式 |
1.2 获取和设置样式
方法 | 描述 |
---|
css(name,value) css(properties) | 为每个匹配元素命名的CSS 样式属性设置指定的值 |
css(name) | 根据指定的name 查询集合中首个元素的CSS 属性的计算值 |
width() height() | 设置或查询集合中每个匹配元素的高度和宽度 |
2. 设置DOM元素的内容
2.1 查找节点
- 查找元素节点:通过
jQuery
的选择器完成 - 操作属性节点:查找到所需要的元素节点以后,可以通过
jQuery
对象的attr()
方法来获取或者设置它的各种属性值,直接操作value
属性可以使用val()
方法 - 操作文本节点:通过
jQuery
对象的text()
方法
2.2 替换HTML或者文本内容
方法 | 描述 |
---|
html() | 获取匹配集合中第一个元素的HTML 内容 |
html(content) | 为匹配的元素设置传入的HTML 代码块内容 |
text() | 获取匹配元素集合的每个元素的内容,包括其后代节点 |
text(content) | 设置集合中所有元素的内容为传递的参数值 |
2.3 创建节点
- 使用
jQuery
的工厂方法函数$():$(html)
;会根据传入的HTML
标记字符串创建一个DOM
对象,并把这个DOM
对象包装为jQuery
对象返回 - 此时动态创建的行元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中
$('<div>')
等价于$('<div/>')和$('<div></div>')
- 属性和文本同样也可以一起创建
2.4 插入(移动)节点
- 将新创建的节点插入到指定节点中,或者将匹配到的节点移动到指定节点中,作为其子节点
方法 | 描述 |
---|
append() | 向每个匹配或新创建的元素的内部的结尾处添加内容,主加宾 |
appendTo() | 将每个匹配或新创建的元素追加到指定的元素中的内部的结尾处,宾加到主 |
prepend() | 向每个匹配或新创建的元素的内部的开始处插入内容 |
prependTo() | 将每个匹或新新创建的元素插入到指定的元素的开始处 |
- 将新创建的节点插入到指定节点的前面或者后面,或者或者将匹配到的节点移动到指定节点的前后
方法 | 描述 |
---|
after() | 向每个匹配的元素的之后插入内容 |
insertAfter() | 将每个匹配的元素插入到指定的元素之后 |
before() | 向每个匹配的元素的之前插入内容 |
insertBefore() | 将每个匹配的元素插入到指定的元素之前 |
2.5 删除节点
方法 | 描述 |
---|
remove([selector]) | 从页面中删除集合中的所有元素及其内容,包括监听器和存的数据,返回一个被删除的节点的引用 |
detach([selector]) | 从页面中删除集合中的所有元素及其内容,但是保留监听器和存的数据 |
empty() | 清空节点-清空元素中的所有后代节点(不包含属性节点) |
2.6 复制节点
方法 | 描述 |
---|
clone() | 克隆匹配的DOM元素包括子节点,返回值为克隆后的副本,但此时复制的新节点不具备任何行为 |
clone(true) | 复制元素的同时会复制其行为,包括子节点 |
clone(true,false) | 复制元素的同时会复制其行为,但不包括子节点 |
2.7 替换节点
方法 | 描述 |
---|
replaceWith(content) | 将所有匹配的元素都替换为指定的HTML 或DOM 元素,前面的替换成后面的 |
replaceAll(target) | 颠倒了的replaceWith() 方法,后面的替换成前面的 |
2.8 包裹节点
方法 | 描述 |
---|
wrap() | 将指定节点用其他标记包裹起来,有多个单独包装 |
wrapAll() | 将所有匹配的元素用一个元素来包裹 |
wrapInner() | 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来 |
unwrap() | 删除集合内元素的父元素 |