DIY 손으로 쓴 jQuery 플러그인_jquery 요약

jQuery는 Prototype 이후 또 다른 뛰어난 JavaScript 프레임워크로 개발자들에게 깊은 사랑을 받고 있으며 다양한 사용자를 보유하고 있습니다. jQuery의 좋은 점은 사용자 정의입니다. 즉, jQuery의 다양한 기능을 개선하고, 필요한 기능을 사용자 정의하고, 중복 코드를 제거하고, 페이지를 로드할 때 어느 정도 유연성을 갖기 위해 자체 플러그인을 작성할 수 있습니다. 개선.

인터뷰를 마치고 정말 감동받았습니다. 열 가지를 아는 개발자가 되고 싶나요, 아니면 하나에 능숙한 개발자가 되고 싶나요? 그래서 며칠 동안 jQuery 소스 코드를 부지런히 연구하면서 jQuery의 이벤트 메커니즘, 선택기, 브라우저 호환성이 달성되는 방법에 대해 배웠습니다. 그 이후로 나는 항상 내 자신의 작은 기능을 간단하게 구현하기 위해 jQuery 플러그인을 작성하고 싶었습니다.

위 그림과 같이 플러그인에서 구현한 기능은 마우스가 링크 위에 있을 때 링크가 이동하고, 마우스가 떠난 후에는 링크가 원래 위치로 돌아오는 것입니다.

Html의 핵심은

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

• 월요일


• 화요일
• 수요일
• 목요일




위의 시작 부분에서 단순히 jQuery를 사용하여 함수를 구현하면 다음과 같이 구현됩니다.

코드 복사 코드는 다음과 같습니다. $(문서).ready(함수() {

$("#catagory a").hover(function() {

           $(this).animate({ paddingLeft: "20px" }, { 대기열: false, 기간: 500 });                              }, 함수() {
           $(this).animate({ paddingLeft: "0" }, { 대기열: true, 기간: 500 });                               })
});



이제 함수를 캡슐화하여 플러그인.js로 작성한 다음 HTML 파일에 링크합니다.

코드 복사

코드는 다음과 같습니다.

(함수($) {
$.fn.extend({
//플러그인 이름 - paddingList
        paddingList: 함수(옵션) {                        //매개변수 및 기본값 ​​
            var 기본값 = {                                                           animatePadding: 10,
hoverColor: "검은색"
                                                                         var options = $.extend(기본값, 옵션);                                       return this.each(function () {                                                               var o = 옵션;                     //요소 컬렉션을 변수에 할당합니다. 이 경우 ul 개체입니다.                 var obj = $(this);                          //ul에서 개체 가져오기
                var items = $("li a", obj);                        
에게 items.hover(함수 () {
$(this).css("color", o.hoverColor)
//queue false는 애니메이션 대기열에 추가하지 않음을 의미합니다
                              $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, 기간: 300 });
}, 기능 () { $(this).css("색상", "")
$(this).animate({ paddingLeft: "0" }, { 대기열: true, 기간: 300 });                 });                                         
             });                                ~ })
})(jQuery);



물론 외부 링크 플러그인에는 src의 원본 jquery 라이브러리 파일도 필요합니다. 플러그인을 호출하는 방법은 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.


$(문서).ready(함수() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" })
});