Jquery 整理元素选取、常用方法一览表

Jquery 整理元素选取、常用方法一览表

元素选取

Jquery可以通过多种方式选取页面中的元素，包括标签名、class、id、属性等等。

标签名

通过标签名选取元素，可以使用$('标签名')的形式，例如：

$('div') // 选取所有<div>元素

class

通过class选取元素，需要在class前加上“.”，例如：

$('.example') // 选取所有class为example的元素

id

通过id选取元素，需要在id前加上“#”，例如：

$('#example') // 选取id为example的元素

属性

还可以通过元素的属性选取元素，例如：

$('a[href="https://www.baidu.com"]') // 选取<a>元素中href属性为https://www.baidu.com的元素

常用方法一览表

Jquery提供了多种简单易用的方法，方便对元素进行操作和修改。

html()

获取或设置元素的值（HTML内容）。

<div id="content">
  <p>Hello World!</p>
</div>

$('#content').html() // 获取<div id="content">中的HTML内容
// 返回值
// <p>Hello World!</p>

$('#content').html('<p>你好，世界！</p>') // 设置<div id="content">中的HTML内容
// HTML内容被修改为：<p>你好，世界！</p>

val()

获取或设置表单元素的值。

<input type="text" id="input">

$('#input').val() // 获取<input type="text" id="input">的值
// 返回值：空字符串

$('#input').val('Hello World!') // 设置<input type="text" id="input">的值
// input元素的内容被修改为："Hello World!"

text()

获取或设置元素的文本内容。

<div id="content">
  <p>Hello World!</p>
</div>

$('#content p').text() // 获取<p>元素中的文本内容
// 返回值：Hello World!

$('#content p').text('你好，世界！') // 设置<p>元素中的文本内容
// p元素的内容被修改为："你好，世界！"

css()

获取或设置元素的样式。

<div id="content">
  <p>Hello World!</p>
</div>

.text-red {
  color: red;
}

$('#content p').css('color') // 获取<p>元素中的字体颜色
// 返回值：当前字体颜色（根据CSS样式表中的定义而定）

$('#content p').css('color', 'red') // 设置<p>元素中的字体颜色
// p元素的字体颜色被修改为红色

append()

将元素添加到指定元素的后面。

<div id="content">
  <p>Hello World!</p>
</div>

$('#content').append('<p>你好，Jquery！</p>') // 向#content元素中添加<p>元素
// #content元素中的内容变为：
// <p>Hello World!</p>
// <p>你好，Jquery！</p>

remove()

将元素从DOM树中删除。

<div id="content">
  <p>Hello World!</p>
</div>

$('#content p').remove() // 将<p>元素从DOM树中删除
// #content元素中的内容变为：空

以上是Jquery常见的一些元素选取和方法操作，可以大大提高开发效率。