jQuery入门第一课 jQuery选择符

关键我事你哥

关键我事你哥

2016-02-19 13:33

今天图老师小编给大家精心推荐个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
titleJQuery 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
pI'm a p/p
/body
/html

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

image

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
titleJQuery 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
Real Warning!/p
spanCommon Worning/span
p
Warning and Big/p
div
I am title/div
p
Real Warning!/p
p
P with an ID and class/p
p
The last line./p
p
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
pspanClass warning inside p/span/p
/body
/html

效果如下:
image

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
titleCustom 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
pEntry Level DSLR Prices/p
table
tr
tdCompany/td
tdModel/td
tdPrice/td
/tr
tr
tdCanon/td
td1000D/td
td3800/td
/tr
tr
tdCanon/td
td450D/td
td4100/td
/tr
tr
tdCanon/td
td500D/td
td4900/td
/tr
tr
tdCanon/td
td550D/td
td6100/td
/tr
tr
tdNikon/td
tdD3000/td
td3600/td
/tr
tr
tdNikon/td
tdD5000/td
td4600/td
/tr
tr
tdPentax/td
tdKx/td
td3900/td
/tr
tr
tdSony/td
tda230/td
td2900/td
/tr
tr
tdSony/td
tda450/td
td4400/td
/tr
/table
pDate: 2010-03/p
/body
/html

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

image

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

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

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

展开更多 50%)
分享

猜你喜欢

jQuery入门第一课 jQuery选择符

Web开发
jQuery入门第一课 jQuery选择符

javascript第一课

Web开发
javascript第一课

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash鼠绘新手入门第一课:认识鼠绘

flash教程
Flash鼠绘新手入门第一课:认识鼠绘

Flash新手入门教程:AS入门第一课_认识编程环境

flash教程
Flash新手入门教程:AS入门第一课_认识编程环境

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

VBScript教程 第一课

ASP
VBScript教程 第一课

SQL语言入门教程:第一课简介

编程语言 网络编程
SQL语言入门教程:第一课简介

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

VisualBasic程序设计

VisualBasic程序设计

jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
下拉加载更多内容 ↓