阅读(923)
赞(2)
jQuery 属性选择器
2017-07-21 17:21:33 更新
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(zijiebao.com)</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" 的元素 |