먼저 사용자 정의 선택기 개발을 소개하겠습니다.
(function ($) {
$.expr[':'].customselector = function (object,index,properties,list) {
//code
};
})(jQuery);
호출 시 쓰기:
$(a:customselector) 이제 먼저 함수에 사용되는 다양한 매개변수에 대해 설명하겠습니다.
객체: jquery 객체가 아닌 현재 dom 요소에 대한 참조입니다. dom 요소와 jquery 객체는 완전히 다르다는 점을 강조할 필요가 있습니다. a 태그는 dom 요소를 나타내고 $('a')는 js 객체인 jquery 객체를 나타냅니다. 나는 우정에 대한 구글 관련 지식을 모른다.
인덱스: 아래 첨자 0이 있는 배열 인덱스입니다.
속성: 선택기 메타데이터 배열.
목록: DOM 요소 배열.
이 매개변수 중 첫 번째 매개변수는 필수이고 나머지 매개변수는 선택사항입니다.
selector 함수는 bool 값을 통해 현재 요소가 포함되는지 여부를 결정하는데, true는 포함, false는 포함되지 않습니다.
여기서는 외부 링크를 가리키는 태그만 선택하는 태그 선택기를 구현합니다.
(function ($) {
$.expr[':'].external = function (object) {
if ($(object ).is( 'a')) {
return object.hostname != location.hostname;
}
})(jQuery); 이제 구현을 시작합니다. 프롬프트 상자 플러그인의 개발 프로세스는 자세히 설명하지 않습니다. 가장 중요한 것은 메모가 있는 코드 구현입니다.
코드 복사
코드는 다음과 같습니다. (함수($) {//업데이트 좌표 위치$.fn.updatePosition = function (event) {
return this.each(function () {
$(this).css({
left: event.pageX 20,
top : event.pageY 5
});
});
}
//a 태그의 제목 속성 내용을 표시하는 프롬프트 상자 플러그인
$.fn.tooltip = function () {
return this.each(function () {
//현재 객체 가져오기
var self = $(this);
//가져오기 title 속성 값
var title = self.attr ('title')
//현재 객체가 태그인지, title 속성에 내용이 있는지 확인
if (self.is('a') ) && title != '') {
self.removeAttr('title')
.hover(function (event) {
//마우스가 대상 개체 위에 있습니다
$('< ;div id="tooltip">
') .appendTo('body')
.text(title)
.hide()
.updatePosition(event)
. fadeIn(400);
}, function () {
//마우스아웃
$('#tooltip').remove()
}).mousemove(function (이벤트) 🎜>//마우스 이동
$('#tooltip') .updatePosition(event)
})
}
}); );
이 기사가 도움이 되기를 바랍니다. 완전한 효과를 보고 싶은 친구는 데모를 다운로드할 수 있습니다:
jQuery.plugin.tooltip