>웹 프론트엔드 >JS 튜토리얼 >JQuery_jquery에서 this와 $(this)의 차이점을 설명하는 예

JQuery_jquery에서 this와 $(this)의 차이점을 설명하는 예

WBOY
WBOY원래의
2016-05-16 16:28:311427검색

jquery에서는 거의 사용되지 않습니다. 코드를 보다가 사용하고 있는 것을 발견하고, 이것의 값을 디버그해 보니 그런 것 같다고 생각했습니다. 여전히 꽤 유용합니다. 다음은 this와 $(this)의 차이점과 용도에 대한 요약입니다.

 $(this)는 무엇을 생성하나요?

$()는 무엇을 생성하나요? 실제로 $()=jquery()는 jquery 객체를 반환한다는 의미입니다.

일반적으로 단순화를 위해 $()를 직접 사용합니다. 실제로 이 함수는 매개변수 컨텍스트를 생략합니다. 선택자, 즉 $(selector, context)를 기준으로 일치하는 객체를 선택하고 jQuery 래퍼 세트 형태로 반환합니다.

컨텍스트는 Dom 객체 컬렉션 또는 jQuery 패키징 세트일 수 있습니다. 전달한다는 것은 컨텍스트에서 일치하는 객체를 선택한다는 의미입니다. 전달되지 않으면 범위가 문서 객체(즉, 문서의 모든 객체)임을 의미합니다. 페이지), 즉 $(선택기)=$(선택기,문서)입니다.

함수를 호출하는 html 객체를 말합니다.

예:

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

$("#textbox").hover(
함수() {
This.title = "테스트"
},
함수() {
This.title = "확인"
}  
);

여기 있는 것은 실제로 HTML 요소(텍스트 상자)이고 js에 있습니다. 텍스트 상자에는 텍스트 속성이 있으므로 이렇게 작성해도 문제가 없습니다.

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

$("#textbox").hover(
함수() {
$(this).title = "테스트"
},  
함수() {
$(this).title = "확인"
~ );

$(this) 여기 JQuery 객체가 있는데, jQuery 객체에는 title 속성이 없으므로 작성이 잘못되었습니다.

결론:

 현재 컨텍스트 객체가 html 객체임을 나타내며, html 객체가 소유한 속성과 메소드를 호출할 수 있습니다.

$(this), 표시된 컨텍스트 개체는 jquery 메서드 및 속성 값을 호출할 수 있는 jquery 컨텍스트 개체입니다.

인스턴스(탭):

코드 복사 코드는 다음과 같습니다.
tabs($("#nav a"), $(".content"))
기능 탭(탭, 콘텐츠){
content.hide();
content.eq(0).show();
tab.click(함수(){
var index = tab.index(this);
tab.removeClass("현재");
$(this).addClass("현재");
content.hide();
content.eq(index).animate({opacity:'show'}, 200);
});
}

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.