阅读(9.7k) 书签赞(0) 我要纠错

jQuery 属性选择器

2020-08-31 09:47 更新

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

1.选取 <p> 元素

$("p")

2.选取所有 class="intro" 的 <p> 元素。

$("p.intro")

3.选取所有 id="demo" 的 <p> 元素

$("p#demo")

属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

选取所有带有 href 属性的元素

$("[href]")

选取所有带有 href 值等于 "#" 的元素

$("[href='#']")

选取所有带有 href 值不等于 "#" 的元素

$("[href!='#']")

选取所有 href 值以 ".jpg" 结尾的元素

$("[href$='.jpg']")

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

<html>
<head>
  <title>W3Cschool(w3cschool.cn)</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" rel="external nofollow" ></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("button").click(function () {
        $("p").css("background-color", "red");
      });
    });
  </script>
</head>
<body>
  <h2>这是一个标题</h2>
  <p>这是一个段落</p>
  <p>这是另一个段落</p>
  <button type="button">点击</button>
</body>
</html>

更多的选择器实例

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

以上内容是否对您有帮助：