Home >Web Front-end >JS Tutorial >A brief introduction to the principle of jquery selector

A brief introduction to the principle of jquery selector

巴扎黑Original: 2017-08-13 14:51:381380browse

This article mainly introduces relevant information that explains the principle of jquery selector in detail, that is, there is an init initialization method in jquery prototype, which parses the incoming value, such as the incoming id, class or tag name, which needs to be Friends can refer to the

detailed explanation of the principle of jquery selector

html part

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
  <script src="js/minijquery.js"></script> 
</head> 
<body> 
  <p class="one">1</p> 
  <p class="two">2</p> 
</body> 
<script> 
  var result = $("p"); 
  console.log(result); 
  alert($(&#39;p&#39;).size()); 
</script> 
</html> js

js part

(function(){ 
  //暴露外部的引用 
  var jQuery = window.jQuery = window.$ = function(selector){ 
    return new jQuery.fn.init(selector); 
  } 
   
  //添加原型事件 
  jQuery.fn = jQuery.prototype = { 
    // 
    init:function(selector){ 
      var element = document.getElementsByTagName(selector); 
      Array.prototype.push.apply(this,element); 
      return this; 
    }, 
    myjQuery:"the test one", 
    length:0, 
    size:function(){ 
      return this.length; 
    } 
  } 
   
  //将init的原型引用成jQuery的原型 
  jQuery.fn.init.prototype = jQuery.fn; 
   
})();

Let me explain with my understanding, that is, there is an init initialization in the jquery prototype Method to parse the incoming value, such as the incoming id, class or tag name. Then return the array object through the corresponding method. You can either call the method directly through the object or use the length of the array.

The above is the detailed content of A brief introduction to the principle of jquery selector. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript code to implement mouse drag and drop multi-selection functionNext article：Detailed explanation of JavaScript code to implement mouse drag and drop multi-selection function

See more

A brief introduction to the principle of jquery selector

Related articles