jquery 플러그인 학습(2)_jquery

전역 함수를 생성하려면 jquery 객체에 속성을 추가하기만 하면 되며, jquery.fn에 속성을 추가하면 jquery 객체를 생성하는 방법도 가능합니다. 실제로 jquery.fn 객체는 jquery.prototype 프로토타입의 별칭입니다. 객체를 변경하려면 별칭을 사용하세요. 참조하기 쉽습니다.

데모:

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

jQuery .fn.test = function(){
alert('jquery 객체 메서드입니다.');
}

그런 다음 모든 jquery 객체에서 이 메서드를 호출할 수 있습니다.

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

$(function(){
$(' h1').click(function(){
$(this).test();
})
})

여기, 거기 dom 노드와 일치하는 장소가 아니므로 전역 함수를 작성하는 것도 가능합니다(이전 섹션에서 언급한 것처럼). 그러나 jquery 개체 메서드를 사용할 때 함수 본문의 this 키워드는 항상 현재 jquery 개체를 참조하므로 위의 메서드를 사용하여 동적 프롬프트 정보를 구현하면 됩니다. 코드는 다음과 같습니다.

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

jQuery.fn.test = function(){
alert(this[0].nodeName) //현재 jquery 객체의 dom 노드 이름을 묻는 메시지 표시
}

여기서 중요한 점이 있습니다. 위의 예에서 jquery 선택기가 배열 유형 DOM 노드 컬렉션을 반환하므로 this 포인터가 현재 컬렉션을 가리키므로 표시하려면 현재 요소의 노드 이름인 경우 this 포인터 뒤에 현재 요소를 지정해야 합니다.

생각: jquery 선택기가 여러 요소와 일치하는 경우 현재 요소의 개체를 어떻게 정확하게 지정할 수 있습니까? -----

이 문제를 해결하려면 현재 jquery 객체 메서드의 컨텍스트에서 Each() 메서드를 호출하고 이 포인터가 암시적 반복을 통해 차례로 일치하는 각 dom 요소를 마시게 할 수도 있습니다. 예를 들어 이전 예를 추가로 수정한 개체

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

jQuery.fn.test = function(){
this.each(function(){ //일치하는 요소를 탐색합니다. 여기서 this는 객체 컬렉션을 나타냅니다.
alert(this.nodeName); // 현재 jquery를 프롬프트합니다. 객체의 DOM 노드 이름(여기 및 위의 변경 사항에 유의하세요. 아래 첨자는 사라집니다.)
})
}

그런 다음 메서드를 호출하면 걱정할 필요가 없습니다. jquery 선택기가 일치하는 요소 수입니다. 예를 들어, 다음 예에서 다른 요소를 클릭하면 현재 노드 이름이

코드 복사 메시지가 표시됩니다. 코드는 다음과 같습니다. 다음과 같습니다:

$(function(){
$('body *').click(function(){
$(this).test();
});
});

코드 복사

< ;h1>ceshi
dddddddd
;div>div 요소