Jquery 系列（2）选择元素

Jquery基础学习

jQuery利用css选择符的能力，能够在DOM中快捷而轻松地获取元素。

主要内容如下：

介绍DOM树
如何通过CSS选择符在页中查找元素
扩展jQuery标准的CSS选择符
选择页面元素更灵活的DOM遍历方法

理解DOM树

DOM（Document Object Model）文档对象模型，可以充当JavaScript和网页之间的接口。jQuery最强大的功能就是能轻松的处理和简化在DOM中选择元素。DOM中各元素的关系，同数据结构中的二叉树的称呼非常相近。元素之间的关系包括祖先元素，父元素，子元素，同辈元素。

 <!DOCTYPE html>

     <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

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

为了把Dom更好的表现出来，可以使用很多工具，如FireFox FireBug ……

2、使用$()函数

我们通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中，通过jQuery对象实际地操作这些元素会非常简单，可以轻松地为jQuery对象绑定事件，添加漂亮的效果。也可以将多重修改和效果通过 jQuery对象联系在一起。

创建jQuery就要使用$()函数。

选择符	CSS	jQuery	说明
标签名	P{}	$('P')	取得文档中所有的段落
ID	#some-id	$('#some-id')	取文档中id='some-id'的元素
类	.someClass	$('.someClass')	取得文档中所有的类为someClass的元素

3 CSS选择符信息

jQuery支持css规范1至规范3中的几乎所有的选择符。具体内容可以参考W3C 网站

http://www.w3.org/Style/CSS/specs

开发者在增强自己的网站时，不必担心浏览器支不支持的问题，只要为浏览器启用JavaScript就没有问题。

NOTICE：

负责任的JQuery 开发者应该在编写自己的程序时，始终坚持渐近增强和平稳退化的理念，做到在禁用JavaScript时，页面仍然能够与启用javaScript时一样准确地呈现。

关于渐近增强可以参考

https://en.wikipedia.org/wiki/Progressive_enhancement

EG：

HTML code

 <!DOCTYPE html>

 <head>

     <meta charset="utf-8">

     <title>Selected Shakespeare Plays</title>

     <link rel="stylesheet" href="Css/02.css" type="text/css"/>

     <script src="Jquery/jquery-1.11.3.js"></script>

     <script src="Jquery/ClientJS/02.js"></script>

 </head>

 <body>

 <div id="container">

     <h2>Selected Shakespeare Plays</h2>

     <ul id="selected-plays" class="clear-after">

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

                 <li>

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

                 </li>

                 <li>Richard II</li>

             </ul>

         </li>

     </ul>

 </div>

 </body>

JavaScript code

Jquery/ClientJS/02.js

 $(document).ready(

   function ()

   {

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

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

   }

  );

CSS code

 .horizontal {

     float:left;

     list-style:none;

     margin:10px;

 }

 .sub-level {

   background: #ccc;

 }

详解：

上面的HTML code 中用到的是ul网页嵌套的无序列表。

父节点ul用到的是【id="selected-plays"】

li节点都没有用到任何类，故事的开头就是这样的，什么都没有。没有样式，没有外观接下来我们希望用让最外面的li(就是内容为Comedies、Tragedies、Histories) 包在ul外面的哪个TT给这个TT加上样式（horizontal）

 {

 float:left;

 list-style:none;

 margin:10px;

 }

$(document).ready()中的代码将会在DOM加载完成后，立即执行。

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

使用了子元素组合符（>）,将horizontal类添加到位于顶级元素项中。

具体的含义是查找ID=【selected-plays】元素（#selected-plays）的子元素（ >）中所有的列表项（li）应用后列表项被水平放置。接下来设置其它列表的样式。这里使用的是否定伪类选择符来识别没有horizontal类的所有列表项。$('#selected-plays li:not(.horizontal)').addClass('sub-level');

这一次取得每一个列表项（<li>）;是ID为selected-plays的元素（#selected-plays）的后代元素

没有horizontal类（:not(horizontal)）

在没有列表项元素添加了sub-level类之后，它们的背景颜色变为在样式表规则定义的浅灰色

 .sub-level {

   background: #ccc;

 }

属性选择符

属性选择符能过ＨＴＭＬ元素的属性选择元素，例如链接的title属性或图像的alt属性。例如选择带有alt属性的所有图像元素

$('img[alt]')

为链接添加样式

属性选择符使用一种从正则表达式中借鉴来的通配符语法

^表示值在字符串的开始

$表示值在字符串的结尾

*表示要匹配的值可以出现在字符串的任意位置

!表示对值取反。

以下是链接样式

 a 

 {

     color:#00c;

 }

  a.mailto 

 { 

   background:url(../Images/email.png) no-repeat left top ;

   padding-left:18px;

 }

 a.pdflink 

 {

   background:url(../Images/pdf.png) no-repeat left top;

   padding-left:18px;

 }

 a.henrylink 

 {

   padding:2px;

   border:1px solid #000;

 }

JS片断

$('a[href ^= "mailto:"]').addClass('mailto');

$('a[href $= ".pdf"]').addClass('pdflink');

$('a[href ^="http"][herf *= "henry"]').addClass('henrylink');

jQuery自定义选择符(jQuery自己定义的选择符) 而非CSS选择符的

性能提示

只要可能，jQuery 中就会使用浏览器原生的DOM选择符引擎去查找元素，但是在使用自定义选择符的时候，就无法使用速度最快的原生方法了，因此，建议在能够使用原生的方法情况下，就不要频繁地使用jquery自定义选择符，以确保性能。

属jQuery多数是自定义选择符可以让我们可以从中找到的元素中选出一或多个元素，Jquery自定义选择符一般跟在Css选择符后面基于已经选择集的位置来查找元素。自定义选择符的语法和Css中的伪类相近，即选择符以（:）冒号开头。

EG 从horizontal类的DIV集合中选择集合中的第二项

$('div.horizontal:eq(1)')

注意:因为Javascript数组采用从0开始的编号方式，所以eq(1)取得是集合中第二个元素。而Css则是从1开始编号的。因些CSS选择符$('div:nth-child(1)') 取得的是作为其父元素第1个子元素的位置的所有div元素。

EG：代码片断

HTML

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

CSS样式

 tr { 

     background-color:#fff;

 }

 .alt {

     background-color:#ccc;

 }

在样式表中添加一点样式，表格的表头和单元格就清晰了许多。现在，这个表格<tr>有白色背景，但是行与

行之间没有区别。所以再样式表中为所有表格行添加一种样式，然后再为奇数行定义一个alt背景的类。

使用JS如下。

 $(document).ready( function ()

 { 

   $('tr:even').addClass('alt');

 });

1、eq()选择符、：odd和：even选择符都使用JavaScript内置的特性从0开始编号的方式。

第一行的编号为0（偶数），第二行的编号为（奇数）

2、应用在第一行的样式才能更好的区分。在直观设计时要好看一些。

但是针对上述的情况可以发现一个问题如果页面中出现多个表格时，页面中的tr元素都是做统一处理，总体上出现样式不能独立于一个表格，正常的样式是每一个表格的样式第一行都是加alt样式的，而不是跟在上一表格样式的后面。因些上面的问题须要修正。

解决这一问题要用到另一个方法【:nth-child()】这个选择符相对于父元素而非所有元素来计算位置，它可以接受odd或even作为参数。

nth-child()是以1开始计数的选择符。需要使用odd而不是even参数

因此在应用时，以1开始就要传入参数odd而不是even

Js片断如下：

$('tr:nth-child(odd)').addClass('alt');

基于上下文内容来选择元素

由于出于某种需要，将页面的某些内容突出显示。为此我给须要突出的内容增加了一个这样的突出CSS类

 .highlight {

   font-weight: bold;

   font-style: italic;

 }

利用上面的例子，将使用:contains()选择符。将含有Henry增加突出显示的效果。

JS片断如下显示:

 $(document).ready(   

 function () 

 { 

   $('tr:nth-child(odd)').addClass('alt');

   $('td:contains(Henry)').addClass('highlight');

 });

注意在这里面的contains选择符区分大小写。

基于表单的选择符

自定义选择符并不局限于基于元素位置的选择元素。

与其它选择符类似，组合使用表单选择符可以更具有针对性

eg:

$('input[type="radio"]:checked')可以选择所有选中的单选按钮（而不是复选框）

Jquery 系列（2）选择元素的更多相关文章

浏览器console中加入jquery，测试选择元素
一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...
JQuery官方学习资料（译）：选择元素
选择元素 JQuery最基本的概念是“选择一些元素并让它们做些什么”.JQuery支持大部分的CSS3的选择器,以及一些非标准的选择器. 通过ID选择元素 $( "#myId&quo ...
第三章：JavaScript选择元素
我们使用jQuery时,很常用的套路是“两步”第一步:选取元素第二步:对选中的元素执行需要的操作这一章我们重点研究第一步,如何使用jQuery选取元素以及对选取的结果进行“各种筛选”以满足我们的需求. ...
抛弃jQuery：DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
JQuery基础教程：选择元素（中）
自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...
JQuery基础教程：选择元素（上）
jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素.子元素,等等.通过一 ...
初识jQuery，八字真言“选择元素，对其操作”
jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jque ...
jQuery获取Select选择的Text(非表单元素)和 Value（表单元素）(转)
jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...
jQuery选择器对应的DOM API ——选择元素
英文原文:http://blog.garstasio.com/you-dont-need-jquery/selectors/愚人码头注: 原作者的写这文章的意图是让我们抛弃jQuery,You Don ...

随机推荐

webstorm基础使用总结
webstorm基础使用总结(不仅仅是一堆快捷方式) 注:原文链接: 水车 : 本次写的内容是我想到那个就写那个,都是本人平时写代码的时候的一些习惯,未必是最好的,贵在交流! 1: shift+e ...
Spring学习（二）
1. AOP的思想(如何实现),AOP在哪些地方使用? 相关术语有哪些? AOP是面向切面编程,它是一种编程思想,采取横向抽取机制,取代了传统纵向继承体系重复性代码的方式应用场景有: 记录日志监控 ...
修改MySql 数据默认存储路径
1. cmd进入控制台 net stop mysql 2.复制原来数据库目录到新目录复制C:\ProgramData\MySQL\MySQL Server 5.5\中的data目录到 D:\Prog ...
yii 验证问题
yii 版本2.08 yii 验证码问题 1.模型里加入'verifyCode', 'captcha','message'=>'error','captchaAction' => 'tes ...
Linux面试知识点总结
1.Linux关机重启命令: 在linux命令中reboot是重新启动,shutdown -r now是立即停止然后重新启动,都说他们两个是一样的,其实是有一定的区别的. shutdown命令可 ...
AngularJs学习
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
使用 ApacheBench 进行轻量级压力测试
ApacheBench 是 Apache Http Server 附带的一个轻量级压力测试功能先下载一个Apache Http Server :http://httpd.apache.org/ 解压 ...
HTML导航栏
先看效果(两种,1:自己写样式,写交互,2.用jQueryUI 的menu),如下图第一种: 第二种: 第一种样式: 然后就开始准备了,单村用js和css也可以写出来,不过既然有jq ...
laravel 操作 redis
laravel框架中本身已经存在相应的redis的配置我们在使用的时候只需要更改配置即可,但是在使用的时候一定要注意命名空间的问题,具体可查看config/app.php下面的aliases数组中具体 ...
iOS设计模式
一.代理模式应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现. 优势:解耦合敏捷原则:开放-封闭原则实例:tableview的数据源delegate,通过和pro ...

Jquery 系列（2） 选择元素

Jquery 系列（2） 选择元素的更多相关文章

随机推荐

热门专题

Jquery 系列（2）选择元素

Jquery 系列（2）选择元素的更多相关文章