cari

Rumah >hujung hadapan web >tutorial js >jquery选择器原理的简单介绍

jquery选择器原理的简单介绍

巴扎黑
巴扎黑asal
2017-08-13 14:51:381380semak imbas

这篇文章主要介绍了详解jquery选择器的原理的相关资料,就是jquery原型里面有一个init初始化的方法，将传入的值进行解析，比如传入的id还是class还是标签名，需要的朋友可以参考下

详解jquery选择器的原理

html部分


<!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部分


(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; 
   
})();

我用我的理解解释一下，就是jquery原型里面有一个init初始化的方法，将传入的值进行解析，比如传入的id还是class还是标签名。然后通过相应的方法返回数组型对象。既可以通过对象直接调用方法，也可以使用数组的length。

Atas ialah kandungan terperinci jquery选择器原理的简单介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript实现鼠标拖拽多选功能的代码详解Artikel seterusnya：jQuery中webupload上传插件的用法实例

Artikel berkaitan

Lihat lagi