✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：前端开发者成长之路
✨特色专栏：国学周更-心性养成之路
🥭本文内容：轻松学习jQuery控制DOM
更多内容点击👇
      轻松学会jQuery选择器的用法

文章目录

• • 标记属性
  • • 获取属性值
    • 设置属性值
    • 删除属性
  • 页面元素
  • • 直接获取和编辑内容
    • 添加元素
    • 删除元素
    • 替换元素
    • 克隆元素
  • 表单元素
  • 快速投票

标记属性

  在HTML中每一个标记都具有一些属性，它们表示这个标记在页面中呈现的各种状态，例如下面的img标记：

  该标记中img表示标记的名称，里面有src、width、title等属性用于表示img标记在页面中的各种状态。下面将通过各种方法来介绍对页面中标记的属性的控制方法。

获取属性值

  除了 遍历整个选择器中的元素，很多时候需要得到某个对象的某个特定的属性值。在jQuery中可以通过attr(name)方法轻松地实现。该方法可获取元素集合中的第一项的属性值。如果没有匹配项，则返回undefined。

案例：点击图片，显示图片src属性值的弹框

代码如下：

以上代码通过$(‘img’).attr(‘src’)获取了第一个img标记的src属性值并进行操作。

运行效果如下：

设置属性值

  attr()方法除了可以获取元素的属性值外，还可以设置元素的属性值，通常表达式为：“attr(name,value);”。该方法对应元素集合中所有项的属性name的值为value。

案例：点击图片，重新设置图片src属性值

代码如下：

运行效果：

  有的时候对于某些元素，希望可以同时设置它的很多不同属性，如果采用上面的方法则需要一个各地设置属性，十分麻烦。然而jQuery很人性化，attr()还提供了一个进行列表设置的attr(properties)方法，利用该方法可以同时设置多个属性。

案例：点击图片，设置多个属性：src属性值、title属性、width属性。

代码如下：

运行效果：

删除属性

  当设置某个元素的属性的值时，可以通过removeAttr(name)方法将该属性的值删除。

案例：点击图片，删除src属性值

代码如下：

运行效果：

页面元素

  对于页面的元素，在DOM编程中可以通过各种查询、修改手段进行管理，但在喝多时候都非常麻烦。jQuery提供了一整套方法来处理页面中的元素，包括元素复制、移动、替换等。

直接获取和编辑内容

  在jQuery中，主要是通过html()和text()两个方法来获取和编辑页面内容的。

  其中html()相当于获取节点的innerHTML属性；添加参数时（即方法为html(text)时），则为设置innerHTML。而方法为text()则相当于获取元素的纯文本，text(content)为设置纯文本。

  这两个方法 有时候会搭配使用，text()通常用来过滤页面中的标记，而html(text)用来设置节点中的innerHTML。

获取内容案例：

段落标签1
段落标签2

运行效果：

编辑内容案例：

运行效果：

添加元素

  在普通的DOM中，如果希望在某个元素的后面添加一个元素，通常会使用父元素的appendChild()或者insertBefore()，且在很多时候需要反复寻找节点的位置，这十分麻烦。jQuery中提供了append、appendTo、prepend和prependTo方法添加新元素；也提供了after、insertAfter、before和insertBefore方法插入新元素。下面我将通过案例代码的方式一一为您介绍方法的应用。

1、通过 父子关系 添加新元素

【1】append()append()append()方法

$('ul').append('
jQuery中创建的元素节点
');

语法说明：找到父元素ul，然后通过父元素ul去添加新元素li到最后位置;

案例代码：

我是已经写好的li标签

【2】appendTo()appendTo()appendTo()方法

$('
jQuery中创建的元素节点
').appendTo($('ul'));

语法说明：创建新元素li，然后将新元素li追加到ul父元素中的最后位置；

案例代码：

我是已经写好的li标签

以上两种方法的运行效果是一样的，都是将新元素添加到最后位置：

【3】prepend()prepend()prepend()方法

$('ul').prepend('
jQuery中创建的元素节点
');

语法说明：找到父元素ul，然后通过父元素ul去添加新元素li到第一个位置;

案例代码：

我是已经写好的li标签

【4】prependTo()prependTo()prependTo()方法

$('
jQuery中创建的元素节点
').prependTo($('ul'));

语法说明：创建新元素li，然后将新元素li追加到ul父元素中的最后位置；

案例代码：

我是已经写好的li标签

以上两种方法的运行效果是一样的，都是将新元素添加到第一个位置：

以上四种方法是通过父元素和子元素的关系，给父元素ul添加li；

2、通过 兄弟关系 插入新元素

下面将有四种方法是通过子元素li之间的关系来插入新的li。

【1】after()after()after()方法

$('.li1').after('
我是用after方法新创建的li标签
');

语法说明：找到某个兄弟元素li，然后通过兄弟元素li去插入新元素li到兄弟元素的后面;

案例代码：

我是已经写好的第一个li标签
我是已经写好的第二个li标签

运行效果：

【2】insertAfter()insertAfter()insertAfter()方法

$('
我是用insertAfter方法新创建的li标签
').insertAfter($('.li1'));

语法说明：创建新元素li，然后将新元素li插入到指定兄弟元素li的后面；

案例代码：

我是已经写好的第一个li标签
我是已经写好的第二个li标签

运行效果：

【3】before()before()before()方法

$('.li2').before('
我是用before方法新创建的li标签
');

语法说明：找到某个兄弟元素li，然后通过指定兄弟元素li去插入新元素li到兄弟元素的前面;

案例代码：

我是已经写好的第一个li标签
我是已经写好的第二个li标签

运行效果：

【4】insertBefore()insertBefore()insertBefore()方法

$('
我是用insertBefore方法新创建的li标签
').insertBefore($('.li2'));

语法说明：创建新元素li，然后将新元素li插入到指定兄弟元素li的前面；

案例代码：

我是已经写好的第一个li标签
我是已经写好的第二个li标签

运行效果：

删除元素

【1】删除一个元素

  在DOM编程中，要删除某个元素往往需要借助于它的父元素的removeChild()方法。而jQuery则提供了remove()方法，其可以直接将元素删除。

案例代码：

二级标题标签
列表项第1项
列表项第2项
列表项第3项

运行效果：

【2】删除某个元素所有子元素

  在DOM编程中如果希望将某个元素的子元素全部删除，则往往需要用for循环配合hasChildNodes()来判断，并用removeChildNode()进行逐一删除。jQuery中提供了empty()方法来直接删除某个元素的所有子元素。

案例代码：

二级标题标签
列表项第1项
列表项第2项
列表项第3项

运行效果：

替换元素

  在jQuery中，替换元素提供了replaceWith()和replaceAll()两种方法；两种方法的用法区别可以通过下面案例观察。

案例代码：

列表项第1项
列表项第2项
列表项第3项

运行效果：

克隆元素

  很多时候，我们希望执行对某个目标对象的复制操作，jQuery中就提供了clone()方法来完成这项任务。

案例代码：

列表项第1项
列表项第2项
列表项第3项

运行效果：

  另外，clone()还可以接受布尔对象作为参数。当该参数为true时，除了克隆元素本身外，它所有携带的事件方法也将一起被复制。

案例代码：

列表项第1项
列表项第2项
列表项第3项

运行效果：

表单元素

  表单元素form是与用户交互很频繁的元素之一，它通过各种形式接收用户的数据，包括下拉框、单选项、多选项、文本框等。在表单元素的各个属性中，value往往是最受关注的。jQuery提供了强大的val()方法来处理与value相关的操作。

案例代码：

篮球

运行效果：

快速投票