介绍jQuery的属性选择器，包括各种属性过滤选择器的用法，如[attribute]、[attribute=value]、[attribute!=value]等。
属性选择器根据元素的属性来选择元素。
$("[href]") // 选择所有带有 href 属性的元素
$("[href='#']") // 选择所有 href 属性值等于 "#" 的元素
$("[href!='#']") // 选择所有 href 属性值不等于 "#" 的元素
$("[href^='https']") // 选择所有 href 属性值以 "https" 开头的元素
$("[href$='.pdf']") // 选择所有 href 属性值以 ".pdf" 结尾的元素
$("[href*='example']") // 选择所有 href 属性值包含 "example" 的元素
$("input[id][name$='man']") // 选择所有带有 id 属性且 name 属性值以 "man" 结尾的 input 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器示例</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.demo-section {
margin-bottom: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
}
.link-box {
padding: 10px;
margin: 5px 0;
background-color: white;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
.info-box {
padding: 15px;
margin-top: 15px;
background-color: white;
border-radius: 5px;
border: 2px solid #3498db;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 属性选择器</h1>
<div class="demo-section">
<h3>链接测试</h3>
<div class="link-box">
<a href="#">空链接</a>
</div>
<div class="link-box">
<a href="https://www.example.com">HTTPS 链接</a>
</div>
<div class="link-box">
<a href="http://www.example.com">HTTP 链接</a>
</div>
<div class="link-box">
<a href="document.pdf">PDF 文件</a>
</div>
<div class="link-box">
<a href="https://example.com/test">包含 example 的链接</a>
</div>
<div class="link-box">
<span>没有 href 属性的元素</span>
</div>
<div style="margin-top: 20px;">
<button onclick="testHasAttribute()">[href]</button>
<button onclick="testEqualTo()">[href='#']</button>
<button onclick="testNotEqualTo()">[href!='#']</button>
<button onclick="testStartsWith()">[href^='https']</button>
<button onclick="testEndsWith()">[href$='.pdf']</button>
<button onclick="testContains()">[href*='example']</button>
<button onclick="resetLinks()">重置</button>
</div>
<div id="result" class="info-box"></div>
</div>
<div class="demo-section">
<h3>多属性选择器</h3>
<input type="text" id="name1" name="testman">
<input type="text" id="name2" name="testwoman">
<input type="text" id="name3" name="superman">
<input type="text" id="name4" name="test">
<div style="margin-top: 20px;">
<button onclick="testMultiple()">多属性选择器</button>
</div>
</div>
</div>
<script>
function showMessage(msg) {
$("#result").text(msg);
}
function testHasAttribute() {
var count = $("[href]").length;
showMessage("[href] 选择器：选择了 " + count + " 个带有 href 属性的元素");
$("[href]").css("background-color", "#e74c3c");
}
function testEqualTo() {
var count = $("[href='#']").length;
showMessage("[href='#'] 选择器：选择了 " + count + " 个 href 等于 '#' 的元素");
$("[href='#']").css("background-color", "#3498db");
}
function testNotEqualTo() {
var count = $("[href!='#']").length;
showMessage("[href!='#'] 选择器：选择了 " + count + " 个 href 不等于 '#' 的元素");
$("[href!='#']").css("background-color", "#2ecc71");
}
function testStartsWith() {
var count = $("[href^='https']").length;
showMessage("[href^='https'] 选择器：选择了 " + count + " 个 href 以 'https' 开头的元素");
$("[href^='https']").css("background-color", "#f39c12");
}
function testEndsWith() {
var count = $("[href$='.pdf']").length;
showMessage("[href$='.pdf'] 选择器：选择了 " + count + " 个 href 以 '.pdf' 结尾的元素");
$("[href$='.pdf']").css("background-color", "#9b59b6");
}
function testContains() {
var count = $("[href*='example']").length;
showMessage("[href*='example'] 选择器：选择了 " + count + " 个 href 包含 'example' 的元素");
$("[href*='example']").css("background-color", "#1abc9c");
}
function resetLinks() {
$(".link-box").css("background-color", "white");
$("#result").empty();
}
function testMultiple() {
var count = $("input[id][name$='man']").length;
alert("多属性选择器：选择了 " + count + " 个带有 id 属性且 name 以 'man' 结尾的 input 元素");
$("input[id][name$='man']").css("background-color", "#e67e22");
}
</script>
</body>
</html>
属性选择器根据元素的属性来选择元素，支持多种匹配方式，包括精确匹配、开头匹配、结尾匹配和包含匹配。