###1.jQuery 入口方式 在常用的jquery入口方式中估计大部分人都是直接用的是

$(function(){//code
})
复制代码

下面详细说一下jquery的几种入口方式: ####1.1 $ 符号+ready() 的方式 很多人可能会看到一下这种方式入口,是通过ready() 函数调用,至于原理会在下面讲解。

$(document).ready(function(){//code
});
复制代码

####1.2 $ 符号 +简写 的方式 这种应该最多人用的,因为写起来也是最方便的

$(function(){//code
})
复制代码

####1.3 jQuery +ready() 的方式 这是jquery完整的写法,也是最初的形态。

    jQuery(document).ready(function(){console.log('jQuery ready 入口方式');})
复制代码

####1.4 jQuery + 简写入口 这种方式也是跟第二种方式类似

  jQuery(function(){console.log('I am jquery ');})
复制代码

2. 模拟 jQuery 的入口函数

####2.1 认清楚 $ 符号 其实 $ 是 jQuery 的一个代替品,也就是可以解析为什么上面四种入口方法类似的原因。 尝试:

var $ = 'I am $';
console.log($);
复制代码

从控制台打印出来的是

I am $
复制代码

再次测试,引入jQuery 后打印 $ 对象和 jQuery 对象

<script src="jquery-1.11.1.min.js"></script>
<script>console.log($);console.log(jQuery);console.log($===jQuery)
</script>
复制代码

打印结果如下:

结论:从上面可以得知 $ 和 jQuery 是同一个对象,也可以得知它是一个方法(或者对象),通过传递(a,b)两个参数,返回了一个新的对象,当然,在这里面也会根据你是否已经创建过该对象。


再次测试,看创建两个jQuery 对象情况会怎么样, $ 和 jQuery.

  var t1 = $;var t2 = jQuery;console.log(t1===t2);
复制代码

思考另外一种情况:

var t1 =new $;
var t2 = new jQuery;
console.log(t1===t2);
复制代码

这样子的情况请问相等嘛? 答案是 false

解析:

通过new 是开辟了一个新的空间,去存储这个对象。具体看一下

console.log(t1);
console.log(t2);
复制代码

再看,如果是通过 $ 或 jQuery 直接打印出来的对象可以看得出是 一个方法里面通过传参数,而通过 new $ 或 new jQuery 的话直接是返回的对象,下面是两个的对比。

继续探究:

返回的属性有个 proto 对象 打印一下:

var t2 = new jQuery;
console.log(t2);
console.log(t2.__proto__);
复制代码

继续推测:

//下面这句会不会是 打印jQuery 的版本号呢?
console.log(t2.__proto__.jquery);
复制代码

下面这句通过

jQuery.fn = jQuery.prototype ={//这里暴露一些属性接口信息jquery: version,// 这里把上面的版本号version 通过jquery这个接口获得
}复制代码

详情图:

貌似跑题了。回到最初的问题 ####2.1 写一个kQuery 库 回顾js 的调用方式

var  kQuery=  function (a){//code
}
kQuery(a);
复制代码

测试下你的 code 块是否被执行了。 再次模拟jquery,它是返回一个 对象。 那我们的kQuery 应该也有个对象返回,

var  kQuery=  function (a){//返回对象return obj;
}
复制代码

上面代码明显是错误的,因为 它不知道 obj 是个什么东东,所以应该先定义 obj 为一个对象。

var  kQuery=  function (a){var obj ={}//返回对象return obj;
}
复制代码

再次看 第一大点,jquery的如后函数是不是都是通过ready() 来执行的,那是不是这个对象应该拥有ready 的这个方法。

var  kQuery=  function (a){var obj ={ready:function(){console.log('This is ready function');}}//返回对象return obj;
}
复制代码

转载于:https://juejin.im/post/5a3217c8f265da432652da11

从jQuery 入口方式写jQuery工具类库相关推荐

  1. 【08】jQuery:01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象

    文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...

  2. jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)

    day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...

  3. 分享一个超棒的在线jQuery mobile原型设计开发工具 - codiqa

    在线演示  本地下载 今天我们分享一个超棒的在线jQuery mobile原型设计开发工具:Codiqa,这个在线设计工具能够帮助我们快速的使用拖拽的方式来构建一个jQuery mobile的web应 ...

  4. 写JQuery 插件 什么?你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

  5. jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

    jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...

  6. 什么?你还不会写JQuery 插件

    前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...

  7. [转]什么?你还不会写JQuery 插件

    本文转自:http://www.cnblogs.com/joey0210/p/3408349.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jque ...

  8. JavaScript/jQuery WebIM 及时聊天通信工具 本地客户端

    WebIM本地客户端,可以发送表情.调整字体.字体大小.字体颜色.加粗.下划线.斜体等:还支持收缩split条,详情等: 上UI界面,界面还不够专业,需要美工支持,下一期在做优化! 收缩详情 chat ...

  9. jQuery(一)jQuery概述、使用方式、原理、查找元素

    jQuery 是一个快速.简洁的 JavaScript 框架,jQuery 设计的宗旨是 "write Less,Do More",即倡导写更少的代码,做更多的事情.它封装 Jav ...

最新文章

  1. 搞懂Transformer结构,看这篇PyTorch实现就够了
  2. Requirejs快速使用
  3. 曲奇问答CEO:从产品经理的角度玩转社区类产品
  4. 线程的创建开销大吗?线程创建开销包括哪些?线程池
  5. du的原理 linux_Linux 文件系统管理
  6. 打造核心动力 争夺国际大数据话语权
  7. 给我一对公钥和私钥,我就能破解此RSA
  8. 计算机报名填错学制,2017年在职研究生填报信息发现错误怎么修改?
  9. mfc之解决vs2010调试监视器(MSVSMON.EXE)未能启动的问题
  10. 让Oracle跑得更快 ——博文视点大讲堂34期活动圆满结束
  11. 网站抓取精灵V3.0正式版
  12. 丢失的遗传力--Missing heritability
  13. 如何把iPhone投屏到Mac屏幕上进行演示和录制?
  14. 卡内基梅隆计算机金融,大神offer|恭喜四位再来人学员斩获卡内基梅隆大学-计算金融硕士...
  15. Java路径遍历漏洞修复心得
  16. 干货 | CoAP协议例析
  17. StringTokenizer类的用法
  18. SQL Server数据库安全规划全攻略(转)
  19. python输入三角形的三条边、判断能否构成三角形_输入三角形三条边a,b,c,判断他们能否构成三角形...
  20. 【Web技术】1118- 图片防盗链的实现既然如此简单

热门文章

  1. UA MATH567 高维统计专题2 Low-rank矩阵及其估计3 Rank RIP
  2. Windows驱动开发-_驱动对象学习和内核处理字符串初步
  3. ODBC API 学习总结
  4. 用C#实现计算机图形学算法
  5. Codeforces 861D - Polycarp's phone book 字典树/hash
  6. [2-SAT]【学习笔记】【未完】
  7. X264编码流程详解(转)
  8. C# 仿金山毒霸启动和关闭淡入淡出效果
  9. vsftp 安装日志
  10. flutter加载本地html标签,Flutter中如何加载并预览本地的html文件的方法