jQuery 기본 메서드를 수정하거나 확장하는 코드 예제-JS 튜토리얼-php.cn

jQuery 기본 메서드를 수정하거나 확장하는 코드 예제

PHPz

풀어 주다： 2018-09-29 17:29:58

앞으로

1167명이 탐색했습니다.

이 글에서는 jQuery 네이티브 메소드를 수정하거나 확장하기 위한 코드 예제를 주로 소개합니다. 이 글에서는 jquery 네이티브 메소드 val을 확장하는 예제를 사용하여 jquery 네이티브 메소드를 수정하거나 확장하는 방법을 설명합니다.

jQuery 메소드 코드 예제 수정 또는 확장:

jQuery가 강력하고 사용하기 쉬운 클래스 라이브러리라는 것은 의심의 여지가 없습니다.

폭넓은 적용을 통해 위의 관점을 확인할 수 있지만, 누구도 완벽하지 않으며, 금도 완벽하지 않다는 속담처럼 jQuery도 언제든지 완벽하게 작업을 완료할 수는 없습니다. 또는 경우에 따라 향후에는 jQuery의 원래 메서드를 확장하고 수정해야 하지만 가장 좋은 메서드는 여전히 원래 기능을 유지합니다.

코드 예:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.prototype.val = function (base) {
  return function () {
    var s = this;
    var a = "data-property";
    var p = s.attr(a);
    var isset = arguments.length > 0;
    var v = isset ? arguments[0] : null;
         
    if (isset&&typeof(base)=="function") { 
      base.call(s, v); 
    } 
    else { 
      v = base.call(s); 
    }
    if (p) {
      if (isset) { 
        s.attr(p, v); 
        return s 
      }
      else { 
        return s.attr(p) 
      }
    }
    else {
      if (!s.is(":input")){ 
        if (isset) { 
          s.text(v); return s; 
        } 
        else { 
          return s.text(); 
        } 
      }
      else { 
        return isset ? s : v; 
      }
    }
  }
}($.prototype.val);
$(document).ready(function(){
  $("#show").html($("#lbl").val()+"<br>"+$("#txt").val());
})
</script>
</head>
<body>
<span id="lbl">php中文网</span>   
<input type="text" id="txt" value="softwhy.com" />
<input type="checkbox" value="antzone" />
<p id="show"></p>
</body>
</html>

로그인 후 복사

위 코드는 의심할 여지없이 jQuery의 val() 메서드를 확장한 것입니다. 다음은 구현 프로세스에 대한 소개입니다.

코드 설명:

1. $.prototype.val = function (base) {}(($.prototype.val), jQuery의 원래 val() 메서드를 수정하고 여기에 클로저를 사용합니다. 패키지 메소드에서 전달된 매개변수는 원래 val() 메소드의 기능을 유지하기 위한 것입니다. 2. return function(){}, var s = this, 할당. this가 jQuery 객체 인스턴스를 가리키는 변수 s에 대한 참조입니다. 4. var a = "data-property", 변수를 선언하고 값을 할당합니다.

5. var p = s.attr(a) 실제로 data-property는 레이블의 사용자 정의 속성이므로 이 코드는

6. isset =args.length > 0, 수정된 val() 메소드가 매개변수를 전달하는지 확인합니다.

7. var v = isset ?args[0]: null, 매개변수가 전달되면 첫 번째 매개변수가 8. if (isset&&typeof(base)=="function") { base.call(s, v);}, 매개변수가 전달되고 기본 매개변수가 함수인 경우

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면

jQuery 동영상 튜토리얼

을 방문하세요.