jQuery 입문 제1 과 jQuery 선택 부호

9912 단어 jQuery선택 문자
선택 부 호 는 증강 판 getElement ById 방법 이 라 고 볼 수 있 습 니 다.getElement ById 방법 은 HTML 요 소 를 되 돌려 줍 니 다.jQuery 선택 자 는 HTML 요소 의 포장 을 되 돌려 줍 니 다.이 포장 집 을 이용 하여 jQuery 는 HTML 요소 에 더 많은 조작 방법 을 부여 했다.JQuery 에서 핵심 위치 에 있 는 함 수 는$입 니 다.네,그것 은 함수 입 니 다.이름 이 좀 이상 합 니 다.이 함 수 는 선택 함수 입 니 다.일반적인 용법 은 var obj=$(selector)입 니 다.그 중에서 selector 는 문자열 입 니 다.바로 아래 에 중심 을 두 고 소개 해 야 할 선택 문자 입 니 다.원소 의 포장 집합 을 되 돌려 줍 니 다.사실 JQuery 의 핵심$함수 의 위력 은 선택 문자 로 만 사용 되 는 것 이 아 닙 니 다.매개 변수 가 함수 일 때 onload 이벤트 와 같은 역할 을 합 니 다.페이지 의 DOM 요소 가 완전히 불 러 오 면 매개 변수 내 방법 이 실 행 됩 니 다.이 는 onload 보다 유리 합 니 다.onload 는 1 개의 함수 만 등록 할 수 있 습 니 다.그러나 여러 번 호출 될 수 있 습 니 다.즉,여러 개의 함 수 를 DOM 로 딩 한 후에 실행 할 수 있 습 니 다.또한 onload 는 페이지 의 모든 내용 을 불 러 온 후에 실행 해 야 합 니 다.큰 그림 등 내용 이 있 으 면 함수 실행 이 지연 될 수 있 습 니 다.$함 수 는 DOM 구조 가 완전히 불 러 오기 만 하면 실 행 됩 니 다.다음은 간단 한 예 를 보 자.
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery First Page</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript">
$(function(){
var p=$('#p1');
alert(p);
});
</script>
</head>
<body>
<p id="p1">I'm a p</p>
</body>
</html>
이 를 통 해 알 수 있 듯 이 가장 간단 한 선택 기 는 getElement ById 와 유사 한 요소 의 ID 를 선택 문자 로 사용 하 는 것 입 니 다.p 가 무엇 인지 볼 수 있 습 니 다.js 디 버 거 를 이용 하여 볼 수 있 습 니 다.
image
p 는 선택 한 요 소 를 포함 하 는 배열 과 유사 한 대상 입 니 다.[Methods]결점 을 열 면 많은 방법 을 볼 수 있 습 니 다.모두 jQuery 가 제공 하 는 방법 입 니 다.이 예 에서 요 소 는 하나 밖 에 없 기 때문에 p[0]을 통 해 이 HTML 요 소 를 얻 을 수 있 습 니 다.p[0]는 getElement ById 가 얻 은 대상 과 같 습 니 다.
jQuery 선택 문자 의 강 한 점 은 브 라 우 저가 CSS 2 를 호 환 하 든 말 든 CSS 2 를 거의 호 환 하 는 것 입 니 다.CSS 선택 부적 에 익숙 하지 않 으 면 이전 로그:CSS 선택 부적 을 참고 하 십시오.선택 한 요소 에 대해 그 에 게 많은 방법 을 가 할 수 있 습 니 다.이런 방법 은 본 고 에서 소개 한 중점 이 아 닙 니 다.여기 서 먼저 css(attr,value)방법 을 소개 합 니 다.이 방법 은 포장 요소 의 css 속성 중의 attr 속성의 값 을 value 로 설정 할 수 있 습 니 다.아래 의 예 는 이 방법 을 이용 하여 페이지 요소 에 글씨체 의 변 화 를 추가 하 는 것 입 니 다.우 리 는 이 구역 에서 어떤 선택 부호 가 도대체 어떤 요 소 를 선 택 했 는 지 구분 할 수 있다.이 예 는 나의 전편 의 예 내용 과 거의 같다.나 는 설명 을 하지 않 겠 다.다만 이 편의 예 도 모두 IE6 에 적용 된다!
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Selector</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$("h1,h2").css("color","Red"); //element selector
$(".warning").css("font-style","italic"); //class selecotr
$("p.warning").css("color","Red");
$("p.big.warning").css("font-size","x-large");//multi-class selector
$("*[id]").css("color","red"); //attribute selector
$("p[class]").css("color","blue");
$("p[class][id]").css("font-size","x-large");
$("div[title='title']").css("font-weight","bold");
$("div[title^='title']").css("color","red");
$("div[title$='World']").css("color","blue");
$("div[title~='Hello']").css("font-size","x-large");
$("div[title*='Hello']").css("font-style","italic");
$("div[title|='Hello']").css("background-color","silver");
$("p .warning").css("font-size","x-large"); //decendent selector
$("body > .warning").css("border","1px solid"); //child selector
});
</script>
</head>
<body>
<h1>
This is H1</h1>
<h2>
This is H2</h2>
<h3>
This is H3</h3>
<p class="warning">
Real Warning!</p>
<span class="warning">Common Worning</span>
<p class="big warning ">
Warning and Big</p>
<div id="title">
I am title</div>
<p class="warning">
Real Warning!</p>
<p id="idp1" class="myclass">
P with an ID and class</p>
<p>
The last line.</p>
<p id="idp2">
P with an ID</p>
<div title="title" >I am title</div>
<div title="title2">I am title2</div>
<div title="Hello World">Hello World</div>
<div title="HelloWorld">HelloWorld</div>
<div title="Hello-World">Hello-World</div>
<p><span class="warning">Class warning inside p</span></p>
</body>
</html>
효 과 는 다음 과 같다.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 번 째 요소 이전의 요 소 를 되 돌려 줍 니 다.
먼저 하나의 예 를 본 다음 에 설명 하 자.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Selector</title>
<style type="text/css">
table
{
border-collapse: collapse;
font-family:Verdana;
}
td
{
padding-left: 10px;
padding-right: 10px;
border: solid 1px black;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$('tr:first').css({fontWeight:'bold',fontSize:'large'});
$('tr:even').css('background-color','silver');
$('tr td:first').css('color','red');
$('tr:gt(0) :first-child').css('font-style','italic');
$('p:eq(0)').css({fontFamily:'Arial',fontSize:'x-large'});
});
</script>
</head>
<body>
<p>Entry Level DSLR Prices</p>
<table>
<tr>
<td>Company</td>
<td>Model</td>
<td>Price</td>
</tr>
<tr>
<td>Canon</td>
<td>1000D</td>
<td>3800</td>
</tr>
<tr>
<td>Canon</td>
<td>450D</td>
<td>4100</td>
</tr>
<tr>
<td>Canon</td>
<td>500D</td>
<td>4900</td>
</tr>
<tr>
<td>Canon</td>
<td>550D</td>
<td>6100</td>
</tr>
<tr>
<td>Nikon</td>
<td>D3000</td>
<td>3600</td>
</tr>
<tr>
<td>Nikon</td>
<td>D5000</td>
<td>4600</td>
</tr>
<tr>
<td>Pentax</td>
<td>Kx</td>
<td>3900</td>
</tr>
<tr>
<td>Sony</td>
<td>a230</td>
<td>2900</td>
</tr>
<tr>
<td>Sony</td>
<td>a450</td>
<td>4400</td>
</tr>
</table>
<p>Date: 2010-03</p>
</body>
</html>
첫 번 째 문 구 는 첫 줄 을 굵 은 몸,큰 글자 로 설정 하 는 것 이다.두 번 째 문장 은 짝수 줄 의 배경 을 은회색 으로 설정 하 는 것 이다.세 번 째 문장 은 tr 에 있 는 td 요소 의 첫 번 째 를 빨간색 으로 설정 합 니 다.네 번 째 문장 은 두 번 째 줄 에서 모든 tr 의 첫 번 째 하위 요 소 를 기울 임 꼴 로 설정 하 는 것 이다.
제4 조 선택 기의 조합 사용 을 보 여 준다.이런 종류의 선택 기 는 CSS 선택 기와 유사 하 며 조합 해서 도 사용 할 수 있다.특히 p:first 와 p:first 의 차 이 를 주의해 야 한다.전 자 는 전체 페이지 에서 첫 번 째 p 를 나타 내 고 후 자 는 p 에 포 함 된 첫 번 째 요 소 를 나타 낸다.위의 해석 을 종합 하면 최종 결 과 는 다음 과 같다.
image
주제 외 에 위의 이 그림 은 IE8 에서 잘 랐 기 때문에 IE 가 글씨체 에 대한 렌 더 링 이 정말 눈 과 마음 을 즐겁게 한다 고 말 할 수 밖 에 없다.크롬 FF 도 이렇게 예 쁘 지 않 아 요.
본론 으로 돌아 가 jQuery 의 마지막 선택 기 를 계속 소개 합 니 다.이러한 선택 기 는 css 의 위 류 와 비슷 합 니 다.예 를 들 어:
:button
input[type=button]선택
:checked
선택 한 체크 상자 나 단추
:contains('xxx')
문자열 xxx 를 포함 하 는 요소
구체 적 인 용법 은 비교적 간단 하여 상세 하 게 소개 하지 않 는 다.

좋은 웹페이지 즐겨찾기