jquery 주의사항 및 일반 구문 summary_jquery

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

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

bb

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

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

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

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

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

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

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

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

< ;div class="test">

aa

bb

> ;

cc div>

dd

>

ee

ff

jquery를 사용하여 선택 별도로 가져오기:

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

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

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

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

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

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

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

3. val() 메서드 정보

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

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

1

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");
});
$("button").click(function() {
$("div").unbind(".plugin");
} );
});

바운드 이벤트 유형 뒤에 네임스페이스를 추가하므로 이벤트 삭제 시에만 네임스페이스를 지정하면 됩니다. 요소를 클릭하면 "plugin" 네임스페이스가 삭제되지만 "plugin" 네임스페이스에 없는 "dblclick" 이벤트는 여전히 존재합니다.
(3), 동일한 이벤트 이름, 다른 네임스페이스 실행 방법

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

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

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

");
});
$("button").click(function() {
$("div").trigger("클릭!" ); //클릭 후 느낌표에 주목하세요
})

동시에 이벤트가 발생합니다.

요소를 클릭하면 click.plugin 이벤트가 아닌 click 이벤트만 트리거됩니다. Trigger("click!") 뒤의 느낌표는 네임스페이스에 포함되지 않은 모든 클릭 방법과 일치합니다. 둘 다 실행해야 하는 경우 느낌표를 제거하면 됩니다.

8. jQuery의 애니메이션 정보 (1) 표준 모드에서 애니메이션 효과를 만들려면 jQuery를 사용하세요. 그렇지 않으면 애니메이션 지터가 발생할 수 있습니다. 표준 모드에서는 파일 헤더에 다음 DTD 정의가 포함되어야 합니다.

(2). jQuery의 모든 애니메이션 효과는 "느림", "보통" 및 "빠름"이라는 3가지 속도 매개변수를 지정할 수 있습니다(시간 길이는 각각 0.6초, 0.4초, 0.2초). speed 키워드를 사용할 때는 show("slow")와 같이 인용하십시오. 시간 매개변수로 숫자를 사용하는 경우 show(1000)와 같이 인용할 필요가 없습니다.
(3) 요소에 애니메이션을 적용하기 위해 animate() 메서드를 사용하기 전에 요소의 "상단", "왼쪽", "하단" 및 "오른쪽" 스타일 속성에 영향을 미치려면 먼저 변경해야 합니다. 요소의 위치 스타일을 "상대" 또는 "절대"로 설정합니다.

9. load() 메서드 정보
이 메서드는 일반적으로 웹 서버에서 정적 데이터 파일을 가져오는 데 사용됩니다. (1) 로드된 HTML 문서의 내용을 필터링하려면 load()를 사용하세요.
이때, load() 메서드의 URL 매개변수 구문 구조는 "url selector"라는 점에 유의하세요. URL과 선택기 사이에 공백이 있습니다. 예를 들어 test.html 페이지에서 "para" 클래스의 콘텐츠만 로드해야 하는 경우 $("#xxx").load("test.html .para"); 2) load() 메소드 콜백 함수의 매개변수
load() 메소드에서 제공하는 콜백 함수에는 3개의 매개변수가 있으며 각각 요청에서 반환되는 내용, 요청 상태 및 XMLHttpRequest 객체를 나타냅니다.

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

#("#resText" ).load("test.html", function(responseText, textStatus, XMLHttpRequest) {

//responseText: 요청에 의해 반환된 콘텐츠
//textStatus: 요청 상태: 4가지 유형: 성공, 오류, 수정되지 않음, timeout
//XMLHttpRequest: XMLHttpRequest object
});


load() 메서드에서는 Ajax 요청의 성공 여부에 관계없이 콜백 함수(콜백) )는 요청이 완료되는 한 트리거됩니다. 이는 $.ajax() 메서드의 전체 콜백 함수에 해당합니다.

10. $.get() 메소드에 대하여
(1) 이 메소드의 콜백 함수는 응답의 반환 상태가 성공인 경우에만 호출됩니다. (2) 이 메서드의 콜백 함수에는 반환된 콘텐츠(XML 문서, JSON 파일, HTML 조각 등일 수 있음)인 data와 요청 상태인 textStatus라는 두 가지 매개 변수가 있습니다. (성공, 오류, 수정되지 않음, 타임아웃 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("느린", ".70")
})
})
}
})(jQuery);

참고:
1. 플러그인 함수의 이는 일반적으로 여섯 번째 줄과 같은 jQuery 개체입니다. 하지만 this.each의 this는 DOM 개체를 참조합니다.