3.5层次选择器
所谓的层次选择器，就是根据页面DOM元素之间得父子关系作为匹配的筛选条件。
3.5.1 ancestor descendant选择器
ancestor descendant选择器的使用方法：
$("ancestor descendant")
ancestor 是指任何有效的选择器
descendant 是用以匹配元素的选择器，并且它是ancestor所指定的jQuery的代码。
例
<div id="button">
<ul>
<li>技术服务热线：400-675-1066传真：0431-84972266企业邮箱：msiafusedya@czsuhd.con</li>
<li>Copyright©www.mrbccd.com ALL Rights Reserved!</li>
</ul>
</div>
<ul>
<li>技术服务热线：400-675-1066传真：0431-84972266企业邮箱：msiafusedya@czsuhd.con</li>
<li>Copyright©www.mrbccd.com ALL Rights Reserved!</li>
</ul>
css样式
<style type="text/css">
#button{
background-image: url(../images/1569231904827.jpg);/*设置背景*/
width: 800px;
height: 58px;
clear: both; /*设置左右两侧无浮动对齐*/
text-align: center;
padding-top: 10px; /*设置顶边距*/
font-size: 9pt; /*设置字体大小*/
}
.copyright{
color: #FFFFFF;
list-style: none; /*不显示项目符号*/
line-height: 20px;
}
</style>
最后的jquery代码，匹配div元素的子元素ul，并为其添加CSS样式。
script type="text/javascript">
$(document).ready(function(){
$("div ul").addClass("copyright"); //为div元素的子元素ul添加样式
});
</script>
3.5.2parent>child选择器
parent>child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素，使用该选择器只能选择父元素的直接子元素。
使用方法：
$("parent>child");
parent 是指任何有效的选择器。
child 是用以匹配元素的选择器。并且它是parent的子元素。
例
表单+换肤代码
<form id="forml" name="forml" method="post" action="">
姓 名:<input type="text" name="name" id="name"/><br />
籍 贯:<input name="native" type="text" id="native" /><br />
生 日:<input type="text" name="birthday" id="birthday" /><br />
E-mail:<input type="text" name="email" id="email"/>
<span>
<input type="button" name="change" id="change" value="换肤" />
</span>
<input type="button" name="default" id="default" value="恢复默认"/>
<br />
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#change").click(function(){
$("form>input").addClass("input");
});
$("#default").click(function(){
$("form>input").removeClass("input");
});
});
</script>
css样式
<style type="text/css">
input{
margin: 0.3125rem;
}
.input{
font-size: 12pt;
color: #33333;
background-color: #cef;
border: 0.0625rem solid #0000000;
}
</style>
3.5.3prev+next选择器
prev+next选择器用于匹配所有紧接在prev元素后的next元素。
prev和next元素是同级别我元素。
使用方法：
$("prev>next");
prev 是指任何有效的选择器
next 是一个有效选择器并尽接这prev选择器。
例
<body>
<div>
<label>第一个label</label> //紧跟的变色
<p>第一个</p>
<p>第二个</p>
<fieldset>
<label>第二个label</label>
<p>第二个</p>
</fieldset>
</div>
<p>div外面的</p>
<script type="text/javascript" charset="GBK">
$(document).ready(function(){
$("label+p").addClass("background");
})
</script>
</body>
css样式
<style type="text/css">
.background{
background: #cef;
}
body{font-size: 0.75rem;}
</style>
3.5.4 prev ~ siblings选择器
prev ~ siblings选择器用于匹配prev元素之后的所有siblings元素。两个元素为同辈元素。
使用方法：
$("prev~siblings")
prev 是指任何有效的选择器
siblings 是一个有效选择器并紧接着prev选择器
例
筛选同辈元素
<div>
<p>第一个p</p>
<p>第二个p</p>
</div>
<p>div外面的p</p>
<script type="text/javascript" charset="GBK">
$(document).ready(function(){
$("div~p").addClass("background");
//为匹配的元素添加CSS类
});
</script>
css样式
<style type="text/css">
.background{background: #cef}
body{font-size: 12px;}
</style
3.6过滤选择器
过滤选择器包括简单过滤器、内容过滤器、可见性过滤器、表单对象属性过滤器和子元素选择器
3.6.1简单过滤器
简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器。
| 过滤器 | 说明 |
|---|---|
| :first | 匹配找到的第一个元素，它是与选择器 |
| :last | 匹配找到的最后一个元素，它是与选择器结合使用的 |
| :even | 匹配所有索引值为偶数的元素，索引值从0开始计数 |
| :odd | 匹配所有索引值为奇数的元素，索引值从0开始计数 |
| :eq(index) | 匹配一个给定索引值的元素 |
| :gt(index) | 匹配所有大于给定索引值的元素 |
| :lt(index) | 匹配所有小于给定索引值的元素 |
| :header | 匹配如h1、h2、h3…之类的标题元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 |
| :animated | 匹配所有正在执行动画效果的元素 |
例
<body>
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
<tr>
<td width="11%" height="27">编号</td>
<td width="14%">祝福对象</td>
<td width="12%">祝福者</td>
<td width="33%">字条内容</td>
<td width="30%">发送时间</td>
</tr>
<tr>
<td height="27">1</td>
<td>琦琦</td>
<td>妈妈</td>
<td>愿您健康快乐的成长！</td>
<td>2014-08-15 13:06:06</td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$("tr.even").addClass("even");
$("tr.odd").addClass("odd");
$("tr.first").addClass("even");
$("tr.first").addClass("th");
});
</script>
</table>
</body
css样式
<style type="text/css">
td{
font-size: 0.75rem;
} //标签选择器
.th{
background-color: #B6DF48;
font-weight: bold;
text-align: center;
}
.even{
background-color: #E8F3D1;
}
.odd{
background-color: #F9FCEF;
}
</style>
内容选择器
内容选择器是指通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。
| 过滤器 | 说明 |
|---|---|
| :contains(text) | 匹配包含给定文本的元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 |
| :has(selector) | 匹配含有选择器所匹配元素的元素 |
| :parent | 匹配含有子元素或者文本的元素 |
例
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
<tr>
<td width="11%" height="27">编号</td>
<td width="14%">祝福对象</td>
<td width="12%">祝福者</td>
<td width="33%">字条内容</td>
<td width="30%">发送时间</td>
</tr>
<tr>
<td height="27">1</td>
<td>琪琪</td>
<td>妈妈</td>
<td>愿你健康快乐的成长！</td>
<td>2019-10-24 16:29:29</td>
</tr>
<tr>
<td height="27">2</td>
<td>wgh</td>
<td>无语</td>
<td>每天都有好心情！</td>
<td>2019-10-24 16:29:29</td>
</tr>
<tr>
<td height="27">2</td>
<td>明日科技</td>
<td>wgh</td>
<td></td>
<td>2019-10-24 16:29:29</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("td:parent").css("background-color","#E8F3D1");//为不为空的单元格设置默认背景颜色
$("td:empty").html("暂无内容"); //为空的单元格添加默认内容
$("td:contains('轻鸿')").css("color","red"); //将含有文本"轻鸿"的单元格的文字颜色设为红色
});
</script>
可见性过滤器
元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。可见性过滤器有两种，一种是匹配所有可见元素的:visible过滤器，另一种就是匹配所有不可见元素的:hidden过滤器。
例
<input type="text" value="显示的input元素" />
<input type="text" value="我不是显示是的input元素" style="display: none" />
<input type="hidden" value="我是隐藏域" />
<script type="text/javascript">
$(document).ready(function(){
var visibleVal=$("input:visible").val(); //取得显示的input的值
var hiddenVal1=$("input:hidden:eq(0)").val();//取得隐藏的文本框的值
var hiddenVal2=$("input:hidden:eq(1)").val();//取得隐藏域的值
alert(visibleVal+"\n\r"+hiddenVal1+"\n\r"+hiddenVal2);//取得弹出信息
});
</script>
表单对象的属性过滤器
表单对象的属性过滤器通过表单元素的状态属性（如选中、不可以等状态）匹配元素。
| 过滤器 | 说明 |
|---|---|
| :checked | 匹配所有选中的被选中元素的 |
| :disabled | 匹配所有不可用元素 |
| :enabled匹配所有可用的元素 | |
| :selected | 匹配所有选择的option元素 |
例
<form>
复选框1:<input type="checkbox" checked="checked" value="复选框1"/>
复选框2:<input type="checkbox" checked="checked" value="复选框2"/>
复选框3:<input type="checkbox" value="复选框3" /><br/>
不可以按钮:<input type="button" value="不可以按钮" disabled ><br/>
下拉列表框:
<select onchange="selectVal()">
<option value="列表项1">列表项1</option>
<option value="列表项2">列表项2</option>
<option value="列表项3">列表项3</option>
</select>
</form>
<script type="text/javascript">
$(document).ready(function(){
$("input:checked").css("background-color","red");//设置选中的复选框的背景颜色
$("input:disabled").val("我是不可用的"); //为灰色不可用按钮赋值
})
function selectVal(){ //下拉列表框变化时执行的方法
alert($("select option:selected").val());//显示选中的值
}
</script>
子元素过滤器
子元素选择器就是筛选给定某个元素的子元素。
扫一扫
2674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
