属性选择器
属性名称选择器 语法： $("A[属性名]")包含指定属性的选择器属性选择器 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器复合属性选择器 语法：$("A[属性名='值'][]...")包含多个属性条件的选择器
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>属性过滤选择器
</title
>
<meta http
-equiv
="content-type" content
="text/html; charset=UTF-8">
<script src
="../js/jquery-3.4.1.min.js"></script
>
<style type
="text/css">
div
,span
{
width
: 180px
;
height
: 180px
;
margin
: 20px
;
background
: #
9999CC
;
border
: #
000 1px solid
;
float:left
;
font
-size
: 17px
;
font
-family
:Roman
;
}
div
.mini
{
width
: 50px
;
height
: 50px
;
background
: #CC66FF
;
border
: #
000 1px solid
;
font
-size
: 12px
;
font
-family
:Roman
;
}
div
.mini01
{
width
: 50px
;
height
: 50px
;
background
: #CC66FF
;
border
: #
000 1px solid
;
font
-size
: 12px
;
font
-family
:Roman
;
}
div
.visible
{
display
:none
;
}
</style
>
<script type
="text/javascript">
$
(function
() {
$
("#b1").click(function
() {
$
("div[title]").css("backgroundColor","pink");
});
$
("#b2").click(function
() {
$
("div[title='test']").css("backgroundColor","pink");
});
$
("#b3").click(function
() {
$
("div[title!='test']").css("backgroundColor","pink");
});
$
("#b4").click(function
() {
$
("div[title^='te']").css("backgroundColor","pink");
});
$
("#b5").click(function
() {
$
("div[title$='est']").css("backgroundColor","pink");
});
$
("#b6").click(function
() {
$
("div[title*='es']").css("backgroundColor","pink");
});
$
("#b7").click(function
() {
$
("div[id][title*='es']").css("backgroundColor","pink");
});
});
</script
>
</head
>
<body>
<input type
="button" value
="保存" class="mini" name
="ok" class="mini" />
<input type
="button" value
=" 含有属性title 的div元素背景色为红色" id
="b1"/>
<input type
="button" value
=" 属性title值等于test的div元素背景色为红色" id
="b2"/>
<input type
="button" value
=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id
="b3"/>
<input type
="button" value
=" 属性title值 以te开始 的div元素背景色为红色" id
="b4"/>
<input type
="button" value
=" 属性title值 以est结束 的div元素背景色为红色" id
="b5"/>
<input type
="button" value
="属性title值 含有es的div元素背景色为红色" id
="b6"/>
<input type
="button" value
="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id
="b7"/>
<div id
="one">
id为one div
</div
>
<div id
="two" class="mini" title
="test">
id为two
class是 mini div title
="test"
<div
class="mini" >class是 mini
</div
>
</div
>
<div
class="visible" >
class是 one
<div
class="mini" >class是 mini
</div
>
<div
class="mini" >class是 mini
</div
>
</div
>
<div
class="one" title
="test02">
class是 one title
="test02"
<div
class="mini01" >class是 mini01
</div
>
<div
class="mini" style
="margin-top:0px;">class是 mini
</div
>
</div
>
<div
class="visible" >
这是隐藏的
</div
>
<div
class="one">
</div
>
<div id
="mover" >
动画
</div
>
<input type
="text" value
="zhang" id
="username" name
="username">
</body
>
</html
>
