jQuery 学习系列笔记(二)

简介:

上一篇属于对jQuery进行一个简单的概述,这篇我们重点学习一下jQuery选择器最强大的、使用最频繁的两个功能:

(1)利用选择器选择DOM元素

(2)创建新的DOM元素

一、选择将被操作的元素

jQuery的元素选择方法是集大成的,包括通过元素IDCSS类标签名称以及页面元素的DOM层次结构进行选择。

大家可以根据选择器实验室(Selector Lab)这个页面结合这篇文章来学习,实际操作。

1、利用基本CSS选择器

下面举几个简单的例子给大家热热身

(1)选择器匹配所有链接元素

1
$( "a" );

(2)选择器匹配id为specialID的元素

1
$( "#specialID" );

(3)选择器匹配拥有CSS类specialClass的元素

1
$( ".specialClass" );

(4)选择匹配id为specialID、拥有CSS类specialClass的链接元素

1
$( "a#specialID.specialClass" );

(5)选择器匹配拥有CSS类specialClass、在<p>元素内声明的链接元素

1
$( "p a.specialClass" );

总的来说,jQuery就是支持CSS,包括完全兼容CSS3,反正在学jQuery之前,我对CSS是什么也完全不知道,现在了解的也仅仅是它是一个样式开发的东东。不过我想这也完全不影响我学习jQuery。

2、利用子选择器、容器选择器和特性选择器

下面见识一下稍微高级一点的玩法。这样一段html代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< ulclass = "list" >
   < li >< ahref = "http://jquery.com" >jQuery supports</ a >
     < ul >
       < li >< ahref = "css1" >CSS1</ a ></ li >
       < li >< ahref = "css2" >CSS2</ a ></ li >
       < li >< ahref = "css3" >CSS3</ a ></ li >
       < li >Basic XPath</ li >
     </ ul >
   </ li >
   < li >jQuery also supports
     < ul >
       < li >Custom selectors</ li >
       < li >Form selectors</ li >
     </ ul >
   </ li >
</ ul >

如果我现在想选择第2行<a>元素,那么选择器要怎么写?也许你会马上想到这样

1
$( "ul.list li a" );

当然,这么写我们是选择上了第2行的<a>元素,但是我们也同时把4,5,6行的<a>元素也选择上了。这并不是我们想要的,所以子选择器“>”登场。

1
$( "ul.list > li > a" );

这样就独一无二的选择出了第2行的<a>元素。“>”是选择父节点的直接子节点

同样,使用特性选择器也能达到我们想要的结果。因为第2行的<a>元素有href特性,并且其值为字符串“http://”使其与众不同,所以利用这一特性便能准确的匹配出我们想要的。

1
$( "a[href^=http://]" );

“^”表示选择器匹配包含以http://开头的href值的所有链接。如果替换成“$”,则表示选择器匹配包含以http://结尾的所有链接。替换成“*”表示选择器匹配任何部位中包含http://字符串的所有链接。

接着是容器选择器,是指有时我们选择的元素包含在某个其他元素中。举个例子:想要找到所有包含链接的列表元素。可以这样写

1
$( "li:has(a)" );

这块提一下,这么写绝对与

1
$( "li a" );

表达的意思不一样,前者表示包含<a>的<li>元素,后者表示在<li>中的<a>元素。指的目标元素不同。

3、通过位置选择

有时候根据元素在页面上的位置或者与其他元素的关系去选择元素,会使问题变得更加简单。

比如:页面上的第一个<a>元素,我们可以写成

1
$( "a:first" );

列表元素的最后一个子节点

1
$( "li:last-child" );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< table  id = "languages"  border = "0"  cellspacing = "1" >
   < thead >
     < tr >
       < th >Language</ th >
       < th >Type</ th >
       < th >Invented</ th >
     </ tr >
   </ thead >
   < tbody >
     < tr >
       < td >Java</ td >
       < td >Static</ td >
       < td >1995</ td >
     </ tr >
     < tr >
       < td >Ruby</ td >
       < td >Dynamic</ td >
       < td >1993</ td >
     </ tr >
     < tr >
       < td >Smalltalk</ td >
       < td >Dynamic</ td >
       < td >1972</ td >
     </ tr >
     < tr >
       < td >C++</ td >
       < td >Static</ td >
       < td >1983</ td >
     </ tr >
   </ tbody >
</ table >
有这么一段html代码,生成的格式即为


2XCY7]4N}TA9B3UHGSECAR6

根据这个表格再介绍几个位置选择的语法。

(1)选择匹配Language这列

1
$( "table td:first-child" );


或者


1
$( "table td:nth-child(1)" );

要说明的是:nth-child()里的索引是从1开始记数的。

80]04BH{NV]ZDABP4OA97R2

(2)选择匹配第三行,第三列的元素,“1972”

1
$( "table td:eq(5)" );

要注意的是这里的:eq()里的索引是从我们熟悉的0开始的。

OPD3@106LGI}WUCIQU$_IV0

(3)选择匹配第三行,第三列之前的所有元素

1
$( "table td:lt(5)" )

KM6~1NHJE05EL_%GBIZNJMM[4]

4、利用自定义jQuery选择器

有些时候我们只依赖于CSS规范没法达到我们目的,所以jQuery为我们提供了自定义选择器,这样选择器真的就变的越发的强大了。

具体的自定义jQuery选择器有哪些,大家可以到网上查一下,我只介绍一个, :not筛选器

筛选选择器:通过对元素应用更高的选择标准,缩小正在匹配的元素的集合。比如“input:not(:checkbox)”选择非复选框的<input>元素。筛选选择器一般都是以冒号(:)或者左方括号([)开头。除筛选选择器外,其他任何选择器都不能在:not()筛选器里使用。

查找选择器:查找与已选择元素具有某种关系的其他元素。比如 “li a ”已选择元素li 包含关系的元素a。另外,后代选择器、子节点选择器、兄弟节点选择器均属于这一范畴。

关于这两个定义我也有点没太理解好,大家可以在使用中多多体会。

二、生成新HTML

本来这篇不想再写这个标题的, 边学边写总觉得有点累,但是当我学习完这部分的内容之后,又有点热血沸腾了,所以想给大家表一下。

上篇我们其实也写了一个演示了一个比较简单的例子,新建一个段落元素

1
$( "Hello World" );

下面的代码大家注意了,很好玩。

1
2
3
4
$( "<div class='iron'>I am iron man!<div>I am Tony Stark" )
.filter( ".iron" ).click( function (){
     alert( "I'm Iron Man!" );
}).end().appendTo( "#Avengers" );

解释一下,开始创建了两个<div>元素,一个带有类iron,一个没有,.filter选择出带有类iron的<div>,并给它绑定鼠标点击事件,一点击这个<div>就会出现对话框“I’m Iron Man!”,再用.end还原到两个<div>的完整集合,再使用.appendTo把这两个新建的元素追加到id为Avengers的元素之后,从而把它们绑定到DOM树。

哇!大家好好体会一下,在创建的同时,把所有相关的事情都做了,几乎就像是原html代码一样。有没有很爽?


今天就先写到这里,有点累了,不过还没结束,关于创建元素包装集的内容会在 jQuery 学习系列笔记(二)(续) 中表给大家











本文转自 我不会抽烟 51CTO博客,原文链接:http://blog.51cto.com/zhouhongyu1989/1400682,如需转载请自行联系原作者

目录
相关文章
|
7月前
|
JavaScript 前端开发
jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)—jQuery中对象的查找方法总结
|
15天前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
16 0
|
15天前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
14 0
|
2月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
2月前
|
JSON JavaScript 前端开发
javaweb实训第二天上午——jQuery笔记(2)
jQuery操作元素或节点的方法 添加:append(),appendTo(),prepend(),after(),before() 删除:remove(),empty() 复制:clone(true)
35 5
|
2月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
49 0
|
2月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
47 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
24 0
|
2月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
53 0
|
2月前
|
JSON JavaScript 前端开发
javaweb实训第二天上午——jQuery笔记(3)
JSON格式数据 JSON格式数据概述
48 0