锋利Jquery 第六天 --- jquery 过滤选择器
锋利Jquery 第五天 --- jquery 过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 过滤选择器</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<style type="text/css">
div,span,p
{
width:140px; height:140px;
margin:5px;
background:#aaa;
border: solid 1px #000;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini
{
width:55px; height:55px;
background-color:#aaa;
font-size:12px;
}
div.hide
{
display:none
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
//1基本过滤选择器
//改变所有div中的第一个div元素的背景色
$("div:first").css("background","#eeccdd");
首先用标签(元素)选择器 匹配所有的div 元素。在用:first 过滤选择器选择第一个div 元素。并用.css()改变它的背景色
:first 匹配找到的第一个元素 返回的是Element 如：查找表格的第一行。
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$('tr:first') return 的是： [<tr><td>Header1</td></tr>]
//改变所有div中的最后一个div元素的背景色
$("div:last").css("background","#aabbcc");
有匹配第一个元素的。就会有匹配最后一个元素的 它是： ：last 过滤选择器 同上 原理一样
//改变class 不为one.的所有div 元素的背景色
$("div:not(.one)").css("background","bbeeff");
：not 过滤选择器有两种用法 如下：
1、：not (Selector) selector (Selector) : 用于筛选的选择器
查找与 给定选择器 相反的元素（去除所有与给定选择器匹配的元素） 返回 的是 array[Elements]
如：查找所有未选中的 input 元素
<input name="apple" />
<input name="flower" checked="checked" />
<input name 'brown' id ='bid'>
$(input:not(:checked)) 返回的是：[ <input name="apple" />,<input name 'brown' id ='bid'> ]
2、:not(expr) expr (String, DOMElement, Array<DOMElement>) : 一个表达式、一个元素或者一组元素 .删除 与 指定表达式匹配的元素
如：从p元素中删除 ID 为select 的的元素
<p>Hello</p><p id="selected">Hello Again</p>
$("p:not($("#selectd"))[0]") ; 返回的结果为：[ <p>Hello</p> ]
//改变索引值为偶数的div元素的背景色
$("div:even").css("background","yellow");
：even 过滤选择器 ； 匹配所有 索引值为偶数的 元素。 从0开始
//改变索引值为奇数的div元素的背景色
$("div:odd").css("background","blue");
：odd过滤选择器 ； 匹配所有 索引值为奇数的 元素。 从0开始
//改变索引值等于3的div元素的背景色
$("div:eq(3)").css("background","green");
：eq(index) 获取第 N 个元素。 index 是索引。元素在jQuery对象中的索引 。索引是从0开始的。
如：获取匹配的第二个元素
<p> This is just a test.</p> <p> So is this</p>
$("p:eq(1)") result :[ <p> So is this</p> ]
//改变索引值大于3的div元素的背景色（大于3，但不包含3）
$("div:gt(3)").css("background","red");
:gt(index) 匹配所有大于给定索引值的元素 .大于，但不包含 ,从 0 开始计数
如：查找第二第三行，即索引值是1和2，也就是比0大
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:gt(0)"); result: [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
//改变索引值小于3的div元素的背景色
$("div:lt(3)").css("background","#ddaacc");
:lt(index) 匹配所有小于给定索引值的元素 index (Number) : 从 0 开始计数
如：查找第一第二行，即索引值是0和1，也就是比2小
$("tr:lt(2)") result: [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
//改变所有标题元素的背景色
$(":header").css("background","#AAA");
如：给页面内所有标题加上背景色
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
$(":header").css("backgoun":"red");
result : [ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
//改变当前正在执行动画的元素背景色
$(":animated").css("background","#bbffaa");
:animated 匹配所有正在执行动画效果的元素 Array<Element>
<button id="run">Run</button><div></div>
只有对不在执行动画效果的元素执行一个动画特效
$("#run").click(function(){
$("div:not(:animatd)").animate({left:"+=20"},1000);
});
});
</script>
</head>
<body>
<h3 align="center">过滤选择器</h3>
<div class="one" id="one">
class等于one,id等于one
<div class="mini">class等于mini</div>
</div>
<div class="one" id="two" title="test">
class="one" id="two" title="test" 的DIV
<div class="mini" title="ohter">class为mini,title="ohter"</div>
<div class="mini" title="test">class为mini,title="test"</div>
</div>
<div class="one">
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini"></div>
</div>
<div class="mini">
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini" title="tesst">class等于mini,title="tesst"</div>
</div>
<div style="display:none" class="one">style="display:none" class="one"的div</div>
<div class="hide">class="hide"的div</div>
<div>包含input的type为"hidden"的div<input type="hidden" size="8" /></div>
<span id="mover">正在执行动画的span元素</span>
</body>
</html>
浙公网安备 33010602011771号