jQuery选择器(三)
来源:互联网 发布:恢复备份数据 编辑:程序博客网 时间:2024/06/05 17:31
三、基本过滤选择器
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选择器(四)
- JQuery选择器(三)过滤选择器
- Jquery三种选择器
- jQuery选择器(三)
- jQuery选择器(三)
- jquery(三)选择器
- jQuery-$选择器 学习笔记三
- Jquery选择器练习(三)
- jQuery的选择器(三)
- jQuery三种常见选择器
- jQuery(三)常规选择器
- jQuery选择器 过滤选择器(三.可见性过滤选择器)
- JQuery基础之(三)JQuery选择器
- JQuery三大选择器:(基本+层次+表单)选择器
- JQuery选择器(三)表单对象属性过滤选择器
- JQuery学习笔记3:选择器之三
- JQuery入门(三)-选择器1
- 带你学习Jquery(三):选择器
- jquery自学系列三:选择器(下)
- 人工智能-模式识别-机器学习-计算机视觉-----大牛博客地址及主要网站汇总
- onSubmit的使用
- 深入了解SQLServer系统数据库工作原理(转)
- mysql触发器
- SQL Server 常用跨库查询
- jQuery选择器(三)
- 华为UNIX培训
- spring的任务调度
- PyQt5+python3+pycharm开发环境配置
- 网页中插入能全屏播放swf,flv视频的播放器
- unity3d学习记录:解决点击NGUI穿透问题
- C语言——stdio.h
- EasyUI Datagrid 自定义列、Foolter及单元格编辑
- Delphi XE8实现移动端的消息推送(个推)