JQuery Tips(2)$()포장 집 에 대해 모 르 는

쉽게 이해 할 수 있 을 것 같 습 니 다.$()로 포 장 된 JQuery 대상 은 항상 집합 형식 으로 나타 납 니 다.포장 이 한 대상 만 있 더 라 도

 
<div id="a"></div> 
<div id="b"></div> 
<script type="text/javascript"> 
$("div").html("hi"); 

</script> 

위 에서 선택 한 두 개의 DIV 의 내용 은 모두'hi'포장 집합 안의 요소 순서 로 바 뀔 것 입 니 다.JQuery 로 포 장 된 요소 중에서 포장 에 포 함 된 내부 순 서 는 HTML 흐름 에 따라 먼저 뒤로 배 열 됩 니 다.선택 순서 가 아 닙 니 다

 
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
var Se = $("#b,#a"); 
alert(Se.get(0).innerHTML); 
alert(Se.get(1).innerHTML); 

</script> 

위의 코드 는 볼 수 있 습 니 다.b 가 먼저 선택 되 었 지만 alert 를 실행 할 때'here is a'를 먼저 팝 업 합 니 다.이 어'here is b'JQuery 대상 과 DOM 의 전환 입 니 다.먼저 DOM 이 JQuery 대상 으로 바 뀌 었 습 니 다.이것 은 매우 쉬 우 며$()에 만 포함 시 키 면 됩 니 다.그러나 주의해 야 할 것 은...JQuery 에 포 장 된 요소 의 이벤트 에서 this 는 항상 현재 대상 을 가리 키 고 있 습 니 다

 
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
$("div").click(function() { 
alert(this.id);//this Ö¸Ïòµ±Ç°µÄDOM 
}); 

</script> 

JQuery 포장 에 집 중 된 요 소 를 DOM 으로 바 꾸 는 것 은 JQuery 에 게 도 간단 한 일 입 니 다.대부분의 경우 JQuery 의 get 방법 을 사용 합 니 다

 
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
var Jq = $("div"); 
alert(Jq.get(0).id); //alert "a" 
alert(Jq.get()[0].id); //alert "a" as well 
alert(Jq[0].id);//alert "a" 
</script> 

보면 get 방법 으로 색인 을 매개 변수 로 하면 색인 값 의 DOM 대상 을 되 돌려 줍 니 다.파 라 메 터 를 추가 하지 않 으 면 JQuery 포장 에 집 중 된 전체 배열 로 돌아 가 는 간단 한 방법 은 JQuery 포장 집합 뒤에 배열 기 호 를 직접 추가 하 는 것 입 니 다.위의 Jq[0]를 Jq.get(0)의 간편 한 방식 으로 볼 수 있 습 니 다.-)현재 JQuery 포장 에 집 중 된 요소 의 개 수 를 검사 할 때 JQuery 포장 에 집 중 된 요소 의 개 수 를 검사 해 야 합 니 다.저 희 는 포장 집의 length 속성(이 속성 은 VS 에서 알려 주지 않 음)을 통 해 직접 사용 할 수 있 습 니 다

 
div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
var Jq = $("div"); 
alert($("Div").length);//alert "2" 
</script> 

이 속성 은 현재 포장 집합 이 비어 있 는 지 직접 검사 할 수 있 습 니 다

 
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
if ($("div").length) { 
alert("Not Empty"); 
} 
if ($("div").get(0)) { 
alert("Not Empty"); 
} 
</script> 

위의 두 alert 가 모두 실 행 됩 니 다.두 번 째 방식 은 현재 포장 집중 의 첫 번 째 요소 가 비어 있 는 지 확인 함으로써 포장 집합 이 비어 있 는 지 확인 합 니 다.포장 집합 은 특정한 상황 에서 도'항상 집합 을 대상 으로 하지 않 습 니 다'아까 는 항상 집합 을 대상 으로 한다 고 하지 않 았 습 니까?왜 또 변 했 습 니까?사실은 집합 을 위 한 것 이지 만 JQuery 의 일부 방법 으로 추출 할 때 그렇지 않 습 니 다.예 를 들 어 아래 코드:

 
<div id="a" >here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
alert($("div").attr("id")); 
</script> 

위의 코드 는 alert 의 첫 번 째 div 의 id 만 사용 합 니 다.이런 상황 에서 어떻게 합 니까?네,JQuery 의 Each 방법 으로 each 방법 은 포장 에 집 중 된 모든 요 소 를 옮 겨 다 닙 니 다

 
<div id="a" >here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
$("div").each(function() { 
alert($(this).attr("id")); 
}); 
</script> 

위의 코드 는 두 개의 alert 를 실행 합 니 다.-)