JQuery常用的操作DOM元素的方法

浅浅的花香味﹌ 2024-05-08 06:31 65阅读 0赞

#### 文章目录 ####

*  理论知识
 *   *  获取元素节点
     *  添加节点
     *  操作同级节点
     *  获取和更改属性
     *  DOM元素的文本操作
 *  参考链接

## 理论知识 ##

### 获取元素节点 ###

JQuery最基本的选择器有三种，分别是ID选择器，类选择器和元素选择器(也可以叫标签选择器)

<table> 
 <thead> 
  <tr> 
   <th>基本选择器</th> 
   <th>功能描述</th> 
   <th>实例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ID选择器 $("#–")</td> 
   <td>根据id属性选择元素</td> 
   <td>$("#abc"): 获取ID为abc的元素</td> 
  </tr> 
  <tr> 
   <td>类选择器 $(".class")</td> 
   <td>根据类选择元素</td> 
   <td>$(".abc"): 获取类名为abc的元素</td> 
  </tr> 
  <tr> 
   <td>标签选择器 $(“element”)</td> 
   <td>根据标签选择元素</td> 
   <td>$(“div”) : 获取所有的div标签</td> 
  </tr> 
 </tbody> 
</table>

### 添加节点 ###

*  append() : 给选取元素的内部尾部添加内容(元素、innerHTML、文本)。
 *  prepend()： 给选取元素的内部开头处添加内容(元素、innerHTML、文本)。
 *  appendTo() ： 把选取元素添加到指定DOM元素内部的结尾处，和上面append()是一样的。
 *  prependTo()： 给选取元素的内部开头处添加内容(元素、innerHTML、文本)。

### 操作同级节点 ###

*  before() ： 在选取元素之前添加内容。
 *  after()： 在选取元素之后添加内容。
 *  insertBefore()：将选取元素插入到指定元素前面。
 *  insertAfter()： 将选取元素插入到指定元素之后。

### 获取和更改属性 ###

*  attr() : 获取属性或设置属性
 *  removeAttr() : 移除属性

### DOM元素的文本操作 ###

*  html()：获取和设置匹配元素的HTML内容，相当于innerHTML。
 *  text()：获取和设置匹配元素的文本内容，相当于innerText。
 *  val()：获取和设置匹配元素的value值，一般用于表单元素。

## 参考链接 ##

[JQuery常用的的DOM元素操作][JQuery_DOM]

[JQuery_DOM]: https://blog.csdn.net/fengwei4618/article/details/78116330