jQuery选择器(三)

三、基本过滤选择器

1、:first

选择器：$('E:first')  //其中E是DOM元素，:first是过滤

描述：选取第一个元素

返回：单个元素

示例：改变表页面中最后一个input元素的边框属性。

<script type="text/javascript">
$(document).ready(function(){
$('input:first').css('border','1px solid red');
});
</script>

2、:last

选择器：$('E:last')  //其中E是DOM元素，:last是过滤

描述：选取最后一个元素

返回：单个元素

示例：改变表单中第一个input元素的边框属性。

<script type="text/javascript">
$(document).ready(function(){
$('input:last').css('border','1px solid red');
});
</script>

3、:not(selector)

选择器：$("E:not(selector)")  //E表示有效果的DOM元素，而selector是用来筛选的选择器

描述：去除所有与给定选择器匹配的元素。

返回：集合元素

示例：改变除fieldset下的input的所有input元素边框属性

<script type="text/javascript">
$(document).ready(function(){
$('input:not(fieldset input)').css('border','1px solid red');
});
</script>

4、:even

选择器：$("E:even")  //E指所有有效的DOM元素，:even是指元素的索引值为偶数

描述：选取索引值为偶数的所有元素。其中索引值从0开始计算，也就是指0，2，4...

返回：集合元素

示例：改变页面中所有索引值为偶数的input元素的边框属性。也就是input索引值为0，2，4，6等偶数的就会改变边框属性

<script type="text/javascript">
$(document).ready(function(){
$('input:even').css('border','1px solid red');
});
</script>

5、:odd

选择器：$("E:odd"):odd和:even其实很相似，只不过:even的索引值是偶数，而:odd的索引值为奇数而以。

描述：选取索引值是奇数的所有元素，同样索引值从0开始计算，即1，3，5，7....

返回：集合元素

示例：改变页面中索引值为奇数的input元素。

<script type="text/javascript">
$(document).ready(function(){
$('input:odd').css('border','1px solid red');
});
</script>

6、:eq(index)

选择器：$("E:eq(index)")  //其中E为有效DOM元素，:eq(index)是指定一个索引值元素

描述：选取索引值等于index的元素，其中index从0开始计算

返回：单个元素

示例：改变页面中input的索引值为1的元素边框属性

<script type="text/javascript">
$(document).ready(function(){
$('input:eq(1)').css('border','1px solid red');
});
</script>

7、:gt(index)

选择器：$("E:gt(index)")  //其中E为有效DOM元素，:gt(index)是指定一个索引值元素

描述：选取索引值大于index的元素，其中index从0开始计算

返回：集合元素

示例：改变页面中input的索引值大于1的元素边框属性

<script type="text/javascript">
$(document).ready(function(){
$('input:gt(1)').css('border','1px solid red');
});
</script>

8、:lt(index)

选择器：$("E:lt(index)")  //其中E为有效DOM元素，:lt(index)是指定一个索引值元素

描述：选取索引值小于index的元素，其中index从0开始计算

返回：集合元素

示例：改变页面中input的索引值小于1的元素边框属性

<script type="text/javascript">
$(document).ready(function(){
$('input:lt(1)').css('border','1px solid red');
});
</script>

9、:header

选择器：$(":header") //:heaer是指页面所有标题：h1~h6

描述：选取页面所有的标题元素h1~h6

返回：集合元素

示例：改变页面所有的标题边框属性

<script type="text/javascript">
$(document).ready(function(){
$(':header').css('border','1px solid red');
});
</script>

10、:animated

选择器：$("E:animated") //E为任何有效的DOM元素，:animated为当前正在执行动画的元素

描述：选取当前正在执行动画的所有元素

返回：集合元素

示例：改变页面中没有执行动画的所有input元素的边框属性

<script type="text/javascript">
$(document).ready(function(){
$('input:not(:animated)').css('border','1px solid red');
});
</script>

 

 

jQuery选择器(一)

jQuery选择器(二)

jQuery选择器(三)

jQuery选择器(四)