<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>
<title>使用jQuery 属性过滤选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center
}
div {
float: left;
border: solid 1px #ccc;
margin: 8px;
width: 65px;
height: 65px;
display: none
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#button1").click(function () { // 显示所有含有name 属性的元素
$("div[name]").show(1000);
})
$("#button2").click(function(){
//显示所有属性title的值是"A"的元素
$("div[title='n']").show(1000);
})
$("#button3").click(function(){
//显示属性title的值不是"n"的元素
$("div[title!='n']").show(1000);
})
$("#button4").click(function(){
//显示所有属性title的值以"n"开始的元素
$("div[title^='n']").show(1000);
})
$("#button5").click(function(){
//显示所有属性title的值以"e"结束的元素
$("div[title$='e']").show(1000);
})
$("#button6").click(function(){
//显示所有属性title的值中含有"e"的元素
$("div[title*='e']").show(1000);
})
$("#button7").click(function(){
//显示所有属性title的值中含有"e",且属性id的值是"div2"的元素
$("div[id='div2'][title*='e']").show(1000);
})
})
</script>
</head>
<body>
<div id="div1" name="n1">hello</div>
<div title="n" name="n2">world</div>
<div id="div2" title="ne">good morning</div>
<div title="nef">good afternoon</div>
<button id="button1">显示所有含有name 属性的元素</button>
<button id="button2">显示所有属性title的值是"A"的元素 </button>
<button id="button3">显示属性title的值不是"n"的元素</button>
<button id="button4">显示所有属性title的值以"n"开始的元素</button>
<button id="button5">显示所有属性title的值以"e"结束的元素</button>
<button id="button6">显示所有属性title的值中含有"e"的元素</button>
<button id="button7">显示所有属性title的值中含有"e",且属性id的值是"div2"的元素</button>
</body>
</html>
