jQuery获取匹配(第一个,最后一个)元素的方法总结

本文转载于:猿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 >

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());
});

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 " );
});

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

猜你喜欢

转载自www.cnblogs.com/qianduanwriter/p/11749002.html
今日推荐