自定义选择符

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. samba配置只读共享

    编辑smb.conf 1.在[global]中 找到 security = 将其改为 security = share 2. 在文件中加入自定义的共享目录 [attachment] path=/dat ...

  2. 【Log4j】 log4j.properties 使用

    一.参数意义说明 输出级别的种类 ERROR.WARN.INFO.DEBUG ERROR 为严重错误 主要是程序的错误 WARN 为一般警告,比如session丢失 INFO 为一般要显示的信息,比如 ...

  3. Func系列4：其他功能

    非Python API接口支持 Func通过非Python API实现远程调用,目的是为第三方工具提供调用及返回接口.Func使用func-transmit命令来实现,支持YAML.JSON格式,实现 ...

  4. 在Visual Studio里配置及查看IL（转载）

    原文地址:http://www.myext.cn/other/a_25162.html 在之前的版本VS2010中,在Tools下有IL Disassembler(IL中间语言查看器),但是我想直接集 ...

  5. System.Data.SqlClient.SqlException.Number的所有错误值列表

    在系统数据库(master或msdb或model)的架构(sys)的视图(messages)中: SELECT [message_id]      ,[language_id]      ,[seve ...

  6. 利用NTFS权限与虚拟目录，在IIS 6.0的默认FTP站点中做用户隔离。

    默认FTP站点为不隔离用户站点,利用NTFS权限设置,达到仅能访问指定目录效果. 是否允许匿名连接 FTP站点主目录:站点范围内有没有用户需要上传,有的话,要勾选“写入”:具体用户使用NTFS还给予写 ...

  7. 106. Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  8. 删除SQL server 实例

    在网上找到下面几种方法,本人使用的是第一种,很实用. 1.删除 SQL Server 的特定实例若要删除 SQL Server 的某个特定实例,请按照以下步骤操作: 找到并删除%drive%:\\Pr ...

  9. TMS320C54x系列DSP的CPU与外设——第1章　绪论

    第1章 绪论 TMS320C54x DSP是TMS320系列DSP产品中的定点数字信号处理器.C54x DSP满足了实时嵌入式应用的一些要求,例如通信方面的应用. C54x的中央处理单元(CPU)具有 ...

  10. flash bulider 生成app无法安装在xcode模拟器上

    使用flash bulider开发app在ios模拟器上运行,出现以下错误 错误提示是isb与当前设备的osx不符合.当前使用airsdk版本是4.0,xcode5.1.1. 查看了air13sdk的 ...