自定义选择符

JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符，注意，只要可能，jQuery就会使用浏览器原生的DOM选择符引擎去查找元素。但在使用自定义选择符的时候，就无法使用速度最快的原生方法了。因此，在能够使用原生方法的情况下，就不要频繁地使用自定义选择符，以确保性能

自定义选择符通常跟在一个CSS选择符后面，基于已经选择的元素集的位置来查找元素。自定义选择符的语法与CSS中的伪类选择符语法相同，即选择符以冒号（:）开头。例如，我们想要从带有horizontal类的<div>集合中选择第2项，那么应该使用下面的代码：$('div.horizontal:eq(1)') 

注意，因为JavaScript数组采用从0开始的编号方式，所以eq(1)取得的是集合中的第2个元素。而CSS则是从1开始的，因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div元素

    每隔一行为表格添加样式

jQuery库中的两个十分有用的自定义选择符是:odd和:even，下面的代码展示的是分别为偶数行和奇数行添加背景颜色，不过要注意的是因为一次性取出来的是所有的表格的行，所以两个表格行的背景颜色显示会不一样。解决这个问题的一种方法是使用:nth-child()选择符。这个选择符相对于元素的父元素而非当前选择的所有元素来计算位置，它可以接受数值、odd或even作为参数

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        tr {

            background-color: #fff;

        }

        .alt {

            background-color:#b6ff00;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script>

        $(document).ready(function () {

            $('tr:even').addClass('alt'); //even匹配所有索引值为偶数的元素，从 0 开始计数

            //$('tr:odd').addClass('alt'); //odd匹配所有索引值为偶数的元素，从 0 开始计数

            //$('tr:nth-child(odd)').addClass('alt');  //nth-child匹配其父元素下的第N个子或奇偶元素

        });

    </script>

</head>

<body>

    <h2>Shakespeare's Plays</h2>

    <table>

        <tr>

            <td>As You Like It</td>

            <td>Comedy</td>

            <td></td>

        </tr>

        <tr>

            <td>All's Well that Ends Well</td>

            <td>Comedy</td>

            <td>1601</td>

        </tr>

        <tr>

            <td>Hamlet</td>

            <td>Tragedy</td>

            <td>1604</td>

        </tr>

        <tr>

            <td>Macbeth</td>

            <td>Tragedy</td>

            <td>1606</td>

        </tr>

        <tr>

            <td>Romeo and Juliet</td>

            <td>Tragedy</td>

            <td>1595</td>

        </tr>

        <tr>

            <td>Henry IV, Part I</td>

            <td>History</td>

            <td>1596</td>

        </tr>

        <tr>

            <td>Henry V</td>

            <td>History</td>

            <td>1599</td>

        </tr>

    </table>

    <h2>Shakespeare's Sonnets</h2>

    <table>

        <tr>

            <td>The Fair Youth</td>

            <td>1–126</td>

        </tr>

        <tr>

            <td>The Dark Lady</td>

            <td>127–152</td>

        </tr>

        <tr>

            <td>The Rival Poet</td>

            <td>78–86</td>

        </tr>

    </table>

</body>

</html>

代码

基于上下文内容选择元素

   假设出于某种原因，我们希望突出显示提到任何一种Henry游戏的所有表格单元。为此，我们所要做的就是在样式表中添加一个声明了粗体和斜体文本的类（.highlight{fontweight:bold; font-style:italic; }），然后向jQuery代码中添加一行代码，其中使用的是:contains()选择符

$('td:contains(Henry)').addClass('highlight'); 

基于表单的选择符

自定义选择符并不局限于基于元素的位置选择元素。在操作表单时，jQuery的自定义选择符以及后来补充的CSS3选择符同样可以简化选择元素的任务

组合使用表单选择符可以更有针对性。例如，使用$('input[type= "radio"]:checked')可以选择所有选中的单选按钮，使用$('input[type= "password"],input[type="text"]:disabled')则可以选择所有密码输入字段和禁用的文本输入字段。可见，即便是使用自定义选择符，也可以按照基本的CSS语法来定义匹配的元素列表

JQuery基础教程：选择元素（中）的更多相关文章

  1. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

  2. 《jQuery基础教程(第四版)》学习笔记

    本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...

  3. 《jQuery基础教程》读书笔记

    最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...

  4. JQuery基础教程：选择元素（下）

    DOM遍历方法   利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情 ...

  5. JQuery基础教程：选择元素（上）

    jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素.子元素,等等.通过一 ...

  6. jquery 基础教程[温故而知新二]

    子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...

  7. JQuery基础教程：入门

    JQuery能做什么 JQuery在线手册 1.取得文档中的元素 如果不使用JavaScript库,遍历DOM(Document Object Model,文档对象模型)树,以及查找HTML文档结构中 ...

  8. Jquery基础教程第二版学习记录

    本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...

  9. JQuery基础教程：事件（上）

    在页面加载后执行任务      之前我们已经知道了$(document).ready()是jQuery基于页面加载执行任务的一种主要方式,但是要知道原生的window.onload事件也可以实现相同的 ...

随机推荐

  1. 打印Java main方法执行的命令参数代码

    RuntimeMXBean bean = ManagementFactory.getRuntimeMXBean(); List<String> jvmArgs = bean.getInpu ...

  2. Newtonsoft.Json学习笔记

    Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库(下载地址http://json.codeplex.com/). 下面是Json序列化和反序列化的简单封装: /// & ...

  3. c#.net 访问SQL SERVER 时提示：尝试读取或写入受保护的内存。这通常指示其他内存已损坏

    解决方法: 管理员身份运行 cmd ->  输入 netsh winsock reset 然后重启电脑. 引用 :http://blog.csdn.net/laijieyao/article/d ...

  4. bzoj3533: [Sdoi2014]向量集

    Description 维护一个向量集合,在线支持以下操作:"A x y (|x|,|y| < =10^8)":加入向量(x,y);" Q x y l r (|x| ...

  5. android学习笔记37——Menu资源

    Menu菜单资源 android应用推荐使用XML来定义菜单,其可提供更好的解耦方式. 菜单资源通常位于res/menu文件夹下,其菜单根元素为<menu.../>,menu元素下可包含子 ...

  6. NOIP第7场模拟赛题解

    NOIP模拟赛第7场题解: 题解见:http://www.cqoi.net:2012/JudgeOnline/problemset.php?page=13 题号为2221-2224. 1.car 边界 ...

  7. Android SDK 4.0.3 开发环境配置及运行

    最近又装了一次最新版本的ADK环境 目前最新版是Android SDK 4.0.3 本文的插图和文本虽然是Android2.2的 步骤都是一样的,如果安装的过程中遇到什么问题,可以留言,我会尽快回复! ...

  8. 《挑战程序设计竞赛》 4.1.1 矩阵 P286

    想写几篇挑战的感悟,也有助于自己理解这本书.但这上面大多贴的是书上的代码,主要是为了用的时候后直接复制就好了,这样就很方便了,就相当于黑盒模板了. 1.线性方程组 /** \brief 高斯消元法 * ...

  9. [物理学与PDEs]第4章 反应流体力学

    [物理学与PDEs]第4章第1节 引言 [物理学与PDEs]第4章第2节 反应流体力学方程组 2.1 粘性热传导反应流体力学方程组 [物理学与PDEs]第4章第2节 反应流体力学方程组 2.2 反应流 ...

  10. 值不能为 null 或为空。参数名: linkText

    “/”应用程序中的服务器错误. 值不能为 null 或为空.参数名: linkText 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的 ...