>  기사  >  웹 프론트엔드  >  jQuery 프로토타입 속성 및 프로토타입 방법에 대한 자세한 설명_jquery

jQuery 프로토타입 속성 및 프로토타입 방법에 대한 자세한 설명_jquery

WBOY
WBOY원래의
2016-05-16 15:51:071731검색

먼저 jQuery 1.7.1에 정의된 프로토타입 속성과 메소드를 살펴볼까요?

첫 번째는 생성자 속성입니다

JS의 객체 지향 부분에 익숙한 개발자라면 객체 속성 생성을 반환하는 데 사용되는 함수인 이 기능에 익숙할 것입니다.

function Person(){};
    var person=new Person();
    alert(person.constructor); //function Person(){}

상속을 작성할 때 모든 프로토타입 속성과 메서드를 별도의 개체 리터럴에 넣는 것을 좋아합니다. 이렇게 하면 생성자 속성이 "실제" 포인터와 일치하지 않게 됩니다.

  function Person(){

    }

    Person.prototype={
      say:function(msg){
        alert(msg); 
      }
    }

    var person=new Person();
    person.say('hello');
    alert(person.constructor); //function Object(){[native code]}

리터럴 객체는 Object의 인스턴스이기 때문에 이때 포인팅이 변경됩니다. 당연히 생성자 속성은 Object를 실행합니다. 이 "오류"를 수정하려면 일반적으로 이것이 소스입니다. 코드. 소스코드의 생성자:jQuery에 대한 설명

선택기 속성

selector 속성은 jquey를 js 라이브러리로 사용하는 데 유용하지 않습니다. 이 속성은 주로 jquery를 기반으로 하는 플러그인이나 수정 사항을 개발하는 데 사용됩니다. 예를 들면 다음과 같습니다. 🎜>

var obj=$('div a');
console.log(obj.selector);//'div a'

jquery 속성

이 속성은 현재 사용되는 jQuery 버전을 반환합니다

console.log($('body').jquery); //1.7.1

길이 속성

이 속성은 jquery 객체에 포함된 요소 수를 반환합니다. 예:

console.log ( $('body') .length); //1
이 4가지 속성의 소스코드는 다음과 같습니다.

  constructor: jQuery,


  // Start with an empty selector
  selector: "",

  // The current version of jQuery being used
  jquery: "1.7.1",

  // The default length of a jQuery object is 0
  length: 0,

사이즈 방법

// The number of elements contained in the matched element set
  size: function() {
    return this.length;
  },

이 메소드는 jquery 객체의 길이 속성을 반환하므로 불필요한 함수 호출 오버헤드를 줄일 수 있는 길이 속성을 사용하는 것이 좋습니다

toArray 메서드

toArray: function() {
    return slice.call( this, 0 );
  },
jQuery 컬렉션의 모든 DOM 요소를 배열로 복원합니다.

alert($('li').toArray());
[<li id="foo">, <li id="bar">]
우선 여기서의 슬라이스 메소드는 Array의 프로토타입 메소드인 jQuery의 생성자에 그대로 유지되었습니다

// Save a reference to some core methods
87 toString = Object.prototype.toString,
88 hasOwn = Object.prototype.hasOwnProperty,
89 push = Array.prototype.push,
90 slice = Array.prototype.slice,
91 trim = String.prototype.trim,
92 indexOf = Array.prototype.indexOf,

호출 메소드를 통해 객체 가장을 구현합니다. 매개변수 0을 전달하면 이 메소드는 순수 배열인 깨끗한 배열을 반환하므로 다른 객체를 만날 때 jquery 객체에서 순수 배열로 변환됩니다. 향후 클래스 이 방법은 배열 형태로 변환하는 데에도 사용할 수 있습니다. 예:

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'/>
    <title>jQuery源码分析-原型属性和方法</title>
  </head>
  <body>
    <div>
    </div>
    <div></div>   
  </body>
  <script src='jquery-1.7.1.js'></script>
  <script>
  var divs=document.getElementsByTagName('div');
  console.log(divs); //[div, div]
  alert(divs instanceof Array); //fasle

  alert(Array.prototype.slice.call(divs,0) instanceof Array); //true
  </script>
</html>

그래서 jqeury 소스코드를 익히는 것은 jquery 사용에 도움이 될 뿐만 아니라 js 사용법도 많이 배울 수 있습니다

얻는 방법

// Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
  get: function( num ) {
    return num == null &#63;

      // Return a 'clean' array
      this.toArray() :

      // Return just the object
      ( num < 0 &#63; this[ this.length + num ] : this[ num ] );
  },

이 메서드는 jquery 개체의 요소 중 하나를 찾아 jquery 개체 대신 js 원래 노드 요소 개체를 반환하는 방식으로 작동합니다. 이는 매개변수가 존재하지 않는 경우 매개변수를 허용하는 eq 메서드와 다릅니다. 그런 다음 toArray 메소드를 호출하여 모든 요소를 ​​포함하는 배열을 반환합니다. 숫자가 0보다 크면 첨자를 사용하여 직접 얻을 수 있습니다. 방법을 사용하려면 긍정적인 첨자와 부정적인 첨자를 지원해야 합니다. 작성된 내용이 숫자가 아니거나 현재 객체에 포함된 요소의 길이를 초과하는 경우 undefine.

이 반환됩니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.