本文转载于:猿2048网站→jQuery获取匹配(第一个,最后一个)元素的方法总结
1、:first
匹配找到的第一个元素
返回值 Element
示例:
$(document).ready(function() {
var eleArr = $("tr:first"); //查找表格的第一行
for (var i = 0; i < eleArr.length; i++) {
var ele = $(eleArr[i]);
if (ele)
alert(ele.html());
}
});
文档片段:
<
table
>
< tr >< td > Header 1 </ td ></ tr >
< tr >< td > Value 1 </ td ></ tr >
< tr >< td > Value 2 </ td ></ tr >
</ table >
< tr >< td > Header 1 </ td ></ tr >
< tr >< td > Value 1 </ td ></ tr >
< tr >< td > Value 2 </ td ></ tr >
</ table >
2、:last
匹配找到的最后一个元素
返回值 Element
示例:
$(document).ready(function() {
var eleArr = $("tr:last"); //查找表格的最后一行
for (var i = 0; i < eleArr.length; i++) {
var ele = $(eleArr[i]);
if (ele)
alert(ele.html());
}
});
3、:not(selector)
去除所有与给定选择器匹配的元素
在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a))
返回值 Array<Element>
参数
selector (Selector) : 用于筛选的选择器
示例:
$(document).ready(function() {
var eleArr = $("input:not(:checked)"); //查找所有未选中的input元素
for (var i = 0; i < eleArr.length; i++) {
var ele = $(eleArr[i]);
if (ele)
alert(ele.val());
}
});
4、:even
匹配所有索引值为偶数的元素,从 0 开始计数
返回值 Array<Element>
示例:
$(document).ready(function() {
var eleArr = $("tr:even"); //查找表格的1、3、5行(即索引值0、2、4)
for (var i = 0; i < eleArr.length; i++) {
var ele = $(eleArr[i]);
if (ele)
alert(ele.html());
}
});
5、:odd
匹配所有索引值为奇数的元素,从 0 开始计数
返回值 Array<Element>
示例:
$(document).ready(function() {
var eleArr = $("tr:odd"); //查找表格的2、4、6行(即索引值1、3、5)
for (var i = 0; i < eleArr.length; i++) {
var ele = $(eleArr[i]);
if (ele)
alert(ele.html());
}
});
6、:eq(index)
匹配一个给定索引值的元素
返回值 Element
参数
index (Number) : 从 0 开始计数
示例:
$(document).ready(
function
() {
var ele = $( " tr:eq(1) " ); // 查找第二行
if (ele)
alert(ele.html());
});
var ele = $( " tr:eq(1) " ); // 查找第二行
if (ele)
alert(ele.html());
});
7、:gt(index)
匹配所有大于给定索引值的元素
返回值 Array<Element>
参数
index (Number) : 从 0 开始计数
示例:
$(document).ready(function() {
var eleArr = $("tr:get(0)"); //查找索引值比0大的行
for (var i = 0; i < eleArr.length; i++) {
var ele = $(eleArr[i]);
if (ele)
alert(ele.html());
}
});
8、:lt(index)
匹配所有小于给定索引值的元素
返回值 Array<Element>
参数
index (Number) : 从 0 开始计数
示例:
$(document).ready(function() {
var eleArr = $("tr:lt(2)"); //查找索引值比2小的行
for (var i = 0; i < eleArr.length; i++) {
var ele = $(eleArr[i]);
if (ele)
alert(ele.html());
}
});
9、:header
匹配如 h1, h2, h3之类的标题元素
返回值 Array<Element>
示例:
//
给页面内所有标题加上背景色
$(document).ready( function () {
$( " :header " ).css( " background " , " Red " );
});
$(document).ready( function () {
$( " :header " ).css( " background " , " Red " );
});
10、:animated
匹配所有正在执行动画效果的元素
返回值 Array<Element>
示例:
//只有对不在执行动画效果的元素执行一个动画特效
$("#run").click(function() {
$("div:animated").toggleClass("colored"); //匹配所有正在执行动画效果的元素
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
文档片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div
{
background: yellow;
border: 1px solid #AAA;
width: 80px;
height: 80px;
margin: 5px;
float: left;
}
div.colored
{
background: green;
}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<button id="run">
Run</button>
<div>
</div>
<div id="mover">
</div>
<div>
</div>
</body>
更多专业前端知识,请上 【猿2048】www.mk2048.com