脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery位置选择器

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

 更新时间：2019年06月28日 10:55:12   作者：Yeoman92  
这篇文章主要介绍了jQuery位置选择器用法,结合实例形式分析了jQuery位置选择器的功能、用法及相关操作注意事项,需要的朋友可以参考下

本文实例讲述了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常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • jQuery3.0中的buildFragment私有函数详解

    jQuery3.0中的buildFragment私有函数详解

    在 jQuery3.0中，buildFragment 是一个私有函数，用来构建一个包含子节点 fragment 对象。下文给大家介绍jQuery3.0中的buildFragment私有函数详解，对jquery3.0 buildfragment相关知识感兴趣的朋友一起学习吧
    2016-08-08
  • jquery改变disabled的boolean状态的三种方法

    jquery改变disabled的boolean状态的三种方法

    改变disabled的boolean状态，下面为大家介绍三种比较不错的方法，大家可以参考下
    2013-12-12
  • jquery ui对话框实例代码

    jquery ui对话框实例代码

    在网页设计中，不论是为了减少于由于页面跳转而带来的不友好用户体验，还是为了维持桌面应用程序的使用习惯，对话框的设计都是不可或缺的。
    2013-05-05
  • jQuery判断元素是否显示 是否隐藏的简单实现代码

    jQuery判断元素是否显示 是否隐藏的简单实现代码

    下面小编就为大家带来一篇jQuery判断元素是否显示 是否隐藏的简单实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 基于jQuery实现滚动刷新效果

    基于jQuery实现滚动刷新效果

    这篇文章主要为大家详细介绍了基于jQuery实现滚动刷新效果，使用Ajax获取后台数据更新前端页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery解决添加元素后不执行原有事件的方法

    jQuery解决添加元素后不执行原有事件的方法

    我们有时使用jQuery新加元素后，会出现新元素不会执行一部分原有的事件函数。本文主要介绍了jQuery解决添加元素后不执行原有事件的方法，感兴趣的同学可以了解一下
    2021-11-11
  • jQuery 遍历map()方法详解

    jQuery 遍历map()方法详解

    大家都知道map()方法主要用来遍历操作数组和对象，这篇文章将给大家详细介绍关于jQuery遍历map()方法的内容，文章给出了详细的示例代码，对大家的理解和学习很有帮助，有需要的朋友们下面来一起学习学习吧。
    2016-11-11
  • 自己动手写的jquery分页控件(非常简单实用)

    自己动手写的jquery分页控件(非常简单实用)

    最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了
    2015-10-10
  • JQuery实现带排序功能的权限选择实例

    JQuery实现带排序功能的权限选择实例

    这篇文章主要介绍了JQuery带排序功能的权限选择,涉及jQuery鼠标事件及json数据处理的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 基于jQuery选择器之表单对象属性筛选选择器的实例

    基于jQuery选择器之表单对象属性筛选选择器的实例

    下面小编就为大家带来一篇jQuery选择器之表单对象属性筛选选择器实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论