详解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实现简单的抽奖游戏
May 05 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现雪花飘落效果
Aug 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数据缓存的使用说明
2013/05/10 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
range 标准化之获取
2011/08/28 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
python 文件与目录操作
2008/12/24 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python实现端口检测的方法
2018/07/24 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
办理退休介绍信
2014/01/09 职场文书
公司成立感言
2014/01/11 职场文书
高三家长寄语
2014/04/03 职场文书
个人授权委托书
2014/04/03 职场文书
物业品质提升方案
2014/06/08 职场文书
党支部鉴定意见
2015/06/02 职场文书
远程教育培训心得体会
2016/01/09 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL