自定义选择符

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. 如何计算oracle数据库内存

    数据库内存设置: 项目 数据关系 单位 系统CPU n 个 物理内存Memory 假设4G物理内存 4*1024 MB memory_target 0.5*4*1024 0.5*Memory sga_ ...

  2. Android Wear(手表)开发 - 学习指南

    版权声明:欢迎自由转载-非商用-非衍生-保持署名.作者:Benhero,博客地址:http://www.cnblogs.com/benhero/ Android Wear开发 - 学习指南 http: ...

  3. Jar mismatch! Fix your dependencies的问题

    在开发Android项目的时候,有时需要引用多个项目作为library.在引用项目的时候,有时会出现“Jar mismatch! Fix your dependencies”错误. 这是因为两个项目的 ...

  4. js替换字符指定字符方法

    1.递归替换 function replaceChar(str, oldChar, newChar) { if (str.indexOf(oldChar) != -1) { str = str.rep ...

  5. 【jmeter】逻辑控制器

    JMeter中的Logic Controller用于为Test Plan中的节点添加逻辑控制器. JMeter中的Logic Controller分为两类:一类用来控制Test Plan执行过程中节点 ...

  6. 【shell】while与until循环

    while循环 #!/bin/bash i=1 s=0 while [ $i -le 100 ] do s=$(($s+$i)) ##变量运算 i=$(($i+1)) done echo " ...

  7. php接二进制文件

    PHP默认只识别application/x-www.form-urlencoded标准的数据类型. 因此,对型如text/xml 或者 soap 或者 application/octet-stream ...

  8. LVS包转发模型和调度算法(转)

    LVS简介 Internet的快速增长使多媒体网络服务器面对的访问数量快速增加,服务器需要具备提供大量并发访问服务的能力,因此对于大负载的服务器来 讲, CPU.I/O处理能力很快会成为瓶颈.由于单台 ...

  9. [vim]VIM快捷键整理

    转自:http://blog.csdn.net/ceven2010/article/details/7406341#comments 一.移动光标 1.左移h.右移l.下移j.上移k 2.向下翻页ct ...

  10. 通过xib创建View

    1 创建一个xib并使之与一个自定义的View相关联 2 在自定义的View中参考如下代码: - (id)initWithFrame:(CGRect)frame { self = [super ini ...