• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery 关于伪类选择符的使用说明

jQuery 关于伪类选择符的使用说明

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jquery,伪类,选择符等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

   jQuery选择器的强大不仅在于选择器支持基本的css选择符,还支持很多CSS的伪类选择符,甚至可以自定义选择符,下面让我们来看看一些伪类选择符

  :nth-child的用法
         nth-child是一个css3伪类选择符,在jQuery中被实现了,在Jquery API中对nth-child的定义是:”匹配其父元素下的第N个子或奇偶元素“。读着感觉有点绕口,下面让我们通过例子来说明:

  1    

API定义中的匹配其父辈指的是所选元素的父元素不同,则分开选择。在上面例子中虽然一共选择18个<li>但是这18<li>分属于2个不同的<ul>,所以会选择两个.如果将其放入同一个<ul>中,如果放入同一个<ul>执行上面代码,则:

2

理解了上面匹配父辈元素,下面来说说这个选择符参数的用法.

    向上面那样直接给出选择的位置,但是这里注意,这个位置是以1为开始的,而不是0 n个倍数选择法,比如可以使3n+1,-3n+1,4n,等,匹配所有页面上存在的n的倍数

例子:

3

可见相对应的元素都被匹配

   3.还有一种用法是我们熟知的odd和even,就是奇数和偶数,如下:

4

 

:first-child&last-child

   从上面的nth-child可以看到”匹配父类下的“含义,first-child和last-child也同样是这样.它们可以看做nth-child的封装:

first-child和nth-child(1)等价,这里就不多说了.

而first-child目前我还找不到等价的nth-child表达式,匹配父类下的最后一个子元素:
效果:

5

:input并不只是匹配input

   个选择符我想大家都比较熟悉,但是要注意,input伪类选择符不只是匹配<input>标签,还会匹配<select>和<textarea>:

</select>
第三个:<textarea></textarea>
<script type="text/javascript">
    alert($(":input").length);//alert 3
</script>   

 可以看到,不光<input>被选择,<select>和<textarea>也被选择了

伪类选择符可以嵌套

   通常情况下,我们可以通过嵌套伪类选择符来达到我们需要的效果,伪类选择符,如下:

    <script type="text/javascript">
        $("li:not(:first):not(:last)").css("background-color", "blue");
    </script>

效果:

   z11111111111111111111111

   可见,除了第一个和最后一个li,其它都被选择.当然,嵌套是有层数限制的,具体的次数我就不太清了(各位高手记得麻烦告诉我下),反正够你进行不是变态的使用:-)

自定义伪类选择符

   jquery还提供给我们扩展原有选择符的方式,可以让我们根据自己的需要自定义选择符,下面通过一个有实际意义的例子看如何做到:

   在我们使用jquery的serialize方法将当前表单中的元素提交到服务器时,总是会选上asp.net的ViewState(<input type=”hidden” />)这无疑浪费了好多资源,我们通过一个扩展的伪类选择符看如何不选择它:


    <script type="text/javascript">
        $.expr[":"].noViewState = function(element) {
            return !$(element).attr("id") === "_VIEWSTATE";
        }
        alert($(":input:noViewState").size());//alert 0 ViewState has not been choosen
    </script>

    </form>   

通过$.expr的方式对伪类选择符进行扩展,可以看出,上面的选择符使用:noViewState后,viewState没有被选择. 

小结:

    jQuery的伪类选择符是很强大的一项功能,它内置了很多种方便我们选择的选择符,我们可以嵌套甚至扩展这些伪类选择符.这让我们的js编程更加愉悦了许多.

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16使用jQuery仿苹果官网焦点图特效
  • 2017-08-16jqPaginator结合express实现分页展示内容效果第1/2页
  • 2017-08-16聊一聊jQuery插件uploadify使用方法
  • 2017-08-16jquery中ajax学习笔记3
  • 2017-08-16基于jquery扩展漂亮的CheckBox(自己编写)
  • 2017-08-16jquery中radio checked问题
  • 2017-08-16jquery 判断selection range 是否在容器中的简单实例
  • 2017-08-16jQuery实现根据类型自动显示和隐藏表单
  • 2017-08-16jQuery+jsp实现省市县三级联动效果(附源码)
  • 2017-08-16Jquery插件实现点击获取验证码后60秒内禁止重新获取

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
    • jquery实现页面百叶窗走马灯式翻滚显示效果的方法
    • 使用jQuery实现input数值增量和减量的方法
    • jQuery实现拖拽页面元素并将其保存到cookie的方法
    • jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
    • Bootstrop实现多级下拉菜单功能
    • jQuery简单入门示例之用户校验demo示例
    • jQuery里filter()函数与find()函数用法分析
    • myeclipse安装jQuery插件的方法
    • jquery ajax例子返回值详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有