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实现星星打分效果的方法
Jul 05 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
Angular的事件和表单详解
Dec 26 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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
多文件上载系统完整版
2006/10/09 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
jquery replace方法去空格
2017/05/08 jQuery
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
留学推荐信范文
2014/05/10 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2014年人大工作总结
2014/12/10 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers