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

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

 更新时间：2013年04月24日 10:17:33   投稿：jingxian  
jQuery选择器的强大不仅在于选择器支持基本的css选择符，还支持很多CSS的伪类选择符，甚至可以自定义选择符

   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>

运行效果如下:

  1    

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

2

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

  1. 向上面那样直接给出选择的位置，但是这里注意，这个位置是以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>

效果:

3

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

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

复制代码 代码如下:

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

效果:

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>:

复制代码 代码如下:

第一个：<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>


效果:

   z11111111111111111111111

自定义伪类选择符

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

相关文章

  • 使用jquery获取url以及jquery获取url参数的实现方法

    使用jquery获取url以及jquery获取url参数的实现方法

    下面小编就为大家带来一篇使用jquery获取url以及jquery获取url参数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery的animate函数学习记录

    jQuery的animate函数学习记录

    jQuery.animate的每种动画过渡效果都是通过easing函数实现的，下面是自己研究之后对其的基本认识
    2014-08-08
  • jQuery 处理网页内容的实现代码

    jQuery 处理网页内容的实现代码

    改变页面内容应该算是Javascript最常用的功能，这包括更改已经存在的页面元素或者添加新的HTML元素。
    2010-02-02
  • jQuery获取选中单选按钮radio的值

    jQuery获取选中单选按钮radio的值

    本文给大家分享两段实例代码给大家讲解jquery获取选中单选按钮radio的值，非常不错，具有参考借鉴价值，一起看看吧
    2016-12-12
  • jquery显示和隐藏div特效实例

    jquery显示和隐藏div特效实例

    jquery显示和隐藏div特效的实例代码，需要的朋友可以参考一下
    2013-02-02
  • jQuery实现提示密码强度的代码

    jQuery实现提示密码强度的代码

    本文给大家介绍的是一个非常常见的功能，在输入密码的时候提示密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。
    2015-07-07
  • jQuery中on()方法用法实例详解

    jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下
    2015-02-02
  • jQuery调取jSon数据并展示的方法

    jQuery调取jSon数据并展示的方法

    这篇文章主要介绍了jQuery调取jSon数据并展示的方法,实例分析了jQuery调用json数据及展示的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • jquery更改元素属性attr()方法操作示例

    jquery更改元素属性attr()方法操作示例

    这篇文章主要介绍了jquery更改元素属性attr()方法,结合实例形式简单分析了jquery更改元素属性attr()方法基本功能、语法及相关使用技巧,需要的朋友可以参考下
    2020-05-05
  • JQuery显示隐藏DIV的方法及代码实例

    JQuery显示隐藏DIV的方法及代码实例

    这篇文章主要介绍了JQuery显示隐藏DIV的方法及代码实例,本文讲解了载入时隐藏、动态隐藏和显示两部分内容,需要的朋友可以参考下
    2015-04-04

最新评论