The first lesson of getting started with jQuery jQuery selector_jquery

The selector can be thought of as an enhanced version of the getElementById method. The getElementById method returns an HTML element, and the jQuery selector returns a wrapper of the HTML element. Using this wrapper set, jQuery gives HTML elements more manipulable methods. In JQuery, one of the core functions is $. Yes, it's just a function with a weird name. This function is the selection function, and its general usage is

var obj=$(selector);

where selector is a string, which is the selector that will be introduced below. What is returned is a wrapped collection of elements. In fact, the power of JQuery's core $ function goes far beyond being used as a selector. When its parameter is a function, its function is similar to the onload event. When the DOM element of the page is completely loaded, the The method will be executed. It has more advantages than onload. onload can only register one function, but it can be called multiple times, that is, multiple functions can be registered to be executed after the DOM is fully loaded, and onload must wait until all content on the page is loaded. If it is executed later, if there are large pictures and other content, it may cause a delay in function execution. The $ function can be executed as long as the DOM structure is fully loaded. Let’s look at a simple example:

Copy the code The code is as follows:

< html xmlns="http://www.w3.org/1999/xhtml">

I'm a p

As you can see, the simplest selector is similar to getElementById, using the ID of the element as the selector. You can see what p is. You can use the js debugger to see:

p is an array-like object that contains the selected elements. Open the [Methods] node and you can see many methods, all of which are provided by jQuery. In this example, there is only one element, so the HTML element can be obtained through p[0], which is the same object obtained by getElementById.

The power of jQuery selectors is that they are almost fully compatible with CSS2 selectors, regardless of whether your browser is compatible with CSS2. If you are not familiar with CSS selectors, please refer to my previous blog: CSS Selectors. For the selected element, many methods can be applied to it. These methods are not the focus of this article. Here is the first one, which is the css(attr, value) method. This method can give the value of the attr attribute in the css attribute of the wrapping element. Set to value. The example given below uses this method to add a little font change to page elements. We can use this to distinguish which elements are selected by a certain selector. The content of this example is almost the same as the example in my previous article, so I won’t explain it. However, the examples in this article are also applicable to IE6!

Copy code The code is as follows:

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(n)	返回第n个子元素（从1开始）
:nth-child(even|odd)	返回第偶数|奇数个子元素
:even :odd	第偶数、奇数个元素
:eq(n) :gt(n) :lt(n)	返回第n个元素（从0开始），第n个元素之后元素，第n个元素之前的元素

先看一个例子再作解释：

复制代码 代码如下:

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的区别，前者表示的是在整个页面中第一个p，后者表示的是包含在p中的第一个元素。综合上面的解释，最终的结果应该是：

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

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

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

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