详解jquery选择器的原理


Posted in jQuery onAugust 01, 2017

详解jquery选择器的原理

html部分

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
  <script src="js/minijquery.js"></script> 
</head> 
<body> 
  <div class="one">1</div> 
  <div class="two">2</div> 
</body> 
<script> 
  var result = $("div"); 
  console.log(result); 
  alert($('div').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。

以上就是jQuery 原理的分析,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

jQuery 相关文章推荐
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery上传插件webupload使用方法
Aug 01 #jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
简述jQuery Easyui一些用法
Aug 01 #jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 #jQuery
jquery easyui如何实现格式化列
Jul 30 #jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 #jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 #jQuery
You might like
php字符串分割函数explode的实例代码
2013/02/07 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
php计算年龄精准到年月日
2015/11/17 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
详解Python IO口多路复用
2020/06/17 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
秘书专业自荐信范文
2013/12/26 职场文书
2014庆六一活动方案
2014/03/02 职场文书
创建文明学校实施方案
2014/03/11 职场文书
我的求职择业计划书
2014/04/04 职场文书
社区平安建设方案
2014/05/25 职场文书
英文感谢信范文
2015/01/21 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python