jQuery入门第一课 jQuery选择符
选择符可以认为是一个增强版的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调试器可以看到：
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的强大之处还不限于此，除了支持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中的第一个元素。综合上面的解释，最终的结果应该是：
题外话，上面这个图是在IE8下截的，不得不说IE对于字体的渲染真是赏心悦目啊。Chrome FF都没这么漂亮。
言归正传，继续介绍jQuery的最后一类选择器。这类选择器很像css的伪类，例如：
| :button | 选择input[type=button] |
| :checked | 选中的复选框或按钮 |
| :contains('xxx') | 包含字符串xxx的元素 |
具体用法比较简单，不详细介绍。
相关推荐
-
jQuery 关于伪类选择符的使用说明
jQuery选择器的强大不仅在于选择器支持基本的css选择符,还支持很多CSS的伪类选择符,甚至可以自定义选择符,下面让我们来看看一些伪类选择符 :nth-child的用法 nth-child是一个css3伪类选择符,在jQuery中被实现了,在Jquery API中对nth-child的定义是:"匹配其父元素下的第N个子或奇偶元素".读着感觉有点绕口,下面让我们通过例子来说明: 复制代码 代码如下: <div> <ul> <l
-
jquery选择符快速提取web表单数据示例
本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法. 以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法. 我给需要提交数据每个表单域添加了一个额外的属性,用自己额外定义的属性"_postField"代替原来的name
-
JQUERY的属性选择符和自定义选择符使用方法（二）
例子:给链接中含用"wangorg"字符的链接文字加粗 css: 复制代码 代码如下: .abold{ font-weight:bold; } html: 复制代码 代码如下: $('document').ready(function(){ $('a[href*=wangorg]').addClass('abold'); }) 属性选择也可以用组合方式: $('a[href^=http] [href*=wangorg]').addClass('abold') 自定义选择符是JQUERY
-
初窥JQuery(一)jquery选择符 必备知识点
本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始. CSS选择符包括通配选择符.ID选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素. ID选择符:$("#ID") 表示获得指定ID的元素. 属性选择符:$("input[type=text]") 表示type属性为text的
-
jQuery 选择符详细介绍及整理
jQuery 选择符 CSS选择符, 如: $('#title1 > li')为取得ID为title1(#title)的子元素(>)中所有的列表项(li). $('#title1 li:not(.class1)')为取得ID为title的后代元素中没有(not)class1类的所有列表项. jQuery库支持XPath选择符. 如: $('a[@title]')为取得所有带title属性的链接.也可以不用@符号. 如: $('div[ol]')为取得所以包含一个ol属性的div元素.当然,还允
-
jQuery代码优化 选择符篇
本文就从选择符的角度简单探讨一下优化jQuery代码的问题. Sizzle的运行机制 jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来,也就是Sizzle引擎.当我们把一个选择符表达式(比如"#id".".class".":nth-child(2)")传递给$()函数时,Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素,以求得最大的执行速度.以下就是Sizzle会优先选用的几个标准的原生方法(各个方法的用途不再赘述
-
jQuery入门第一课 jQuery选择符
选择符可以认为是一个增强版的getElementById方法.getElementById方法返回的是一个HTML元素,jQuery选择符返回的是HTML元素的一个包装.利用这个包装集,jQuery赋予了HTML元素更多的可以操作的方法.在JQuery中,处于核心地位的一个函数就是$.对,它就是一个函数,名字有点古怪.这个函数就是选择函数,其一般用法是 var obj=$(selector); 其中selector是一个字符串,就是下面要着重介绍的选择符.返回的是元素的包装集合.事实上,JQue
-
简单的jQuery入门指引
引言 jQuery可以说是web开发领域应用最为广泛的轻量级javascript库,不仅专业的web开发者使用它,很多刚入门的web开发者或者web爱好者也通过使用jQuery轻松地融入到了javascript的开发. 而如果你还希望在这方面做得更好,就应学习和了解最佳实践.最佳实践(Best Practice)是随某一技术领域的发展而逐渐建立起来的关于最新技术和开发方法的信息,在web开发领域也非常有用. 本文内容参考了杰出前端工程师 Addy Osmani 的 jQuery Performa
-
针对初学者的jQuery入门指南
jQuery 是什么,它能为我们做什么?如果你是一名 Web 开发人员,写过 JavaScript 程序,那么你很可能正在使用 jQuery,即使没有试用过,至少也听说过,事实上 jQuery 可以说是现阶段最流行的 JavaScript 库.据有关部门统计,全球网站上面,约有 28% 的网站在使用 jQuery,这个数字可能有些夸张,但足见 jQuery 受欢迎的程度.本文仅对 jQuery 的使用方法作简单介绍,且作为一个入门教程吧. 下载 jQuery 代码,并在页面中载入 首先需要从jQ
-
jquery实现右侧栏菜单选择操作
本文实例分享了jquery实现右侧栏菜单选择的相关代码,供大家参考,具体内容如下 效果图: 实现菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右侧栏菜单</title> <style type="text/css"> *{ margin: 0; padding: