jQuery入门第一课 jQuery选择符


Posted in Javascript onMarch 14, 2010

选择符可以认为是一个增强版的getElementById方法。getElementById方法返回的是一个HTML元素,jQuery选择符返回的是HTML元素的一个包装。利用这个包装集,jQuery赋予了HTML元素更多的可以操作的方法。在JQuery中,处于核心地位的一个函数就是$。对,它就是一个函数,名字有点古怪。这个函数就是选择函数,其一般用法是

var obj=$(selector);

其中selector是一个字符串,就是下面要着重介绍的选择符。返回的是元素的包装集合。事实上,JQuery的核心$函数的威力远不止当作选择符来用,当它的参数是一个函数的时候,它的作用是类似onload事件,当页面的DOM元素完全加载后,它参数内的方法就会被执行。它比onload更有优势,onload只能注册1个函数,但是它可以多次被调用,也就是可以注册多个函数到DOM加载完全后执行,而且onload是要等页面上的所有内容都加载完毕后再执行的,如果有大图片等内容,可能造成函数执行延时。而$函数只要DOM结构完全加载就可以执行。下面看一个简单的例子:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JQuery First Page</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> 
$(function(){ 
var p=$('#p1'); 
alert(p); 
}); 
</script> 
</head> 
<body> 
<p id="p1">I'm a p</p> 
</body> 
</html>

可以看到,最简单的选择器就是和getElementById类似的,利用元素的ID作为选择符。可以看看p到底是什么,利用js调试器可以看到:

jQuery入门第一课 jQuery选择符

p是一个类似数组的对象,里面包含了被选中的元素。打开[Methods]结点可以看到很多方法,都是jQuery提供的方法。在这个例子中,元素只有一个,因此通过p[0]就能获得该HTML元素,p[0]就是和getElementById获得的对象是一样的。

jQuery选择符的强大之处在于它几乎完全兼容CSS2的选择符,而不管你的浏览器是否兼容CSS2。如果对CSS选择符还不熟悉的,请参考我的上一篇日志:CSS选择符。对于选择到的元素,可以给他施加很多方法,这些方法不是本文介绍的重点,这里先介绍一个,就是css(attr,value)方法,这个方法可以给包装元素的css属性中的attr属性的值设置为value.下面举的例子就是利用这个方法给页面元素增加一点字体上的变化,我们可以以此区分出某个选择符到底选中了哪些元素。这个例子和我上一篇的例子的内容几乎是一样的,我就不加解释了,只是这篇的例子也都适用于IE6!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JQuery Selector</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("h1,h2").css("color","Red"); //element selector 
$(".warning").css("font-style","italic"); //class selecotr 
$("p.warning").css("color","Red"); 
$("p.big.warning").css("font-size","x-large");//multi-class selector 
$("*[id]").css("color","red"); //attribute selector 
$("p[class]").css("color","blue"); 
$("p[class][id]").css("font-size","x-large"); 
$("div[title='title']").css("font-weight","bold"); 
$("div[title^='title']").css("color","red"); 
$("div[title$='World']").css("color","blue"); 
$("div[title~='Hello']").css("font-size","x-large"); 
$("div[title*='Hello']").css("font-style","italic"); 
$("div[title|='Hello']").css("background-color","silver"); 
$("p .warning").css("font-size","x-large"); //decendent selector 
$("body > .warning").css("border","1px solid"); //child selector 
}); 
</script> 
</head> 
<body> 
<h1> 
This is H1</h1> 
<h2> 
This is H2</h2> 
<h3> 
This is H3</h3> 
<p class="warning"> 
Real Warning!</p> 
<span class="warning">Common Worning</span> 
<p class="big warning "> 
Warning and Big</p> 
<div id="title"> 
I am title</div> 
<p class="warning"> 
Real Warning!</p> 
<p id="idp1" class="myclass"> 
P with an ID and class</p> 
<p> 
The last line.</p> 
<p id="idp2"> 
P with an ID</p> 
<div title="title" >I am title</div> 
<div title="title2">I am title2</div> 
<div title="Hello World">Hello World</div> 
<div title="HelloWorld">HelloWorld</div> 
<div title="Hello-World">Hello-World</div> 
<p><span class="warning">Class warning inside p</span></p> 
</body> 
</html>

效果如下:
jQuery入门第一课 jQuery选择符 

jQuery的强大之处还不限于此,除了支持CSS选择符以外,jQuery自身还支持其他的选择符,其中一大类就是基于位置的选择符。例如选择列表中的第一个,或者表格中的偶数行等等。这类选择器的一般形式是 :location,例如 a:first,匹配页面上第一个a, p:even 匹配页面上偶数个p.下面详细介绍。

选择器 描述
:first 页面最先出现的。li a:first 在li标签下第一个出现的a
:last 同上,最后出现的。
:first-child 最先的子元素
:last-child 最后的子元素
:nth-child(n) 返回第n个子元素(从1开始)
:nth-child(even|odd) 返回第偶数|奇数个子元素
:even :odd 第偶数、奇数个元素
:eq(n) :gt(n) :lt(n) 返回第n个元素(从0开始),第n个元素之后元素,第n个元素之前的元素

先看一个例子再作解释:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Custom Selector</title> 
<style type="text/css"> 
table 
{ 
border-collapse: collapse; 
font-family:Verdana; 
} 
td 
{ 
padding-left: 10px; 
padding-right: 10px; 
border: solid 1px black; 
} 
</style> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('tr:first').css({fontWeight:'bold',fontSize:'large'}); 
$('tr:even').css('background-color','silver'); 
$('tr td:first').css('color','red'); 
$('tr:gt(0) :first-child').css('font-style','italic'); 
$('p:eq(0)').css({fontFamily:'Arial',fontSize:'x-large'}); 
}); 
</script> 
</head> 
<body> 
<p>Entry Level DSLR Prices</p> 
<table> 
<tr> 
<td>Company</td> 
<td>Model</td> 
<td>Price</td> 
</tr> 
<tr> 
<td>Canon</td> 
<td>1000D</td> 
<td>3800</td> 
</tr> 
<tr> 
<td>Canon</td> 
<td>450D</td> 
<td>4100</td> 
</tr> 
<tr> 
<td>Canon</td> 
<td>500D</td> 
<td>4900</td> 
</tr> 
<tr> 
<td>Canon</td> 
<td>550D</td> 
<td>6100</td> 
</tr> 
<tr> 
<td>Nikon</td> 
<td>D3000</td> 
<td>3600</td> 
</tr> 
<tr> 
<td>Nikon</td> 
<td>D5000</td> 
<td>4600</td> 
</tr> 
<tr> 
<td>Pentax</td> 
<td>Kx</td> 
<td>3900</td> 
</tr> 
<tr> 
<td>Sony</td> 
<td>a230</td> 
<td>2900</td> 
</tr> 
<tr> 
<td>Sony</td> 
<td>a450</td> 
<td>4400</td> 
</tr> 
</table> 
<p>Date: 2010-03</p> 
</body> 
</html>

第一条语句是将第一行设置为粗体,大号字。第二句是将偶数行的背景设置为银灰色。第三句是将tr中的td元素的第一个设置成红色。第四句是将第二行开始所有tr的第一个子元素设置成斜体。

第四条展示了选择器的组合使用。 这一类的选择器和CSS选择器类似,也可以组合使用。 要特别注意 p:first 和 p :first的区别,前者表示的是在整个页面中第一个p,后者表示的是包含在p中的第一个元素。综合上面的解释,最终的结果应该是:

jQuery入门第一课 jQuery选择符

题外话,上面这个图是在IE8下截的,不得不说IE对于字体的渲染真是赏心悦目啊。Chrome FF都没这么漂亮。

言归正传,继续介绍jQuery的最后一类选择器。这类选择器很像css的伪类,例如:

:button 选择input[type=button]
:checked 选中的复选框或按钮
:contains('xxx') 包含字符串xxx的元素

具体用法比较简单,不详细介绍。

Javascript 相关文章推荐
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
使用JavaScript switch case 另类写法
Mar 14 #Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 #Javascript
input的focus方法使用
Mar 13 #Javascript
JavaScript prototype对象的属性说明
Mar 13 #Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 #Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 #Javascript
javascript offsetX与layerX区别
Mar 12 #Javascript
You might like
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
php实现图片压缩处理
2020/09/09 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python添加模块搜索路径方法
2017/09/11 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python如何从文件读取数据及解析
2019/09/19 Python
Python socket模块方法实现详解
2019/11/05 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
收款授权委托书
2014/10/02 职场文书
公司停电通知
2015/04/15 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python