详解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+css实现侧边导航栏效果
Jun 12 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery实现轮播图特效
Apr 12 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jquery实现抽奖功能
Oct 22 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简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python网络编程详解
2017/10/31 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
初中校园广播稿
2014/02/02 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
python神经网络ResNet50模型
2022/05/06 Python