jQuery位置选择器用法实例分析


Posted in jQuery onJune 28, 2019

本文实例讲述了jQuery位置选择器用法。分享给大家供大家参考,具体如下:

位置选择器

jQuery同样也允许我们利用元素所在位置来获取所需组件

位置选择器语法如下:

  • "$基本选择器:位置选择器"

位置选择器种类

常用位置选择器的用法

  • 选择第一个
    • 格式:$("selector:first");
  • 选择最后一个
    • 格式:$("selector:last")
  • 选择奇数
    • 格式:$("selector:odd")
  • 偶数行
    • 格式:$("selector:even")
  • 获取指定位置
    • 格式:$("selector:eq(n)")
  • 大于指定位置
    • 格式:$("selector:gt(n)")
  • 小于指定位置
    • 格式:$("selector:lt(n)")

如操作:

  • 文档中出现的第一个li
  • 文档中最后一次出现的div
  • 所有奇数段落
  • 所有偶数个文本框
  • 第三个超链接
  • 第三个及之后出现的li
  • 第一个段落
<script>
  $(function(){
    //利用:first获取组件
    //$("li:first").css("border" , "3px dotted lightblue");
    //$("div:last").css("border" , "3px dotted orange");
    //奇数使用:odd ,在jQuery元素的索引是从0开始的,所以在我们生活中出现的第一个元素为"偶数"
    //$("p:odd").css("border" , "3px dotted orange");
    //偶数使用even
    //$("input:even").css("border" , "3px dotted orange");
    //利用eq精确获取指定位置的组件,下标从0开始
    //$("a:eq(2)").css("border" , "3px dotted orange");
    //利用gt获取从指定位置之后的所有元素
    //$("li:gt(2)").css("border" , "3px dotted orange");
    //利用lt获取指定位置之前的元素
    $("p:lt(1)").css("border" , "3px dotted orange");
  })
</script>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
基于jquery实现二级联动效果
Mar 30 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery层叠选择器用法实例分析
Jun 28 #jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 #jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 #jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 #jQuery
You might like
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
名片管理系统python版
2018/01/11 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
python openssl模块安装及用法
2020/12/06 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
《珍珠泉》教学反思
2014/02/20 职场文书
超市收银员岗位职责
2015/04/07 职场文书
人与自然的观后感
2015/06/18 职场文书
防溺水主题班会教案
2015/08/12 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL