> 웹 프론트엔드 > JS 튜토리얼 > jquery 플러그인 학습(2)_jquery

jquery 플러그인 학습(2)_jquery

WBOY
풀어 주다: 2016-05-16 17:51:06
원래의
1224명이 탐색했습니다.

전역 함수를 생성하려면 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 요소

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿