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

随机推荐

[Android Pro] 精确记录和恢复ListView滑动位置
reference to : http://blog.csdn.net/welovesunflower/article/details/7926512 工作中遇到一个需求,对ListView某一项操作 ...
GroupBy(..)的四种声明方式的理解及调用
这里我们以 List<Student> studs作为 source,但是注意,studs中的学生可以是分别属于不同的班级和年级先看GroupBy的第一种声明: public stati ...
javase-排序
public class sort { public static void main(String[] args) { String[] arr = {"aa","bb ...
DBNEWNAME工具介绍
下面修改数据库的SID和db_name [root@oracle ~]# su - ora11g db11@oracle /home/ora11g$ db11@oracle /home/ora11g ...
mysql忘记root密码怎么办？
有时候忘记mysql的root密码了,怎么办? 这个时候,我们可以修改my.cnf,添加以不检查权限的方式启动,再修改root,最后重启mysql数据库. (1)service mysql stop ...
git客服端基本操作
以下操作基于git+gerrit 1.生成公钥 ssh -keygen -t rsa 默认公钥生成路径 C:\Documents and Settings\用户名\.ssh 2.配置姓名和邮箱地址 ...
Learn Git and GitHub without any code!
What is GitHub? GitHub is a code hosting platform for version control and collaboration.代码托管平台. repo ...
WebGL入门教程(二)-webgl绘制三角形
前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...
返水bug-百威
NOOK(Y) CSBFB(1000000) off(Y) QQ(44460898) G(1) off1(Y) QQ1(451933084) G1(1) off2(Y) QQ2(462814677) ...
浅谈CSS hack（浏览器兼容）
今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

Jquery 系列（2） 选择元素

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

随机推荐

热门专题

Jquery 系列（2）选择元素

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