attribute_filter_selector.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>属性过滤选择器</title>
<script type="text/javascript" src="../jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("div[id]").css("background","#0F0"); //具有id属性的元素的背景色
$('div[id="hey"]').css("font-size","14px"); //id属性为hey元素的字体
$('div[id!="hey"]').css("font-size","16px"); //id属性不为hey元素的字体
$('div[id^="the"]').css("color","#090"); //id属性以the开头的的前景色
$('div[id$="be"]').css("color","#C00"); //id属性以be结束的前景色
$('div[id*="er"]').css("color","#360"); //id属性值中包含er的前景色
});
</script>
</head>
<body>
<div id="hey">具有id属性hey的元素</div>
<div id="there">具有id属性there的元素</div>
<div id="adobe">具有id属性adobe的元素</div>
<div>无id属性</div>
</body>
</html>
simple_filter_selector.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简单过滤选择器</title>
<style type="text/css">
table{
border-collapse:collapse;
}
table, td, th{
border:1px solid black;
}
th{
width:100px;
}
</style>
<script type="text/javascript" src="../jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("tr:first").css("background","#FF0"); //表格第一行显示黄色
$("tr:last").css("background","#FCF"); //表格的最后一行显示暖红
//$("tr:odd ").css("background","#BBBBFF"); //表格的奇数行显示蓝色
//$('tr:even ').css('background', '#DADADA'); //表格的偶数行显示灰色
$("tr:even:not(:first)").css("background","#BBBBFF"); //偶数行,但滤除第一行。
$("tr:odd:not(:last)").css("background","#DADADA"); // 奇数行,但滤除最后一行。
//$("tr:eq(4)").css("background","#F00"); //让第4行的背景为红色
//$("tr:gt(4)").css("background","#000"); //大于第4行的显示黑色
//$("tr:lt(2)").css("background","#FFC"); //小于第2行显示黄色
});
</script>
</head>
<body>
<table width="600" border="1">
<tr>
<th scope="row">表格行1</th>
<td> </td>
</tr>
<tr>
<th scope="row">表格行2</th>
<td> </td>
</tr>
<tr>
<th scope="row">表格行3</th>
<td> </td>
</tr>
<tr>
<th scope="row">表格行4</th>
<td> </td>
</tr>
<tr>
<th scope="row">表格行5</th>
<td> </td>
</tr>
<tr>
<th scope="row">表格行6</th>
<td> </td>
</tr>
</table>
</body>
</html>
content_filter_selector.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内容过滤选择器示例</title>
<style type="text/css">
table{
border-collapse:collapse;
}
table, td, th{
border:1px solid black;
}
body,td,th {
font-size: 9pt;
}
</style>
<script type="text/javascript" src="../jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("td:contains('张')").css("background","#FFC"); //将文字中含张的背景设置为淡黄
$("td:empty").css("background","#060"); //单元格中不包含内容的颜色,也不包含 空格的空单元格
$("td:has(p)").css("background","#9F0"); //单元格中包含子元素<p>的颜色
$("td:parent").css("color","#060"); //单元格中包含文本的前景色
});
</script>
</head>
<body>
<table width="600" border="1">
<tr>
<td>张三丰</td>
<td>何足道</td>
<td>觉远大师</td>
</tr>
<tr>
<td>常敬之</td>
<td>张翠山</td>
<td>天鹰教</td>
</tr>
<tr>
<td>张五侠</td>
<td> </td>
<td>金毛狮王</td>
</tr>
<tr>
<td>张大千</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>丁乐然</td>
<td><p>丁春秋</p>
<p>有名的江湖民间高手</p></td>
<td><p>丁不四</p>
<p>江湖闲散人员,喜欢胡乱杀人,遇即避之。</p></td>
</tr>
<tr>
<td>张秋山</td>
<td>李秋水</td>
<td>颜不四</td>
</tr>
</table>
</body>
</html>
hidden_filter_selector.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可见性过滤选择器</title>
<style>
/*定义div的外观*/
div {
width: 70px;
height: 40px;
background: #ee77ff;
margin: 5px;
float: left;
}
span {
display: block;
clear: left;
color: #060;
}
/*让页面元素具有隐藏的效果*/
.starthidden {
display: none;
}
body,td,th {
font-size: 9pt;
}
</style>
<script type="text/javascript" src="../jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
//在一些浏览器中,隐藏元素也包含 <head>、<title>、<script>等元素
//获取隐藏元素但排除<script>
var hiddenEls = $("body").find(":hidden").not("script");
$("span:first").text("找到" + hiddenEls.length + "个隐藏元素");
//$("div:hidden").show(3000); //动画的显示隐藏元素
$("span:last").text("找到" + $("input:hidden").length + "个表单隐藏域");
//为可见的按钮元素关联事件处理代码
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
//为按钮关联事件处理代码,显示隐藏页面元素
$("button").click(function () {
$("div:hidden").show("fast");
});
});
</script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">隐藏的元素</div>
<div></div>
<div class="starthidden">隐藏的页面元素</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span> </span>
<button>显示隐藏元素</button>
</body>
</html>
$("#div1 > p") 查找div1的元素中的子标签为p的元素 只查找一代
$("#div1 p") 查找div1的元素中的子标签为p的所有 元素(包括孙代...