Home > Web Front-end > JS Tutorial > The first lesson of getting started with jQuery jQuery selector_jquery

The first lesson of getting started with jQuery jQuery selector_jquery

WBOY
Release: 2016-05-16 18:32:35
Original
1132 people have browsed it

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">

JQuery First Page





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:

image

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:




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





效果如下:
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个元素之前的元素

先看一个例子再作解释:

复制代码 代码如下:



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

image

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

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

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

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template