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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
javascript 页面只自动刷新一次
Jul 10 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
vue.js表格分页示例
Oct 18 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
JS中多层次排序算法的实现代码
Jan 06 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
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
django 发送手机验证码的示例代码
2018/04/25 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
python 进程池pool使用详解
2020/10/15 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
少先队学雷锋活动月总结
2014/03/09 职场文书
体育活动总结
2015/02/04 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL