自定义选择符

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. WCF学习心得----（五）生成客户端

    WCF学习心得----(五)生成客户端 1.    通过Svcutil.exe工具直接生成客户端 1.1     将服务承载于IIS上 1.1.1 在IIS中新建网站,所示效果如下图: 1.1.2   ...

  2. HackerRank "Favorite sequence"

    Typical topological sorting problem .. why is it 'difficult'? #include <iostream> #include < ...

  3. 【SVN】win7 搭建SVN服务器

    介绍 SVN分为客户端和服务端: 服务端: 常用的主要有2个,分别为: 1. VisualSvn Server:免费,集成了Subsersion和Apache,安装使用非常简单: 2. SubVers ...

  4. bzoj2734 集合选数

    Description <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所有满足以 下条件的子集:若 x 在该子集中,则 2x 和 3x 不能在该子集中 ...

  5. android学习笔记38——样式和主题

    Style.Theme 样式和主题资源都是用于android应用的美化操作. 样式:一组格式的集合,可重复使用. android的样式资源存放与res/values文件夹下,其根元素为<reso ...

  6. 25. Reverse Nodes in k-Group

    Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. If ...

  7. SQL Server 2012 数据库备份

    既能备份到网络中的共享文件夹中,也能备份到本地 USE [AdventureWorks2012] GO /****** Object: StoredProcedure [dbo].[pr_BatchB ...

  8. 黄聪：查看mysql数据库真正的data目录

    终于找到了mysql数据库data目录在哪里! 用show variables like 'datadir',可查看真正的data目录 原文:http://blog.csdn.net/dmz1981/ ...

  9. Java heap dump触发和分析(转)

    为了分析java应用的内存泄漏,使用thread dump往往解决不了问题.使用jstat[eg:jstat-gcutil pid 1000 5]工具查看运行的java应用的heap size,per ...

  10. SDS查看部署在集成TOMCAT服务器中的项目目录结构