七、JS07使用 jQuery 操作 DOM

七、使用 jQuery 操作 DOM

7.1 DOM 操作

7.1.1 DOM 操作分类

• 使用 JavaScript 操作 DOM 时分为三类——DOM Core(核心)、HTML-DOM 和 CSS-DOM
• jQuery 操作也同样分为这三类
• 下面主要回顾以下 JavaScript 中的 DOM 操作

JavaScript 中的 getElementById()、getElementByTagName() 等方法都是 DOM Core 的组成部分

HTML-DOM 主要用于标记 HTML 元素，例如 document.getElementById(“intro”).innerHTML

CSS-DOM 主要作用是获取和设置 style 对象的各种属性

###7.1.2 jQuery 中的 DOM 操作

• jQuery 中的 DOM 操作主要分为 样式操作、文本和 value 属性值操作、节点操作
• 节点操作有包含属性操作、节点遍历和 CSS-DOM 操作

jQuery 中的 DOM 操作

7.2 样式操作

jQuery 不仅对 CSS 样式有着良好的支持，而且对浏览器也有着良好的兼容性

jQuery 中，对元素样式的操作主要有

• 直接设置样式值
• 获取样式值
• 追加样式
• 移除样式
• 切换样式

7.2.1 设置和获取样式值

1.设置样式值

• jQuery 中，使用 css() 方法为指定的元素设置样式值
• 设置样式语法

$(selector).css(name,value);	//设置单个属性
$(selector).css({name1:value1,name2:value2,name3:value3,....})		//同时设置多个属性

• css() 方法参数说明

参数	描述
name	必须。规定 CSS 属性的名称。该参数可以是任何 CSS 属性 例如，color，background 等
value	必须。规定 CSS 属性的值。该参数可以是任何 CSS 属性值 例如，#000000、24px 等

2、获取样式值

• 如果使用 css() 方法，如果参数只填写属性名，则是获取元素样式的属性值
• 获取样式属性值 语法

$(selector).css(name) //获取属性

7.2.2 追加样式和移除样式

1、追加样式

• 使用 addClass() 方法可以为元素追加类样式（及 CSS 当中定义好的样式）
• 追加样式语法

$(selector).addClass(class);	//添加单个类样式
$(selector).addClass(class1 class2 class3 ....); 	//添加多个类样式

• class 为类样式名称
• 可以同时增加多个类样式，中间用空格隔开

2、移除样式

• jQuery 中，移除样式使用 removeClass() 方法
• 移除样式语法

$(selector).removeClass(class);	//移除单个类样式
$(selector).removeClass(class1 class2 class3);  //移除多个类样式
$(selector).removeClass();		//移除所有类样式

• 参数 class 为类样式名称，可以同时添加多个类样式
• 提供没有参数时，则代表移除该元素的所有类样式

7.2.3 切换样式

• 使用 toggleClass() 方法可以切换不同元素的类样式
• toggleClass() 方法是在元素的类样式和切换前的样式间不断切换
• 切换样式语法

$(selector).toggleClass(class);

• 将元素的样式切换为 名为 class 的 CSS 类样式
• 当元素中还有名为 class 的 CSS 类样式时，使用 toggleClass() 方法则会删除该样式

7.2.4 判断是否含指定的样式

• 判断样式是否含有使用 hasClass() 方法
• 判断样式是否含有 语法

$(selector).hasClass(class);

• class 为类样式名，该名称必选，指定元素中查找的类名
• 返回值为布尔型，如果包含查找的类，则返回 true，否则返回 false

7.3 内容操作

jQuery 还提供了对元素内容操作的方法

即对 HTML 代码中，标签、标签内容和属性值内容三者的操作

7.3.1 HTML 代码操作

• 使用 html() 方法可以对 HTML 代码进行操作，返回或设置被选元素的内容
• html() 语法格式如下

html([content]);

• content 参数为可选项，当有参数时，用于规定备选元素中的内容
• 无参时表示获取被选元素的文本内容

7.3.2 标签内容操作

• jQuery 中，可以使用 text() 方法获取或设置元素的文本内容，不包含 HTML 标签
• text() 语法格式如下

text([content]);

• content 参数为可选项，当有参时，设置元素新的文本内容，特殊字符会被编码
• 无参时，表示获取被选元素的文本内容

7.3.3 html() 方法和 text() 方法的区别

• html() 方法仅支持 HTML文档，不能用于 XML 文档
• text() 方法既支持 HTML 文档，也支持 XML 文档
• html() 方法设置元素内容时，可以写入标签，写入的标签会生效
• text() 方法设置元素内容时，写入的标签并不会生效
• html()方法 和 text() 方法的区别

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

7.3.4 属性值操作

• jQuery 中，获取或设置元素的 value 属性值，使用方法 val()
• val() 语法

val([value]);

• 当 val() 方法 有参数 value 时，表示为被选元素设置新的 value 值
• 当没有参数时，则表示获取元素的 value 值

7.4 节点操作

jQuery 中，节点操作主要分为查找、创建、插入、删除、替换和复制六种操作

其中，查找，创建，插入，删除和替换节点是日常开发中使用最多的

7.4.1 查找节点

• 要想对节点进行操作，即增、删、改、首先必须找到要操作的元素
• 获取元素，可以使用 jQuery 选择器
• 查找节点语法

$("选择器");

• 前文已经大致讲解过了，这里不再过多赘述了

7.4.2 创建节点元素

• 创建节点元素一般使用 $() 工厂函数
• $() 工厂函数有多种用法，可以用来查找节点，也可以创建节点
• $() 语法格式如下

$(selector);
$(element);
$(html);

• $() 参数说明

参数	描述
selector	选择器。使用 jQuery 选择器匹配元素
element	DOM 元素。以 DOM 元素来创建 jQuery 对象
html	HTML 代码。使用 HTML 字符串创建 jQuery 对象

• 以下主要讲解 $(html) 创建元素
• 使用 $(html) 创建两个新的 <li> 元素节点 示例

var $newNode=$("<li></li>");		//空<li>
var $newNode=$("<li>你喜欢兰巧儿吗?</li>");	//含文本<li>
var $newNode=$("<li title='last'>你喜欢兰巧儿吗?</li>");  //含属性<li>

• 但这仅仅只是创建好了一个新的元素，并没有将元素添加到 DOM 文档中
• 要将元素添加到 DOM 文档中，就要使用 插入节点

7.4.3 插入节点

• jQuery 中，想要实现动态的新增节点，必须对创建的节点执行插入或追加操作
• 节点的插入主要分为两大类：内部插入节点和外部插入节点
• 插入节点的主要方法

插入方式	方法	描述
内部插入	append(content)	向所选择的元素内部插入内容 $(A).append(B) 表示将 B追加到 A 的子元素集合末尾中
内部插入	appendTo(content)	把所选择的元素追加到另一个指定的元素集合中 $(A).appendTo(B) 表示把 A 追加到 B 的子元素集合末尾中
内部插入	prepend(content)	向每个选择的元素内部前置内容 $(A).prepend(B) 表示把 B 插入到 A 的子元素集合的开头
内部插入	prependTo(content)	将所有匹配元素前置到指定的元素中 $(A).prependTo(B) 表示将 A元素插入到 B 的子元素集合的开头
外部插入	after(content)	在每个匹配的元素之后插入内容 $(A).after(B) 表示将 B 插入到 A 之后
外部插入	insertAfter(content)	将所有匹配元素插入到指定元素的后面 $(A).insertAfter(B) 表示将 A 插入 B 之后
外部插入	before(content)	向所选择的元素外部前面插入内容 $(A).before(B) 表示将 B 插入到 A 之前
外部插入	insertBefore(content)	将所匹配的元素插入指定元素的后面 $(A).before(B) 表示将 A 插入到 B之前

• 示例 向 ul 内插入节点

//向ul的子元素中的最后一位 插入节点 $newNode1
$("ul").append($newNode1);
$($newNode1).appendTo("ul");
//向 ul的子元素的第一位 插入节点 $newNode2
$("ul").prepend($newNode2);
$($newNode2).prependTo("ul");

7.4.4 删除节点

• jQuery 中，删除节点提供了三种方法：remove()、detach()、empty() 三种三处节点方式
• 三种删除节点方法

方法名	描述
remove()	删除整个节点
detach()	删除节点，但是保留节点的点击时间
empty()	删除节点之间的内容

• 三种删除节点 语法

$(selector).reomve([expr]);
$(selector).detach();
$(selector).empty();

• remove() 方法的参数 expr 为可选项，如果接受参数，表示对所选的节点进行过滤
• 例如

$("p").remove(".italic"); //表示删除所选 p 标签中有 .italic 类样式的节点

7.4.5 替换节点

• jQuery 中替换节点可以使用 replaceWith() 方法和 replaceAll() 方法

方法名	描述
replaceWith()	将所有匹配的元素都替换为指定的 HTML 或者 DOM 元素
replaceAll()	把被选元素替换为新的 HTML 元素

• replaceWith() 方法示例

var $newNode1=$("<li>兰巧儿</li>");
$("ul li:eq(2)").replaceWith($newNode1);

• 将所匹配的元素替换为 $newNode1
• replaceWith() 方法和 replaceAll() 方法就类似于 append() 方法和 appendTo() 方法

7.4.6 复制节点

• jQuery 中，若要对节点进行复制，则可以使用 clone() 方法
• clone() 方法可以负责被选元素的子节点，文本和属性
• clone() 语法格式

$(selector).clone([includeEvents]);

• includeEvents 为可选项，为布尔值 true 和 false，表示是否复制该节点的事件，true表示复制
• 复制元素 示例

$(ul li:eq(2)).clone(true).appendTo("ul");

7.5 属性操作

jQuery 提供了属性节点的操作方法

属性节点的操作方法有两种：获取与设置元素属性 和删除元素属性

设置和获取元素属性：attr()

删除元素属性：removeAttr()

7.5.1 获取与设置元素属性

• jQuery 中，使用 attr() 方法来获取与设置元素属性
• attr() 语法

$(selector).attr([name]);		//获取属性值
$(selector).attr([name]:[value]);	//设置属性值
$(selector).attr({[name1]:[value1],[name2]:[value2],...});	//设置多个属性值

• 参数 name 表示属性名称，value 表示属性值

7.5.2 删除元素属性

• jQuery 中，删除元素的属性使用方法：removeAttr() 方法
• removeAttr() 方法语法：

$(selector).removeAttr(name);

• name 参数为要删除的属性名称

7.6 节点遍历

jQuery 中，可以通过已获取到的元素，选取与其相邻的兄弟元素，祖先元素等进行操作

jQuery 中提供了遍历子元素，遍历同辈元素，遍历前辈元素和一些特别的遍历方法

即 children()、next()、prev()、siblings()、parent()、parents() 等

7.6.1 遍历子元素

• jQuery 中，遍历子元素使用 children() 方法，获取元素的所有子元素
• children() 方法语法

$(selector).children([expr])

• 参数 expr 为可选项，用于过滤子元素的表达式

7.6.2 遍历同辈元素

• 遍历同辈元素的方法有三种：next()、prev()、siblings()
• 遍历同辈元素的三种方法的主要用法

方法名	描述	示例
next([expr])	用于获取紧邻匹配元素之后的元素 参数 expr 可选 用于过滤同辈元素的表达式	$(“li:eq(1)”).next().addClass(“orang”);
prev([expr])	用于获取紧邻匹配元素之前的元素 参数 expr 可选 用于过滤同辈元素的表达式	$(“li:eq(1)”).prev().addClass(“orang”);
siblings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素 参数 expr 可选 用于过滤同辈元素的表达式	$(“li:eq(1)”).siblings().addClass(“orang”);

7.6.3 遍历前辈元素

• jQuery 中，用于遍历前辈元素的方法有 parent() 和 parents()
• 前辈元素的主要用法

方法名	描述
parent([selector])	参数可选。规定缩小搜索父元素范围的选择器表达式 获取当前匹配元素集合中每个元素的父级元素
parents([selector])	参数可选。规定缩小搜索祖先元素范围的选择器表达式 获取当前匹配元素集合中每个元素的祖先元素

7.6.4 其他遍历方法

jQuery 中有许多遍历方法，如 each()、end()、find()、first()、last() 等许多方法，这里主要介绍 each() 和 end()

1、each() 方法

• each 方法规定每个匹配元素规定运行的函数
• each() 语法格式

$(selector).each(function(index,element));

• each() 方法示例

$("li").each(function() {
    var str=$(this).text()+"<br>";
    $("section").append(str);
});
//将每个 li 的内容提取出来，添加换行
//添加到 section 容器标签中

2、end() 方法

• end() 方法用于结束当前链条中最近的筛选操作，并将匹配元素集还原为之前的状态
• 示例

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

当使用 find() 方法，找到 ul 当中的类样式为 .foo 的，现在选择的节点为 应用了 .foo的类样式

- **each() 方法示例**

~~~javascript
$("li").each(function() {
    var str=$(this).text()+"<br>";
    $("section").append(str);
});
//将每个 li 的内容提取出来，添加换行
//添加到 section 容器标签中

2、end() 方法

• end() 方法用于结束当前链条中最近的筛选操作，并将匹配元素集还原为之前的状态
• 示例

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

当使用 find() 方法，找到 ul 当中的类样式为 .foo 的，现在选择的节点为 应用了 .foo的类样式

当使用 end() 方法后，又还原为了原来的 ul.first 节点