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


Posted in Javascript onApril 24, 2013

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

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

<div>
    <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    </ul>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <script type="text/javascript">
        $("li:nth-child(2)").css("background-color", "blue");
    </script>

运行效果如下:

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

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

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

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

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

例子:

<div>
    <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>    </ul>
    </div>
    <script type="text/javascript">
        $("li:nth-child(3n-1)").css("background-color", "blue");
    </script>

效果:

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

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

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

   <script type="text/javascript">
        $("li:nth-child(odd)").css("background-color", "blue");
    </script>

效果:

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

 

:first-child&last-child

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

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

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

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

:input并不只是匹配input

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

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

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

伪类选择符可以嵌套

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

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    </ul>
    <script type="text/javascript">
        $("li:not(:first):not(:last)").css("background-color", "blue");
    </script>

效果:

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

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

自定义伪类选择符

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

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

<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRWxo4mg/noF3+7k/L7nyw13HVnLQ==" />
</div>

    <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编程更加愉悦了许多.

Javascript 相关文章推荐
JS实现self的resend
Jul 22 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
原生JS实现幻灯片
Feb 22 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 #Javascript
Jquery实现三层遍历删除功能代码
Apr 23 #Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 #Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 #Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 #Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 #Javascript
js事件冒泡实例分享(已测试)
Apr 23 #Javascript
You might like
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
js模块加载方式浅析
2017/08/12 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
个人授权委托书
2014/04/03 职场文书
设计师求职信模板
2014/05/06 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
2016年元旦寄语
2015/08/17 职场文书
运动会广播稿50字
2015/08/19 职场文书
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers