JavaScript • 【第7章 jQuery操作 DOM】

JavaScript • 【第7章 jQuery操作 DOM】

7.1 DOM 对象和 jQuery 对象

7.1.1 DOM 对象

使用JavaScript中的getElementById ()方法，在文档中选择id="content"的匹配元素，最后将生成的DOM对象储存在obj变量中

JavaScript	jQuery
onclick	click()
onfocus	onfocus
onblur	change()

7.1.2 jQuery 对象

使用 jQuery 选择器选择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具有特有的方法和属性，完全能够实现传统 DOM 对象的所有功能

7.2使用jQuery元素文本和值

jQuery元素文本和值

设置或获取元素的文本值：text()  或 html()
设置或获取元素的 value 值：val()

jQuery 元素属性操作

设置或获取元素属性值：attr()
删除元素属性：removeAttr()

jQuery 元素样式操作
1 直接设置样式

直接添加样式：css

2 先创建样式，再设置
【注意】样式只能设置类样式（class）

添加类（样式）：addClass()
删除类（样式）：removeClass()
切换类（样式）：toggleClass()

7.3 jQuery 中使用 DOM 操作节点

7.3.1 创建节点元素

$(html);

7.3.2 插入节点

动态创建新元素后，需要执行插入或追加操作

按照元素的层次关系来分，可以分为内部和外部两种方法
1、元素内部插入子节点

语法格式	功能描述
append(content)	$(A).append(B) 表示将 B 追加到 A 中，如 $("ul").append($li);
appendTo(content)	$(A).appendTo(B) 表示把 A 追加到 B 中，如 $li.appendTo(“ul”)
prepend(content)	$(A).prepend(B) 表示将 B 前置插入到 A 中，如 $("ul").prepend($li)
prependTo(content)	$(A).prependTo(B) 表示将 A 前置插入到 B 中，如 $li.prependTo(“ul”)

2、元素外部插入同辈节点

语法格式	功能描述
append(content)	$(A).after(B) 表示将 B 插入到 A 之后，如 $("ul").after($div);
insertAfter(content)	$(A).insertAfter(B) 表示将 A 插入到 B 之后，如 $div.insertAfter(“ul”)
before(content)	$(A).before(B) 表示将 B 插入至 A 之前，如 $("ul").before($div)
insertBefore(content)	$(A).insertBefore(B) 表示将 A 插入到 B 之前，如 $div.insertBefore(“ul”)

7.3.3 替换节点

在 jQuery 中，如果要替换元素中的节点，可以使用 replaceWith() 和 replaceAll() 这两种方法

jQuery 对象.replaceWith(content);
jQuery 对象.replaceAll(selector);

replaceWith() 方法的功能是将所有选择的元素替换成指定的 HTML 页面元素

replaceAll() 方法的功能是用所选择的元素替换指定的 元素

7.3.4 复制节点

在页面中，有时候需要复制某个元素节点。可以通过 clone() 方法实现功能

jQuery 对象.clone();

该方法只是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要将该元素的全部行为也进行复制，那么可以通过 clone(true) 实现

7.3.5 删除节点

jQuery 对象.remove([expr]);

其中参数 expr 为可选项，该参数为筛选元素的 jQuery 表达式，通过该表达式将获取指定的元素，并进行删除

7.4 遍历元素

jQuery 中元素的遍历

jQuery 对象.each(callback);

参数 callback 是一个function函数，可以给该函数传递一个index参数，此形参是遍历元素的序号。如果需要在函数体中访问当前遍历到的元素，可以使用 this 关键字