jQuery를 시작하는 첫 번째 강의 jQuery selector_jquery

선택기는 getElementById 메소드의 향상된 버전으로 간주할 수 있습니다. getElementById 메소드는 HTML 요소를 반환하고 jQuery 선택기는 HTML 요소의 래퍼를 반환합니다. 이 래퍼 세트를 사용하여 jQuery는 HTML 요소에 더 조작 가능한 방법을 제공합니다. JQuery에서 핵심 함수 중 하나는 $입니다. 네, 그냥 이상한 이름을 가진 함수일 뿐입니다. 이 함수는 선택 함수이며 일반적인 사용법은

var obj=$(selector);

여기서 selector는 문자열이며, 아래에서 소개할 선택자입니다. 반환되는 것은 래핑된 요소 컬렉션입니다. 실제로 JQuery의 핵심 $ 함수의 기능은 선택기로 사용되는 것 이상입니다. 해당 매개변수가 함수인 경우 해당 기능은 페이지의 DOM 요소가 완전히 로드되면 해당 메서드가 실행됩니다. 처형되다. onload는 하나의 함수만 등록할 수 있지만 여러 번 호출할 수 있습니다. 즉, DOM이 완전히 로드된 후 실행되도록 여러 함수를 등록할 수 있으며 onload는 페이지의 모든 콘텐츠가 나타날 때까지 기다려야 합니다. 나중에 실행할 경우, 큰 사진이나 기타 내용이 있을 경우 기능 실행이 지연될 수 있습니다. $ 함수는 DOM 구조가 완전히 로드되는 한 실행될 수 있습니다. 간단한 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

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

p는 선택한 요소를 포함하는 배열형 객체입니다. [Methods] 노드를 열면 jQuery에서 제공하는 다양한 메서드를 볼 수 있습니다. 이 예에서는 요소가 하나만 있으므로 HTML 요소는 getElementById로 얻은 객체와 동일한 p[0]을 통해 얻을 수 있습니다.

jQuery 선택기의 장점은 브라우저가 CSS2와 호환되는지 여부에 관계없이 CSS2 선택기와 거의 완벽하게 호환된다는 것입니다. CSS 선택기에 익숙하지 않은 경우 이전 블로그인 CSS 선택기를 참조하세요. 선택된 요소에 대해 많은 메소드를 적용할 수 있습니다. 이 메소드는 이 기사의 초점이 아닙니다. 여기서는 첫 번째 메소드인 css(attr, value) 메소드가 attr 속성의 값을 제공할 수 있습니다. 래핑 요소의 CSS 속성에서 값으로 설정합니다. 아래 예제에서는 이 방법을 사용하여 페이지 요소에 약간의 글꼴 변경을 추가하여 특정 선택기에 의해 선택된 요소를 구분할 수 있습니다. 이 예제의 내용은 이전 글의 예제와 거의 동일하므로 따로 설명하지 않겠습니다. 다만, 이 글의 예제는 IE6에도 적용 가능합니다!

코드 복사

코드는 다음과 같습니다.

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个元素之前的元素

先看一个例子再작품解释：

复代码 代码如下:

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





<본문>

초급형 DSLR 가격

<테이블>

회사
모델
가격


캐논
1000D
3800


캐논
450D
4100


캐논
500D
4900


캐논
550D
6100


니콘
D3000
3600


니콘
D5000
4600


펜탁스
Kx
3900


소니
a230
2900


소니
a450
4400

날짜: 2010-03

第一条语句是将第一行设置为粗体，大号字.一个设置성스러운 색입니다.

제4조 확장은 这一类的选择器과CSS选择器类似，也可以组使用입니다. 要特别注 p:first 와 p :first 의의있는区别，전투자 表示的是이 整个页面中第一个p，后者表示的是包含inp中的第一个是包含。综合上面的解释，最终的结果应该是 :

외부 설명, 상위 화면은 IE8에서 다운로드할 수 없으며, IE8에서는 더 이상 사용할 수 없습니다.

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

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

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