自定义选择符

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. 邮件发送工具类 SendMail.java

    package com.util; import org.apache.commons.mail.EmailException; import org.apache.commons.mail.Simp ...

  2. ORA-01109:数据库未打开

    ORA-01109:数据库未打开 在此之前做了这样一操作,在plsql创建了2表空间,由于装的是oracle精简版所以创建表空间大小超过4G就不能创建,然后我就手动把表空间给删除了,回收站也给删了,问 ...

  3. Android 检测网络连接状态

    Android连接网络的时候,并不是每次都能连接到网络,因此在程序启动中需要对网络的状态进行判断,如果没有网络则提醒用户进行设置. 首先,要判断网络状态,需要有相应的权限,下面为权限代码(Androi ...

  4. 构建VIM下的C++编程环境

    1.VIM配置 Vim强大的配置与功能,其来源基本上就两个地方:Vim插件以及Vim配置文件. Vim本身的系统配置文件夹是在/usr/share/vim/和/etc/vim/两个文件夹下.一般情况下 ...

  5. SIM卡里的文件

    SIM卡里的所有文件按树来组织:主文件MF(Master File)——每一块SIM卡只有一个唯一的主文件, 其他所有文件都是它的子孙, 主文件只有文件头,里面存放着整个SIM卡的控制和管理信息专用文 ...

  6. xss攻击和sq注入

    xss攻击跟SQL注入的原理还是挺简单的,都是利用web是使用字符串进行操作的原理,通过伪造分隔符或者结束符号,来让网页或者服务端来运行输入的代码 一般防御的方法就是在对一些分隔符进行转义,djang ...

  7. 【freemaker】之整合springMVC

    pom.xml文件 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncod ...

  8. SVN 主干(trunk)、分支(branch )、标记(tag)

    主干(trunk).分支(branch ).标记(tag) 在SVN中Branch/tag在一个功能选项中,在使用中也往往产生混淆. 在实现上,branch和tag,对于svn都是使用copy实现的, ...

  9. 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 ...

  10. TFS Build Error: CSC : fatal error CS0042: Unexpected error creating debug information file 'xxxx.PDB'

    CSC : fatal error CS0042: Unexpected error creating debug information file 'xxxx.PDB' -- 'c:\Builds\ ...