详解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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现简单全选框
Sep 13 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内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
解析php常用image图像函数集
2013/06/24 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP中的use关键字概述
2014/07/23 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
js创建对象的方式总结
2015/01/10 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
详解python itertools功能
2020/02/07 Python
Pycharm github配置实现过程图解
2020/10/13 Python
个人自我鉴定范文
2013/10/04 职场文书
运动会稿件100字
2014/02/21 职场文书
教师远程培训感言
2014/03/06 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
python中的None与NULL用法说明
2021/05/25 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL
canvas 中如何实现物体的框选
2022/08/05 Javascript