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

随机推荐

display:inline-block会产生空隙
display:inline-block会产生空隙解决方法:font-size:0;letter-spacing:-4px
html内的空格占位
写html的时候有时因为字数不够会根据字段长度添加多个空格,但是在html中添加空格是没有用的,所以使用空格的代替符号有: 不断行的空白(1个字符宽度) 半个空白(1个字符宽度) 一个空白 ...
ubuntu中恢复rm命令误删文件
步骤: 1.对于文件系统为ext3文件系统使用命令:sudo apt-get install ext3grep. 对于文件系统为ext4文件系统使用sudo apt-get install ext ...
【Java EE 学习 83 下】【SpringMVC】【使用注解替代已过时的API】【SpringMVC、Hibernate整合】
一.SpringMVC中注解的使用 1.为什么要使用注解之前曾经提到过的三种控制器在spring3.0中都已经被明确标记为过时了,spring3.0推荐使用注解的方式替代三种控制器,实际上使用注解的 ...
【Java EE 学习 74 下】【数据采集系统第六天】【使用Jfreechart的统计图实现】【将JFreechart整合到项目中】
之前说了JFreechart的基本使用方法,包括生成饼图.柱状统计图和折线统计图的方法.现在需要将其整合到数据采集系统中根据调查结果生成三种不同的统计图. 一.统计模型的分析和设计实现统计图显示的流 ...
POJ 2991–Crane【线段树+几何】
题意: 把手臂都各自看成一个向量,则机械手的位置正好是手臂向量之和.旋转某个关节,其实就是把关节到机械手之间的手臂向量统统旋转. 由于手臂很多,要每个向量做相同的旋转操作很费时间.这时就可以想到用线段 ...
java中的小数的取整的几种函数
Math类中提供了5个与取整相关的函数,如下所示: static double ceil(double a):天花板函数,返回大于等于a的最小整数(但是以浮点数形式存储). static double ...
转：工具类之SpannableStringUtils（相信你会爱上它）
这个工具类真是构思了良久才设计出来,采用了建造者模式,然后你们就可以用链式调用了,talk is cheap, let me show the demo. demo code 有没有心动一下哈,下面就 ...
【转】SSL协议、SET协议、HTTPS简介
一.SSL协议简介 SSL是Secure Socket Layer的缩写,中文名为安全套接层协议层.使用该协议后,您提交的所有数据会首先加密后,再提交到网易邮箱,从而可以有效防止黑客盗取您的用户名.密 ...
win下安装jdk7后，修改环境变量无法改为jdk6的问题
jdk的安装包,现在的策略改变了,不再帮你设置环境变量,而是直接把java.exe,javaw.exe,javaws.exe直接拷贝到了system32下. 删掉这3个,path就生效了!

Jquery 系列（2） 选择元素

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

随机推荐

热门专题

Jquery 系列（2）选择元素

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