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