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插件之validation插件
Mar 29 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jquery实现轮播图特效
Apr 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
PHP的可变变量名的使用方法分享
2012/02/05 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
python验证码识别的示例代码
2017/09/21 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
python查看模块安装位置的方法
2018/10/16 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
J2EE中常用的名词进行解释
2015/11/09 面试题
企业门卫岗位职责
2013/12/12 职场文书
经销商会议欢迎词
2014/01/11 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers