jquery 주의사항 및 일반 구문 summary

jquery 주의사항 및 일반 구문 summary_jquery

WBOY

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

원래의

925명이 탐색했습니다.

1. 선택자에 포함된 특수 기호에 대하여
선택자에는 ".", "#", "(", "]" 등의 특수 문자가 포함됩니다. W3C 규정에 따르면 속성 값은 다음과 같습니다. 다음과 같은 특수 문자를 포함할 수 없습니다. 예:

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

예를 들어 일반적인 방법인 Get을 따르십시오.

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

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

위 코드에서는 올바른 쓰기 방법을 사용할 수 없습니다.

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

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

2. 선택자에 공백이 포함된 경우 아래 예를 참조하세요. . HTML 코드는 다음과 같습니다.

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

< ;div class="test">

코드 복사 코드는 다음과 같습니다: alert($(".test :hidden").length);//출력 4

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

 
결과가 다른 이유는 하위 선택자와 필터 선택자가 다르기 때문입니다. 

코드 복사 코드는 다음과 같습니다. $(".test :hidden") .length; //

 
 위 코드는 "test" 클래스가 있는 요소 내부의 숨겨진 요소를 선택합니다. 

코드 복사 코드는 다음과 같습니다. $(".test:hidden") .length; //

 
 위 코드는 "test" 클래스를 사용하여 숨겨진 요소를 선택합니다. 

3. val() 메서드 정보

jquery에서 val() 메서드는 옵션의 값이나 텍스트 중 하나라도 일치하면 다음과 같습니다. 예:

코드 복사 코드는 다음과 같습니다. <옵션 값 ="1 No."

 
val 사용 여부와 관계없음 ("No. 1") 또는 val("No. 2") 후자의 옵션이 선택됩니다 

4. css() 메소드에 대해

매개변수 값이 숫자인 경우 , 글꼴 크기, 배경색 및 기타 속성에 "-" 기호가 있는 경우 자동으로 픽셀 값으로 변환됩니다. 이러한 속성의 값을 따옴표 없이 설정해야 합니다. 예를 들어 카멜 케이스 쓰기를 사용하세요.

코드 복사 코드는 다음과 같습니다. $ ("p").css({fontSize:"30px", backgroundColor:" #888888"})

따옴표를 포함할 경우 "font-size" 또는 "fontSize"로 적어주시면 됩니다. 좋은 습관을 기르려면 따옴표를 추가하는 것이 좋습니다.
5. height() 메서드에 대해
(1) jQuery1.2 이후의 height() 메서드를 사용하면 창과 문서의 높이를 얻을 수 있습니다.
(2) 높이 값을 얻기 위해 css() 메서드를 사용하는 것과 height() 메서드를 사용하는 것의 차이점은 css() 메서드로 얻은 높이 값이 스타일 설정과 관련이 있을 수 있습니다. "auto"를 얻거나 "10px" " 및 기타 문자열을 얻을 수 있으며 height() 메서드로 얻은 높이 값은 스타일 설정에 관계없이 페이지에 있는 요소의 실제 높이이며 단위가 없습니다. .
6. 이벤트 객체(event)의 속성에 대하여
jQuery는 이벤트 객체의 공통 속성을 캡슐화하여 브라우저 없이도 모든 주요 브라우저에서 이벤트 처리가 정상적으로 실행되도록 합니다. 유형 결정.
(1), event.type() 메서드
이 메서드의 기능은 이벤트 유형을 가져오는 것입니다.

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

 
$("a").click( function(event ) { 
alert(event.type);//이벤트 유형 가져오기 
return false;//링크 점프 방지
}) 

위 코드는 "클릭"을 실행한 후 돌아옵니다.
(2), event.preventDefault() 메소드
이 메소드의 기능은 기본 이벤트 동작을 방지하는 것입니다. W3C 사양을 준수하는 JavaScript의 PreventDefault() 메소드는 IE 브라우저에서 유효하지 않습니다. jQuery는 이를 캡슐화하여 다양한 브라우저와 호환되도록 합니다.
(3), event.stopPropagation() 메소드
이 메소드의 기능은 이벤트 버블링을 방지하는 것입니다. W3C 사양을 준수하는 JavaScript의 stopPropagation() 메서드는 IE 브라우저에서 유효하지 않습니다. jQuery는 이를 캡슐화하여 다양한 브라우저와 호환되도록 합니다.
(4), event.target() 메소드
이 메소드의 기능은 이벤트를 트리거하는 요소를 얻는 것입니다. jQuery가 이를 캡슐화한 후에는 서로 다른 브라우저 간의 차이점을 방지합니다.

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

$("a[href=http: //baidu.com]").click(function(event) {
alert(event.target.href);//이벤트를 트리거한 요소의 href 속성 값을 가져옵니다.
return false;
} );

위 코드를 실행하면 "http://baidu.com"이 반환됩니다.
(5), event.관련Target() 메소드
표준 DOM에서 mouseover, mouseout이 발생하는 요소는 event.target() 메소드를 통해 접근할 수 있고, 관련 요소는 event.관련Target()을 통해 접근할 수 있습니다. ) 방법에 액세스했습니다. mouseover의 event.관련Target() 메소드는 IE 브라우저의 event.fromElement() 메소드와 동일하며, mouseout에서는 IE 브라우저의 event.toElement() 메소드와 동일하며 jQuery는 이를 캡슐화하여 다양한 호환 가능하게 만듭니다. 일종의 브라우저.
(6), event.pageX() 메소드 / event.pageY() 메소드
이 메소드의 기능은 페이지를 기준으로 커서의 x좌표와 y좌표를 구하는 것입니다. jquery를 사용하지 않는 경우 IE 브라우저에서는 event.x()/event.y() 메서드를 사용하고, Firefox 브라우저에서는 event.pageX()/event.pageY() 메서드를 사용합니다. 페이지에 스크롤 막대가 있는 경우 스크롤 막대의 높이와 너비도 추가합니다. IE 브라우저에서는 기본 2px 테두리도 빼야 합니다.

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

 
$("a").click( function(event ) { 
alert("현재 마우스 위치: " event.pageX ", " event.pageY);//페이지를 기준으로 마우스의 현재 좌표를 가져옵니다. 
return false; );

(7), event.which() 메소드
이 메소드의 기능은 마우스의 왼쪽, 가운데, 오른쪽 버튼을 얻는 것입니다. 키보드 이벤트 키보드 키에서 이를 얻기 위한 마우스 클릭 이벤트.

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

$(function() { 
 $(" body").mousedown(function(e) { 
alert(e.which);//1=왼쪽 마우스 버튼 왼쪽; 2=마우스 가운데 버튼; 3=오른쪽 마우스 버튼
}); 
} ); 

 

(8), event.metaKey() 메소드
브라우저마다 .metaKey() 메서드를 사용하여 키보드 이벤트에서 (9), event.originalEvent() 메소드
이 메소드의 기능은 원래 이벤트 객체를 가리키는 것입니다.

7.bind() 메소드에 대하여 (1), 여러 이벤트 유형 바인딩

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

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

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

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

$ (function() {
$("div").bind("click.plugin", function() {
$("body").append("

클릭});
$("div").bind("mouseover.plugin", function() {
$("body").append("

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

dblclick< /p>");
});
$("button").click(function() {
$("div").unbind(".plugin");
} );
});