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

WBOY

풀어 주다： 2016-05-16 18:32:35

원래의

1133명이 탐색했습니다.

선택기는 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"> 
 
JQuery 첫 페이지<br>< script type=" text/javascript" src="jquery-1.3.2.js"></script> <br><br><script type="text/javascript"> (){ <br>var p=$('#p1') <br>alert(p) <br>}) <br></head> <body> <br><p id="p1">저는 p</p> <br></html> <br><br> >
<br>보시다시피 가장 간단한 선택기는 요소의 ID를 선택기로 사용하는 getElementById와 유사합니다. p가 무엇인지 확인하려면 js 디버거를 사용하세요. <br>
<br>

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

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

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