jquery 주의사항 및 상용 문법 소결

jquery 주의사항 과 상용 문법 소결, jquery 를 배 우 는 친 구 는 소장 하 는 것 이 좋 습 니 다.
상세 출처 참고:http://www.jb51.net/article/23791.htm 1. 선택 기 에 특수 기호 가 포함 되 어 있 음 
선택 기 에는 ".", "\ #", "(", "]" 등 특수 문자 가 포함 되 어 있 습 니 다. W3C 의 규정 에 따라 속성 값 에는 이러한 특수 문자 가 포함 되 어 있 을 수 없습니다. 예 를 들 어: 
코드 는 다음 과 같 습 니 다:

<div id="id#b">bb</div> 
<div id="id[1]"></div> 

일반적인 방식 으로 가 져 오 면: 

$("#id#b"); 
$("#id[1]");

상기 코드 는 요 소 를 정확하게 가 져 올 수 없습니다. 정확 한 작성 방법 은 다음 과 같 습 니 다. 

$("#id\\#b"); 
$("#id\\[1\\]"); 

2. 선택 기 에 빈 칸 이 있 는 경우 
아래 의 이 예 를 보면 HTML 코드 는 다음 과 같다. 

<div class="test"> 
<div style="display:none;">aa</div> 
<div style="display:none;">bb</div> 
<div style="display:none;">cc</div> 
<div class="test" style="display:none;">dd</div> 
</div> 
<div class="test" style="display:none;">ee</div> 
<div class="test" style="display:none;">ff</div> 

jquery 선택 기 를 사용 하여 각각 가 져 옵 니 다: 

alert($(".test :hidden").length);//  4 
alert($(".test:hidden").length);//  3 

다른 결과 가 나 오 는 이 유 는 후대 선택 기와 필터 선택 기 가 다 르 기 때문이다. 

$(".test :hidden").length;//     

이상 코드 는 class 를 'test' 로 선택 한 요소 에 숨겨 진 요소 입 니 다. 
코드 는 다음 과 같 습 니 다:

$(".test:hidden").length;//      

위의 코드 는 숨겨 진 class 를 'test' 로 선택 한 요소 입 니 다. 
3. val () 방법 
jquery 에서 val () 방법 은 마지막 옵션 에서 앞으로 읽 는 것 입 니 다. 옵션 의 value 나 text 중 하나 가 일치 하면 선 택 됩 니 다. 예 를 들 어: 

<option value="1 ">2 </option> 
<option value="2 ">1 </option> 

val ("1 번") 을 사용 하 든 val ("2 번") 을 사용 하 든 뒤에 있 는 option 을 선택 합 니 다. 
4. css () 방법 
매개 변수 값 이 숫자 라면 자동 으로 픽 셀 값 으로 변 환 됩 니 다. 속성 에 "-" 기호 가 있 으 면 font - size, background - color 등 속성 이 있 습 니 다. 이러한 속성 값 을 설정 할 때 따옴표 가 없 으 면 낙타 봉 식 으로 써 야 합 니 다. 예 를 들 어: 

$("p").css({fontSize:"30px", backgroundColor:"#888888"}); 

따옴표 가 붙 으 면 'font - size' 라 고 쓸 수도 있 고 'font Size' 라 고 쓸 수도 있 으 니 따옴표 를 붙 여 좋 은 습관 을 기 르 는 것 을 권장 합 니 다. 
5. height () 방법 
(1) jQuery 1.2 버 전 이후 의 height () 방법 은 window 와 document 의 높이 를 가 져 올 수 있 습 니 다. 
(2) css () 방법 으로 높이 값 을 얻 는 것 과 height () 방법의 차 이 는 css () 방법 으로 얻 는 높이 값 은 스타일 의 설정 과 관련 이 있 고 'auto' 를 얻 을 수 있 으 며 '10px' 와 같은 문자열 을 얻 을 수 있 습 니 다. height () 방법 으로 얻 은 높이 값 은 요소 가 페이지 에 있 는 실제 높이 이 며 스타일 의 설정 과 무관 하 며 단위 가 없습니다. 
6. 이벤트 대상 (event) 의 속성 
jQuery 는 이벤트 대상 의 일반적인 속성 을 패키지 하여 이벤트 처 리 를 브 라 우 저 형식 판단 없 이 정상적으로 실행 할 수 있 도록 합 니 다. 
(1), event. type () 방법 
이 방법의 역할 은 사건 의 유형 을 얻 을 수 있 는 것 이다. 

$("a").click(function(event) { 
alert(event.type);//       
return false;//       
}); 

이상 코드 가 실행 되면 "click" 으로 돌아 갑 니 다. 
(2), event. preventDefault () 방법 
이 방법 은 기본 이벤트 행 위 를 막 는 역할 을 합 니 다. javascript 에서 W3C 규범 에 맞 는 preventDefault () 방법 은 IE 브 라 우 저 에서 유효 하지 않 습 니 다. jQuery 는 다양한 브 라 우 저 를 호 환 할 수 있 도록 패 키 징 했 습 니 다. 
(3), event. stopPropagation () 방법 
이 방법 은 이벤트 의 거품 을 막 는 역할 을 합 니 다. javascript 에서 W3C 규범 에 맞 는 stopPropagation () 방법 은 IE 브 라 우 저 에서 유효 하지 않 습 니 다. jQuery 는 다양한 브 라 우 저 를 호 환 할 수 있 도록 패키지 했 습 니 다. 
(4) 이벤트. target () 방법 
이 방법 은 이 벤트 를 촉발 하 는 요 소 를 가 져 오 는 역할 을 합 니 다. jQuery 는 이 를 봉인 한 후 브 라 우 저의 차 이 를 피 합 니 다. 

$("a[href=http://baidu.com]").click(function(event) { 
alert(event.target.href);//       <a>   href    
return false; 
}); 

이상 코드 실행 후 되 돌아 가기 "http://baidu.com"。 
(5) 이벤트. relatedTarget () 방법 
표준 DOM 에서 mouseover 와 mouseout 에서 발생 하 는 요 소 는 event. target () 방법 으로 접근 할 수 있 으 며, 관련 요 소 는 event. related Target () 방법 으로 접근 할 수 있 습 니 다. event. related Target () 방법 은 mouseover 에서 IE 브 라 우 저 에 해당 하 는 event. from Element () 방법 으로 mouseout 에서 IE 브 라 우 저 에 해당 하 는 event. toElement () 방법 입 니 다.방법, jQuery 는 다양한 브 라 우 저 를 호 환 할 수 있 도록 봉인 했다. 
(6), event. pageX () 방법 / event. pageY () 방법 
이 방법 은 페이지 의 x 좌표 와 y 좌표 에 대한 커서 를 가 져 오 는 것 입 니 다. jquery 를 사용 하지 않 았 을 때 IE 브 라 우 저 에 서 는 event. x () / event. y () 방법 을 사용 합 니 다. fireforx 브 라 우 저 에 서 는 event. pageX () / event. pageY () 를 사용 합 니 다.방법. 페이지 에 스크롤 바 가 있 으 면 스크롤 바 의 높이 와 폭 을 더 해 야 합 니 다. IE 브 라 우 저 에 서 는 기본 2px 의 테 두 리 를 빼 야 합 니 다. 

$("a[href=http://baidu.com]").click(function(event) { 
alert(event.target.href);//       <a>   href    
return false; 
}); 

(7) 이벤트. which () 방법 
이 방법 은 마우스 클릭 이벤트 에서 마우스 의 왼쪽, 가운데, 오른쪽 단 추 를 얻 고 키보드 이벤트 에서 키보드 버튼 을 얻 는 역할 을 한다. 

$(function() { 
$("body").mousedown(function(e) { 
alert(e.which);//1=     left; 2=    ; 3=     
}); 
}); 

(8), event. metaKey () 방법 
브 라 우 저 마다 키보드 에 있 는 < ctrl > 버튼 에 대한 설명 이 다 르 기 때문에 jquery 도 패 키 징 을 했 고 이벤트. metaKey () 방법 을 키보드 이벤트 에서 < ctrl > 버튼 을 가 져 오도 록 규정 했다. 
(9) 이벤트. originalEvent () 방법 
이 방법의 작용 은 원시 적 인 사건 대상 을 가리 키 는 것 이다. 
7. bid () 방법 에 대하 여 
(1) 여러 이벤트 유형 연결 

$(function() { 
$("div").bind("mouseover mouseout", function() { 
$(this).toggleClass("over"); 
}); 
}); 

(2) 이벤트 네 임 스페이스 추가 

$(function() { 
$("div").bind("click.plugin", function() { 
$("body").append("<p>click</p>"); 
}); 
$("div").bind("mouseover.plugin", function() { 
$("body").append("<p>mouseover</p>"); 
}); 
$("div").bind("dblclick", function() { 
$("body").append("<p>dblclick</p>"); 
}); 
$("button").click(function() { 
$("div").unbind(".plugin"); 
}); 
}); 

바 인 딩 된 이벤트 형식 뒤에 네 임 스페이스 를 추가 합 니 다. 이 벤트 를 삭제 할 때 네 임 스페이스 만 지정 하면 됩 니 다. < button > 요 소 를 누 르 면 'plugin' 의 네 임 스페이스 가 삭 제 됩 니 다. 'plugin' 의 네 임 스페이스 가 아 닌 'dblclick' 이벤트 가 여전히 존재 합 니 다. 
(3) 같은 이벤트 이름, 다른 네 임 스페이스 실행 방법 

$(function() { 
$("div").bind("click", function() { 
$("body").append("<p>click</p>"); 
}); 
$("div").bind("click.plugin", function() { 
$("body").append("<p>click.plugin</p>"); 
}); 
$("button").click(function() { 
$("div").trigger("click!");//  click       
}); 
}); 

< div > 요 소 를 누 르 면 click 이벤트 와 click. plugin 이벤트 가 동시에 발생 합 니 다. < button > 요 소 를 누 르 면 click 이벤트 만 발생 하고 click. plugin 이벤트 가 발생 하지 않 습 니 다. trigger ("click!") 뒤의 느낌표 는 네 임 스페이스 에 포함 되 지 않 은 모든 click 방법 과 일치 합 니 다. 둘 다 트리거 가 필요 하 다 면 느낌표 만 제거 하면 됩 니 다. 
8. jQuery 의 애니메이션 
(1) jQuery 로 애니메이션 효 과 를 만 들 려 면 표준 모드 에서 해 야 합 니 다. 그렇지 않 으 면 애니메이션 디 더 링 을 일 으 킬 수 있 습 니 다. 표준 모드 는 파일 머리 에 다음 과 같은 DTD 정 의 를 포함 하도록 요구 합 니 다. 
 
(2) jQuery 의 모든 애니메이션 효 과 는 'slow', 'normal', 'fast' (시간 길 이 는 각각 0.6 초, 0.4 초, 0.2 초) 의 3 가지 속도 변 수 를 지정 할 수 있 습 니 다. 속도 키 워드 를 사용 할 때 따옴표 를 추가 해 야 합 니 다. 예 를 들 어 show ("slow") 는 숫자 를 시간 매개 변수 로 사용 할 때 따옴표 가 필요 하지 않 습 니 다. 예 를 들 어 show (1000). 
(3), animate () 방법 으로 요 소 를 움 직 이기 전에 이 요소 의 'top', 'left', 'buttom', 'right' 스타일 속성 에 영향 을 줄 수 있 도록 요소 의 position 스타일 을 'relative' 또는 'absolute' 로 설정 해 야 합 니 다. 
9. load () 방법 에 대하 여 
이 방법 은 보통 웹 서버 에서 정적 데이터 파일 을 가 져 오 는 데 사 용 됩 니 다. 
(1), 불 러 온 HTML 문서 의 내용 을 load () 로 선별 합 니 다. 
이때 load () 방법의 URL 매개 변수의 문법 구 조 는 "url selector" 입 니 다. url 과 selector 사이 에 빈 칸 이 있 습 니 다. 예 를 들 어 test. html 페이지 의 class 가 "para" 인 내용 만 불 러 오 면 $("\ # xxx"). load ("test. html. para") 를 사용 할 수 있 습 니 다. 
(2), load () 방법의 리 셋 함수 의 매개 변수 
load () 방법 이 제공 하 는 리 셋 함 수 는 3 개의 매개 변수 가 있 습 니 다. 각각 리 턴 을 요청 하 는 내용, 요청 상태 와 XML HttpRequest 대상 을 대표 합 니 다. 코드 는 다음 과 같 습 니 다. 

#("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest) { 
//responseText :         
//textStatus :     : success、error、notmodified、timeout 4  
//XMLHttpRequest ： XMLHttpRequest   
}); 

load () 방법 에 서 는 Ajax 요청 이 성공 하 든 안 하 든 요청 이 완료 되면 (complete) 리 셋 함수 (callback) 가 실 행 됩 니 다. $. ajax () 방법 에 대응 하 는 complete 리 셋 함수 입 니 다. 
10. $. get () 방법 에 대하 여 
(1) response 의 반환 상태 가 success 일 때 만 이 방법의 반전 함 수 를 호출 합 니 다. 
(2) 이 방법의 리 셋 함 수 는 두 가지 인자 가 있 는데 그것 이 바로 data 즉 리 턴 의 내용 (XML 문서, JSON 파일, HTML 세 션 등), textStatus 즉 요청 상태 (success, error, notmodified, timeout 등 4 가지) 이다. 
$. post () 방법 은 $. get () 방법 과 거의 같 습 니 다. 
11. 내용 선택 기 
내용 선택 기: contains () 선택 부호 대소 문자 구분. 
12. 플러그 인 에 대한 일반적인 쓰기 

(function ($) { 
$.fn.extend({ 
"resize" : function (userOptions) { 
var defaultOptions = {height:100, width:100}; 
var mergeOptions = $.extend({}, defaultOptions, userOptions); 
return this.each(function () { 
$(this).animate(mergeOptions, "slow", function () { 
$(this).fadeTo("slow", ".70") 
}); 
}); 
} 
}); 
})(jQuery); 

주의: 
1. 플러그 인 함수 의 this 는 일반적으로 jQuery 대상, 예 를 들 어 여섯 번 째 줄 의 this 입 니 다. 그러나 this. each 의 this 는 DOM 대상 을 말 합 니 다.
상세 출처 참고:http://www.jb51.net/article/23791.htm