jQuery入门第一课

永利皇宫402

选拔符能够以为是一个巩固版的getElementById方法。getElementById方法再次回到的是三个HTML元素,jQuery选拔符再次回到的是HTML成分的一个装进。利用那些包裹集,jQuery给予了HTML成分越来越多的能够操作的主意。在JQuery中,处于主题地方的一个函数正是$。对,它正是叁个函数,名字有一点点蹊跷。这些函数便是选用函数,其肖似用法是
var obj=$;
此中selector是二个字符串,正是底下要重视介绍的采纳符。重回的是因素的包裹集结。事实上,JQuery的主导$函数的威力远不仅当做选取符来用,当它的参数是一个函数的时候,它的功用是近乎onload事件,当页面包车型大巴DOM成分完全加载后,它参数内的主意就能够被实施。它比onload更有优势,onload只可以登记1个函数,可是它能够频仍被调用,也正是足以挂号四个函数到DOM加载完全后实践,况兼onload是要等页面上的具有剧情都加载完结后再实行的,假设有大图片等故事情节,也许形成函数试行延时。而$函数只要DOM结构完全加载就足以实行。上边看叁个轻便易行的例证:
复制代码 代码如下:

JQuery First Page

I’m a p

能够观望,最简便的采纳器正是和getElementById相像的,利用成分的ID作为选拔符。能够看看p到底是哪些,利用js调节和测量试验器可以看见:

p是贰个像样数组的靶子,里面富含了被选中的因素。展开[Methods]结点能够看来不菲措施,都以jQuery提供的方法。在这里个事例中,成分唯有二个,由此通过p[0]就能够赢得该HTML成分,p[0]就是和getElementById得到的靶子是均等的。

jQuery选择符的无敌之处在于它大致统统相称CSS2的接受符,而任由您的浏览器是或不是合营CSS2。即使对CSS选取符还面生的,请参照他事他说加以考查笔者的上生龙活虎篇日记:CSS选用符。对于选用到的要素,能够给她施加超多主意,这么些方法不是本文介绍的尤为重要,这里先介绍贰个,正是css方法,那几个法子能够给包装成分的css属性中的attr属性的值设置为value.上面举的事例正是选拔那个点子给页面成分扩展一点字体上的变化,大家得以以此区分出某些选项符到底选中了怎么着因素。这些例子和自家上一篇的事例的内容差十分少是一样的,作者就不加解释了,只是那篇的例证也都适用于IE6!复制代码 代码如下:

JQuery Selector

This is H1

This is H2

This is H3

Real Warning!

Common Worning

Warning and Big

I am title

Real Warning!

P with an ID and class

The last line.

P with an ID

I am title

I am title2

Hello World

HelloWorld

Hello-World

Class warning inside p

成效如下:

jQuery的雄强之处还不幸免此,除了扶助CSS选择符以外,jQuery本身还扶助其他的选取符,当中一大类正是基于地方的接收符。举个例子选取列表中的第一个,也许表格中的偶数行等等。那类选用器的经常方式是
:location,比如 a:first,相称页面上率先个a, p:even
相称页面上偶数个p.上面详细介绍。

选拔器描述:first页面最初现身的。li a:first
在li标签下第叁个冒出的a:last同上,最终现身的。:first-child最早的子成分:last-child最终的子成分:nth-child:nth-child重返第偶数|奇数个子成分:even
:odd第偶数、奇数个因素:eq
再次回到第n个要素,第n个要素之后成分,第n个成分从前的元素

先看二个事例再作解释:复制代码 代码如下:

Custom Selector

Entry Level DSLR Prices

Company Model Price
Canon 1000D 3800
Canon 450D 4100
Canon 500D 4900
Canon 550D 6100
Nikon D3000 3600
Nikon D5000 4600
Pentax Kx 3900
Sony a230 2900
Sony a450 4400

Date: 2010-03

先是条语句是将第生机勃勃行设置为粗体,中号字。第二句是将偶数行的背景设置为金黄绿。第三句是将tr中的td元素的第三个设置成深青莲。第四句是将第二行开始有所tr的首先个子成分设置成斜体。

第四条显示了采纳器的重新整合使用。
那风姿浪漫类的选拔器和CSS采用器相同,也足以组合使用。 要极度注意 p:first 和 p
:first的区分,前面二个表示的是在全部页面中第4个p,前面一个表示的是含有在p中的首先个因素。综合上面包车型地铁演讲,末了的结果应该是:

题外话,上边那个图是在IE8下截的,一定要说IE对于字体的渲染真是好看啊。Chrome
FF都没这么地道。

闲话休说,继续介绍jQuery的尾声一类选用器。那类接受器很像css的伪类,举例:

:button选择input[type=button]:checked选中的复选框或开关:contains包含字符串xxx的要素

具体用法比较轻巧,不详细介绍。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图