집 >웹 프론트엔드 >H5 튜토리얼 >jQuery 사용자 정의 함수 적용 및 구문 분석

jQuery 사용자 정의 함수 적용 및 구문 분석

php中世界最好的语言원래의: 2018-03-14 15:35:502666검색

이번에는 jQuery커스텀 함수적용 및 분석을 가져왔습니다. jQuery 커스텀 함수 사용 시 주의사항은 무엇인가요?

jQuery 사용자 정의 함수
1. jQuery 함수를 확장하는 방법은 무엇입니까?
jQuery에는 두 가지 종류의 사용자 정의 함수 확장이 있습니다. 하나는 클래스 수준 함수 개발입니다. 이는 jQuery를 클래스로 취급하고 함수를 클래스 자체로 확장하는 것과 동일하며, 전역 함수라고도 합니다. jQuery의 전역 함수는 jQuery 네임스페이스 에 속하는 함수입니다. 다른 하나는 jQuery 선택기에 의해 생성된 객체에 메서드를 추가하는 객체 수준 함수 개발입니다. 두 기능의 개발은 아래에 자세히 설명되어 있습니다.

1) 전역 함수 개발:
클래스 수준 플러그인 개발에 대한 가장 직접적인 이해는 jQuery 클래스에 클래스 메서드를 추가하는 것이며 이는 정적 메서드를 추가하는 것으로 이해할 수 있습니다. 일반적인 예는 jQuery 네임스페이스에 정의된 jQuery.AJAX() 함수입니다. 클래스 수준의 플러그인 개발은 다음 형식으로 확장될 수 있습니다:
a. 새로운 전역 함수 추가
전역 함수를 추가하려면 다음과 같이 정의하기만 하면 됩니다.

   jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };

그런 다음 $.test()를 호출합니다. ; 달리다.
b. 여러 전역 함수 추가
여러 전역 함수를 추가하려면 다음 정의를 사용할 수 있습니다.

  jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };  
     jQuery.test1 = function() { 
            alert(‘This is a test1!!!’); 
         };

호출 방법은 위와 동일합니다.

c. jQuery.extend(object)

jQuery.extend({ 
         test:function() { 
                alert(‘This is a test!!!’); 
         }, 
         test1: function() { 
                alert(‘This is a test1!!!’); 
             },  
         add:function(a,b){ 
             return a+b; 
         } 
});

2)를 사용하세요. 객체 수준 함수 개발:
객체 수준 함수 개발은 다음 두 가지 방법으로 수행할 수 있습니다
a. jQuery는 달러 기호를 네임스페이스로 제한하기 위해 이러한 방식으로 직접 작성됩니다. 다른 라이브러리의 $ 기호와의 충돌을 방지하기 위해 정의 프로세스 중에 이 기호를 계속 사용할 수 있습니다.

b. 플러그인의 동작을 제어하기 위해 옵션 매개변수를 허용합니다.

사용자 정의 함수가 많은 매개변수를 전달해야 하는 경우 매개변수가 너무 많아 가독성이 좋지 않습니다. 예를 들어 객체를 정의하려고 합니다. p에 대한 객체 배경색과 텍스트 색상을 설정하는 함수는 다음과 같이 작성할 수 있습니다:

(function(){
.fn.extend({ 
              sayHello:function(){ 
                    alert(‘sayHello’); 
            } 
            }) ; 
          })(jQuery);

함수 테스트 코드 호출:

 $.fn.extend({ 
             setColor:function(options,callback){ 
               var defaults = { 
                               fontcolor: ‘red’, 
                               background: ‘yellow’ 
                             };
            $.extend(defaults, options); //这句话是将default和options合并成一个对象
            //设置样式
            console.log(this);
            $(this).css('background-color',defaults.background);
            $(this).css('color',defaults.fontcolor);
        }     
        }) ;

테이블 배경은 빨간색이고 글꼴은 파란색임을 알 수 있습니다.

2. 분석 요약 jQuery 사용자 정의 함수 적용 및 구문 분석 jQuery의 API 매뉴얼에서 우리는 jQuery.extend()와 jQuery.fn이 jQuery에서 내부적으로 사용되지만 실제로는 jQuery와 jQuery.fn에 탑재된 두 가지 다른 메소드를 볼 수 있습니다. 동일한 코드로 구현되었지만 기능이 다릅니다. 공식 설명 :

       var options={ 
                   fontcolor: ‘blue’, 
                   background: ‘red’  
                   }; 
       $(function(){
        $(".table").setColor(options);
    });

jQuery 인스턴스 메소드) jQuery에는 정적 메소드와 인스턴스 메소드가 있음을 알 수 있는데, jQuery.extend()와 jQuery.fn.extend()의 차이점은 하나를 확장하여 사용한다는 점입니다. 정적 메서드 - 인스턴스 메서드를 확장하는 데 사용되는 메서드입니다.

jQuery 사용자 정의 부분의 소스 코드는 다음과 같습니다.

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中) 
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的

JavaScript 메소드도 객체이므로 소위 확장 함수는 jQuery.extend 및 jQuery.fn.extend 두 객체에 대한 새로운 속성을 확장하는 것입니다. 형식적 매개변수는 우리 자신의 것입니다. 정의된 함수는 결국 복사되어 대상 객체로 반환되고 jQuery.extend 객체 또는 jQuery.fn.extend 객체에 병합됩니다. 이는 본질적으로 jQuery 클래스 자체에 메서드를 추가하는 것과 동일합니다. jQuery 객체의 프로토타입 객체에 메소드를 추가합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!