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

随机推荐

STL heap usage
简介 heap有查找时间复杂度O(1),查找.插入.删除时间复杂度为O(logN)的特性,STL中heap相关的操作如下: make_heap() push_heap() pop_heap() sor ...
泛型T的类型获取
T.getClass()或者T.class都是非法的,因为T是泛型变量. 由于一个类的类型是什么是在编译期处理的,故不能在运行时直接在Base里得到T的实际类型. /** * 可以在service层直 ...
如何在Eclipse下查看JDK源代码
在Eclipse中查看JDK类库的源代码!!! 设置: 1.点 "window"-> "Preferences" -> "Java&quo ...
HP QR Code 实现二维码
二维码简单点说就是图片中含有数据信息,可以是url链接,也可能是其他的首先下载该类,(http://download.csdn.net/detail/cgjcgs/9100365) 然后直接引入该类 ...
KVO __ 浅谈
KVO :Key-Value Observing 它提供一种机制,当指定的对象的属性被修改后,则对象就会接受到通知.简单的说就是每次指定的被观察的对象的属性被修改后,KVO就会自动通知相应的观察者了. ...
Java基础学习（三）
/* java中的八种基本数据类型: 整数: byte . short . int . long 小数: float double 字符: char 布尔: boolean 字符串的类型: Strin ...
SharedPreferences 详解
获取SharedPreferences的两种方式: 1 调用Context对象的getSharedPreferences()方法 2 调用Activity对象的getPreferences()方法两 ...
CozyRSS开发记录19-窗口标题栏交互
CozyRSS开发记录19-窗口标题栏交互 1.谈谈对mvvm解耦的看法在使用mvvm时,如何操作窗口,这是一个问题.这个问题的关键点是:mvvm是把view和viewmodel解耦了的,很多写法一 ...
linux中find批量删除空文件夹
空文件夹列出用find 删除管道即可 find -type d -empty | xargs -n 1 rm -rf 注意最后不能rm -f,这样删不了目录,必须-r
npm-async使用
async.series(tasks, callback) tasks可以是对象或数组,返回类型就是参数类型 tasks中传入回调函数的第一个值非空即停止后面函数执行按照顺序流程进行 async.s ...

Jquery 系列（2） 选择元素

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

随机推荐

热门专题

Jquery 系列（2）选择元素

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