详解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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 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中try catch捕获异常实例详解
2014/11/21 PHP
php中switch语句用法详解
2015/08/17 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python开发中module模块用法实例分析
2015/11/12 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
python中wheel的用法整理
2020/06/15 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
2014年路政工作总结
2014/12/10 职场文书