jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似，当我们提到网络中元素之间的关系时，会使用类似描述家庭关系的术语，比如父元素、子元素，等等。通过一个简单的例子，可以帮助我们理解文档各元素构成的树形结构：

<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
</div>
</body>
</html>

这里，<html>是其他所有元素的祖先元素，换句话说，其他所有元素都是<html>的后代元素。<head>和<body>元素是<html>的子元素（但并不是它唯一的子元素）。因此除了作为<head>和<body>的祖先元素之外，<html>也是它们的父元素。 而<p>元素则是<div>的子元素（也是后代元素），是<body>和<html>的后代元素，是其他<p>元素的同辈元素

使用$()函数

    通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中，可以轻松地为jQuery对象绑定事件、添加漂亮的效果，也可以将多重修改或效果通过jQuery对象连缀到一起。为了创建jQuery对象，就要使用$()函数。这个函数接受CSS选择符作为参数，充当一个工厂，返回包含页面中对应元素的jQuery对象。所有能在样式表中使用的选择符都可以传给这个函数，随后我们就可以对匹配的元素集合应用jQuery方法。

有三种基本的选择符（当然还有其他的），标签名、ID和类。这些选择符可以单独使用，也可以与其他选择符组合使用。在将方法连缀到$()工厂函数后面时，包装在jQuery对象中的元素会被自动、隐式地循环遍历。换句话说，这样就避免了使用for循环之类的显式迭代（这种迭代在DOM脚本编程中非常常见）

下面我们来看一个例子

<!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">

        .horizontal {

            float: left;

            list-style: none;

            margin: 10px;

        }

        .sub-level {

            background: #ccc;

        }

    </style>

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

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

    <script type="text/javascript">

        $(document).ready(function () {

            $('#selected-plays > li').addClass('horizontal');

            $('#selected-plays li:not(.horizontal)').addClass('sub-level');

        });

    </script>

</head>

<body>

    <ul id="selected-plays">

        <li>

            Comedies

            <ul>

                <li><a href="/asyoulikeit/">As You Like It</a></li>

                <li>All's Well That Ends Well</li>

                <li>A Midsummer Night's Dream</li>

                <li>Twelfth Night</li>

            </ul>

        </li>

        <li>

            Tragedies

            <ul>

                <li><a href="hamlet.pdf">Hamlet</a></li>

                <li>Macbeth</li>

                <li>Romeo and Juliet</li>

            </ul>

        </li>

        <li>

            Histories

            <ul>

                <li>

                    Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)

                    <ul>

                        <li>Part I</li>

                        <li>Part II</li>

                    </ul>

                <li>

                    <a href="http://www.shakespeare.co.uk/henryv.htm">

                        Henry V

                    </a>

                </li>

                <li>Richard II</li>

            </ul>

        </li>

    </ul>

</body>

</html>

假设我们想让顶级的项（Comedies、Tragedies和Histories），而且只有顶级的项水平排列，那么可以先在样式表中定义一个horizontal类：这个horizontal类会将元素浮动到它后面元素的左侧，如果这个元素是一个列表项，那么会移除其项目符号，最后再为该元素的每一边各添加10像素的外边距。这里，我们没有直接在HTML中添加horizontal类，而只是将它动态地添加给位于顶级的列表项Comedies、Tragedies和Histories，以便示范jQuery中选择符的用法

$('#selected-plays > li').addClass('horizontal');使用子元素组合符（>）将horizontal类只添加到位于顶级的项中。实际上，位于$()函数中的选择符的含义是，查找ID为selected-plays的元素（#selected-plays）的子元素（>）中所有的列表项（li），API文档如下：

要为其他项（非顶级的项）添加样式，有很多种方式。因为已经为顶级项添加了horizontal类，所以取得全部非顶级项的一种方式，就是使用否定式伪类选择符来识别没有horizontal类的所有列表项。$('#selected-plays li:not(.horizontal)').addClass('sub-level'); 对应的API文档如下：

 属性选择符

属性选择符通过HTML元素的属性选择元素，例如链接的title属性或图像的alt属性。例如，要选择带有alt属性的所有图像元素，可以使用以下代码：$('img[alt]')

属性选择符使用一种从正则表达式中借鉴来的通配符语法，以^表示值在字符串的开始，以$表示值在字符串的结尾。而且，也是用星号*表示要匹配的值可以出现在字符串中的任意位置，用叹号!表示对值取反。详细API可以看这里

继续针对上面的例子，我们来学习属性选择符的用法。假设我们想以不同的文本颜色来显示不同类型的链接，那么首先要在样式表中定义如下样式：

a {
color: #00c;
}
a.mailto {
background: url(images/email.png) no-repeat right top;
padding-right: 18px;
}
a.pdflink {
background: url(images/pdf.png) no-repeat right top;
padding-right: 18px;
}
a.henrylink {
background-color: #fff;
padding: 2px;
border: 1px solid #000;
}

然后，可以使用jQuery为符合条件的链接添加3个类：mailto、pdflink和henrylink。要为所有电子邮件链接添加类，需要构造一个选择符，用来寻找所有带href属性（[href]）且以mailto开头（^="mailto:"]）的锚元素（a），因为我们在页面的样式表中定义了相应的规则，所以页面中所有mailto:链接的后面都会出现一个信封图标

$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
});

要为所有指向PDF文件的链接添加类，需要使用美元符号（$）而不是脱字符号（^）。这是因为我们要选择所有href属性以.pdf结尾的链接，因为有已经定义的样式表规则，新添加的pdflink类也会导致每个PDF文档链接后面出现Adobe Acrobat图标

$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
});

属性选择符也可以组合使用。例如，可以为href属性即以http开头且任意位置包含henry的所有链接添加一个henrylink类

$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]')
.addClass('henrylink');
});
});

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. on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数.大理石平台精度等级 on()方法绑定事件处理程序到当前选定的jQuery对象中的元素 ...

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

    自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...

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

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

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

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

  8. 【JQuery基础教程(第三版)图灵】笔记

    第1章 jQuery入门 1.jQuery官方网站:http://jquery.com   2.开发工具:Firebug         第2章 选择元素 1.属性选择符:属性选择符通过HTML元素的 ...

  9. jQuery基础教程

    1.使用$()函数 $()函数其实是创建了一个jQuery对象. 这个函数接受CSS选择符作为参数,充当一个工厂, 返回包含页面中对应元素的jQuery对象. 所有能在样式表中使用的选择符都可以传给这 ...

随机推荐

  1. FAQ unzip无法解压文件

    [root@TEST144239 tmp]# unzip linx64_11gR2_database_1of2.zipArchive:  linx64_11gR2_database_1of2.zipw ...

  2. 解决Centos6.5虚拟机上网问题

    起初是为了能通过上网的方式简化g++的安装,故有此篇博文,希望能帮助到有需要的人. 虚拟机环境: 1.Linux系统:Centos6.5 64位 2.ifconfig查看虚拟机ip:竟然没有ip! 3 ...

  3. [转]开源那些事儿(四)-如何使用CodePlex进行项目管理

    本文版权信息作者:Jake Lin(Jake's Blog on 博客园) 出处:http://www.cnblogs.com/procoder/archive/2010/02/10/About-Op ...

  4. ios外包公司——技术分享：IOS开发教程

        iOS入门培训,适合已经有C/C++/Java/C#基础的人学习.   本大仙主讲,总共4讲(第4讲尚在制作中),这仅仅是iOS开发的入门而已.学完本教程,应该已经足够你自学并开发app了. ...

  5. webstorm配置nodejs,bower,git,github

    一,配置nodejs第一大步,首先安装nodejs,安装nodejs的时候,我们需要把所有的组建勾选上,然后选择add to path,这一步会自动帮我们配置环境变量,安装完成后,打开cmd,输入no ...

  6. bzoj4109: [Wf2015]Cutting Cheese

    Description 给定一个100*100*100(单位:毫米)的奶酪方块,这个奶酪含有n个球形小孔.现在要求将这个奶酪切成s片使得每片质量相等. Input 第一行包含两个整数n,s,表示奶酪有 ...

  7. php提高效率

    1. foreach效率更高,尽量用foreach代替while和for循环. 2. 循环内部不要声明变量,尤其是对象这样的变量. 3. 在多重嵌套循环中,如有可能,应当将最长的循环放在内层,最短循环 ...

  8. idea系列新版注册模式

    http://idea.qinxi1992.cn/ 楼上被列入黑名单,用 http://114.215.133.70:41017/

  9. 减小Gcc编译程序的体积

    众所周知,Gcc编译的原始程序一般很大,其实有几种方法能大大减小目标代码的体积,一般有以下几种方法. 基本知识来源:http://www.mingw.org/wiki/Large_executable ...

  10. 拒绝了对对象 'sp_sdidebug'(数据库 'master',所有者 'dbo')的 EXECUTE 权限。

    如果在调试过程中出现异常“拒绝了对对象 'sp_sdidebug'(数据库 'master',所有者 'dbo')的 EXECUTE 权限.”则可以通过以下方式解决: 打开master数据库,打开扩展 ...