四、使用jQuery操作页面

本节内容

• 操作元素的样式名
• 设置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()	将每个匹配的元素插入到指定的元素之前

• 取消默认行为，return false;

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()	删除集合内元素的父元素