【JQuery—前端快速入门】JQuery 操作元素

---

JQuery 操作元素

---

1. 获取/修改元素内容

---

三个简单的获取元素的方法：

这三个方法即可以获取元素的内容，又可以设置元素的内容.

有参数时，就进行元素的值设置，没有参数时，就进行元素内容的获取.

接下来，我们需要操作页面元素；

---

获取页面元素

---

我们写出如上代码，保存后，打开浏览器页面，按F12打开调试界面：

发现 console 什么都没有显示，这是因为没有触发 click() 方法，我们需要点击 id="id_01"的标签在页面中的内容，也就是页面中的 div 小盒子：

此时就能触发 click() 方法，执行 function() 中的操作，也就是在控制台打印 id = “id01” 的内容，我们也能直观地观察到 text() 和 html() 这两个获取元素的方法的区别；

---

如果我们获取的是表单元素的值，那么使用 text() 或者 html() 并不能获取到表单元素对应的值：

我们可以看到，再点击输入框后，console 并没有打印 id = “input” 标签对应的 value；

要想获取表单元素中的 value ，我们需要用 val() 方法：

---

修改页面元素

---

如果 text() ，html()，val() 没有传参，就是获取标签的值，如果有传参，就是修改调用该方法的元素的值：

保存代码，打开页面，观察效果：

说明：

• 点击第一次，触发 click 方法，console 打印 div 调用 text() 和 html() 的内容，并且把 div 中的内容赋值为"我是点击后的内容"；

• 点击第二次，打印的就是 div 被赋值后的内容，同时重复赋值；

---

text 修改元素时，不会解析内容中的标签，而 html() 修改元素时，会先解析内容中的标签，再把内容进行修改，根据实际需求选择合适的方法即可：

---

修改表单元素的值，就需要调用 val()：

可以看到，虽然 val() 确实修改了元素的值，但是却并没有解析赋值的标签；

---

2. 获取/设置元素属性

---

JQuery attr() 方法用于获取属性值；

---

示例一：使用 attr() 获取超链接标签中的网址

---

说明：代码中使用 JQuery 的标签选择器，选择 a 标签，并且通过调用 attr() 方法，来获取 a 标签的 href ；

---

示例二：使用 attr() 设置超链接标签中的网址

---

我们可以发现，如果对 attr() 方法传一个参数，表示获取标签中的属性的值；如果传两个参数，就是修改标签中的属性的值；

---

3. 获取/返回 css 属性

---

css() 方法设置或返回被选元素的一个或多个样式属性；

---

示例一：使用 css() 获取标签中的样式

---

说明：通过 JQuery 标签选择器，选择 div 标签，通过调用 css() 方法来获取 div 标签里， style 属性中的字体大小样式；

---

示例二：使用 css() 修改标签中的样式

---

和 attr() 方法同理，对 css() 传一个参数是获取样式，传两个参数则是修改样式；

---

4. 添加元素

---

添加 HTML 内容

1. append()：在被选元素的结尾插入内容
2. prepend()：在被选元素的开头插入内容
3. after()：在被选元素之后插入内容
4. before()：在被选元素之前插入内容

---

有序列表快捷键：

---

我们写出上面的代码，保存后打开页面：

---

5. 删除元素

---

删除元素和内容，一般使用以下两个 jQuery 方法:

1. remove()：删除被选元素(及其子元素)
2. empty()：删除被选元素的子元素。

---

说明：如果我们调用 remove 方法，会将选择的标签，及其里面的内容全部清除；

---

说明：调用 empty() 方法，会清空选中标签中的所有内容，但是会保留该标签；

---