jQuery选择器分类有哪些?
1) 类css选择器
1.1) 基本选择器
ID选择器、标签选择器、类选择器
并集选择器、交集选择器、全局选择器
1.2) 层次选择器
后代选择器:使用空格作为分隔符
子选择器:使用>作为分隔符
相邻元素选择器:使用+作为分隔符
同辈元素选择器:使用~作为分隔符
1.3) 属性选择器
[attribute]:指定属性名的选择器
[attribute=value]:指定属性名的值等于value的值的选择器
[attribute!=value]:属性名的值不等于value
[attribute^=value]:属性名的值以value开头
[attribute$=value]:属性名的值以value结尾
[attribute*=value]:属性名的值包含value
[attribute1][attribute2][attributeN]:复合属性选择器,要求同时满足多个
jQuery基本选择器示例:
<style type="text/css">
#box {background-color:#FFF; border:2px solid #000; padding:5px;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
//$("#box").css("background-color","yellow");//ID选择器
//$("h3").css("background-color","yellow");//标签选择器
//$(".title").css("background-color","yellow");//类选择器
//$("h2,dt,.title").css("background-color","yellow");//并集选择器 ||
//$("h2.title").css("background-color","yellow");//交集选择器 &&
$("*").css("background-color","yellow");//全局选择器
});
});
</script>
</head>
<body>
<div id="box"> id为box的div
<h2 class="title">class为title的h2</h2>
<h3 class="title">class为title的h3</h3>
<h3>热门排行</h3>
<dl>
<dt><img src="../img/case_1.gif" width="93" height="99" alt="斗地主" /></dt>
<dd class="title">斗地主</dd>
<dd>休闲游戏</dd>
<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
</dl>
</div>
</body>
jQuery层次选择器示例:
<style type="text/css">
* {margin:0; padding:0; line-height:30px;}
body {margin:10px;}
#menu {border:2px solid #03C; padding:10px;}
a {text-decoration:none; margin-right:5px;}
span {font-weight:bold; padding:3px;}
h2 {margin:10px 0;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
//$("#menu span").css("background-color","yellow");//后代选择器
//$("#menu>span").css("background-color","yellow");//子选择器
//$("h2+dl").css("background-color","yellow");//相邻元素选择器
$("h2~dl").css("background-color","yellow");//同辈元素选择器
});
});
</script>
</head>
<body>
<div id="menu">
<h2>全部旅游产品分类</h2>
<dl>
<dt>北京周边旅游<span>特价</span></dt>
<dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd>
</dl>
<dl>
<dt>景点门票</dt>
<dd><a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a></dd>
<dd><a href="#">山水</a> <a href="#">双休</a></dd>
</dl>
<span>更多分类</span>
</div>
</body>
jQuery属性选择器示例:
<style type="text/css">
#box {background-color:#FFF; border:2px solid #000; padding:5px;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
//$("h2[title]").css("background-color","yellow");//设置h2元素有title属性的背景色
//$("[class=odds]").css("background-color","yellow");//设置class=odds的背景色
//$("[id!=box]").css("background-color","yellow");//设置id!=odds的背景色
//$("[title^=h]").css("background-color","yellow");//设置title属性值以h开头的背景色
//$("[title$=p]").css("background-color","yellow");//设置title属性值以p结尾的背景色
//$("[title*=s]").css("background-color","yellow");//设置title属性值包含s的背景色
$("li[class][title*=y]").css("background-color","yellow");//设置包含class属性且title属性值包含y的li元素的背景色
});
});
</script>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartoonlist">动画列表</h2>
<ul>
<li class="odds" title="kn_jp">名侦探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ss_jp">死神</li>
<li class="evens" title="yj_jp">妖精的尾巴</li>
<li class="odds" title="yh_jp">银魂</li>
<li class="evens" title="hm_da">黑猫警长</li>
<li class="odds" title="xl_ds">仙履奇缘</li>
</ul>
</div>
</body>