jQuery Api 学习（三、jQuery 文档 - 操作 DOM 元素属性）

最新推荐文章于 2022-09-13 09:56:11 发布

原创最新推荐文章于 2022-09-13 09:56:11 发布 · 373 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文详细讲解了如何使用jQuery操作DOM的基本属性，包括attr和prop的异同，class属性的追加、移除和替换，以及表单值的获取、修改和元素内容的处理。重点介绍了attr和prop针对不同属性类型的适用场景。

文章目录

一、操作 DOM 基本属性
二、操作 class 属性
三、操作表单值和 DOM 文本

一、操作 DOM 基本属性

1. 获取属性

当我们想获取一个 DOM 元素的属性值时，可以使用下面两种方式中的任意一种

函数名	参数	所属
attr	属性名	jQuery 核心对象
prop	属性名	jQuery 核心对象

jQuery 核心对象.attr( 属性名 )：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      console.log($('div').attr('id')) // 结果: container
    </script>
  </body>
</html>

jQuery 核心对象.prop( 属性名 )：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      console.log($('div').prop('id')) // 结果: container
    </script>
  </body>
</html>

2. 添加和修改属性

当我们想给一个 DOM 元素的属性值赋值时，可以使用下面两种方式中的任意一种

函数名	参数	所属
attr	属性名, 属性值	jQuery 核心对象
prop	属性名, 属性值	jQuery 核心对象

jQuery 核心对象.prop( 属性名, 属性值 )：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').attr('id', 'container')
      console.log($('div').get(0)) // 结果： <div id="container"></div>
    </script>
  </body>
</html>

jQuery 核心对象.prop( 属性名, 属性值 )：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').prop('id', 'container')
      console.log($('div').get(0)) // 结果： <div id="container"></div>
    </script>
  </body>
</html>

3. 移除属性

当我们想给 DOM 元素移除属性时，可以使用下面的方法

函数名	参数	所属
removeAttr	属性名	jQuery 核心对象

jQuery 核心对象.removeAttr( 属性名 )：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div id="container"></div>
    <p></p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // 移除元素本身的属性
      $('div').removeAttr('id')
      console.log($('div').get(0)) // 结果： <div></div>

      // 移除后添加的属性
      $('p').prop('id', 'element')
      $('p').removeAttr('id')
      console.log($('p').get(0)) // 结果： <p></p>
    </script>
  </body>
</html>

4. attr 和 prop 设置属性的区别

设置普通属性和自定义属性时建议使用 attr, 设置值为布尔类型的属性时(checked、selected 等)建议使用 prop

当使用 attr 设置值为布尔类型的属性时，会出现设置失败的问题，如下图

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="checkbox" checked>
    <button>反选</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('button').click(function () {
        $('input').attr('checked', !$('input').attr('checked'))
      })
    </script>
  </body>
</html>

通过上面动图能看出，使用 attr 设置值为布尔类型的属性时，如果元素没有经过人为操作，是可以成功通过 attr
设置属性的，但是一旦在画面人为操作过元素后, attr 就不能成功设置元素的属性值

二、操作 class 属性

不止可以通过 attr 和 prop 操作 class 属性，jQuery 还特意提供了一套专门操作 class 属性的方法

1. 追加 class 属性

函数名	参数	所属	描述
addClass	class 名	jQuery 核心对象	添加多个时，class 名用空格隔开

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').addClass('container')
    </script>
  </body>
</html>

2. 移除 class 属性

函数名	参数	所属
removeClass	class 名	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').removeClass('container')
    </script>
  </body>
</html>

3. 替换 class 属性

addClass 的方式用来在 class 属性内追加 class 名，如果想覆盖原 class 的属性值，可以使用该方法

函数名	参数	所属
toggleClass	class 名	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
      .container2 {
        width: 200px;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').toggleClass('container2')
    </script>
  </body>
</html>

三、操作表单值和 DOM 文本

1. 获取表单值

获取表单的 value 属性值：

函数名	参数	所属
val	无	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="text" value="表单默认值" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      console.log($('input').val())
    </script>
  </body>
</html>

2. 添加或修改表单值

添加或修改表单的 value 属性值：

函数名	参数	所属
val	值	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="text" value="表单默认值" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('input').val('这是修改后的表单值')
      console.log($('input').val())
    </script>
  </body>
</html>

3. 获取标签对儿中的内容

获取元素及子元素内的文本内容：

函数名	参数	所属	描述
text	无	jQuery 核心对象	会忽略 html 标签，但不会忽略换行、空格等
html	无	jQuery 核心对象	不会忽略 html 标签、换行、空格等

jQuery 核心对象.text()：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div>aa 
      a
      <p>bbb</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // 结果：
      // aa 
      //       a
      //       bbb
      console.log($('div').text())
    </script>
  </body>
</html>

jQuery 核心对象.html()：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div>aa 
      a
      <p>bbb</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // 结果：
      // aa 
      //       a
      //       <p>bbb</p>
      console.log($('div').html())
    </script>
  </body>
</html>

4. 替换标签对儿中的内容

将目标元素标签对儿中的内容全部替换：

函数名	参数	所属	描述
text	替换内容	jQuery 核心对象	会忽略 html 标签，但不会忽略换行、空格等, 如有 html 标签，则会被转译并显示在画面
html	替换内容	jQuery 核心对象	不会忽略 html 标签、换行、空格等, 如有 html 标签，则会被正常解析

jQuery 核心对象.text( 替换内容 )：html 标签会被转义后，直接显示在画面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div>aa 
      a
      <p>bbb</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').text('<span>将 div 下的内容全部替换</span>')
      console.log($('div').get(0)) // 结果：<div>&lt;span&gt;将 div 下的内容全部替换&lt;/span&gt;</div>
    </script>
  </body>
</html>

jQuery 核心对象.html( 替换内容 )：html 标签会被解析成 DOM 元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div>aa 
      a
      <p>bbb</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').html('<span>将 div 下的内容全部替换</span>')
      console.log($('div').get(0)) // 结果：<div><span>将 div 下的内容全部替换</span></div>
    </script>
  </body>
</html>