jQuery是面向对象的设计
通过window.$ = window.jQuery = $; 向外提供接口,将$挂在window下,外部就可以使用$和jQuery

$("#div1").css()   //$("#div1")是jQuery的一个实例对象,css()是实例的方法【实例的方法只能jQuery对象使用】
$("#div1").html()

$.trim()
$.proxy()      //工具方法,相当于静态方法,【jQuery对象和原生js对象都可以使用】

(function(window , undefined){
【1】jQuery源码采取闭包形式(匿名函数自执行),好处是里面的代码都是局部的,不会与外部冲突

【2】为什么要传入window?
1、根据函数作用域链,若没有传入window,就会一层一层向上查找window,而window对象是 最顶层的对象,查找速度就会非常慢,传入后,只需要查找参数即可
2、便于压缩,可以用w参数代表window对象,所有用到window的都是w,节约空间

【3】为什么传入undefined?
在某些浏览器版本中undefined可以被修改
var undefined = 10;
alert(undefined); //IE10弹出undefined,IE7 8弹出10
为防止undefined被修改,这里传入undefined,jQuery首先找到的是参数中传入的undefined,不会找到外层或被修改的undefined

【4】   <script>
        "use strict" //严格模式不允许 a = 10 ; var num = 010 不规范的写法  一般不推荐使用严格模式
     </script>

【5】jQuery(document)可以直接使用,但是jQuery将每一个对象都赋值给了一个变量

    var rootJQuery = jQuery(document)这样做的原因:  jQuery(document)不可被压缩成一个字符,而rootJQuery可以

【6】 判断是不是undefined: window.a == undefined;    typeof window.a == 'undefined' 用这个兼容IE6 7 8 9
})(window);

基本的面向对象的编程
function Aaa(){     //会自动生成Aaa.prototype.constructor = Aaa
}
Aaa.prototype.init = function(){};
Aaa.prototype.css = function(){};
var a1 = new Aaa();
a1.init();
a1.css();

两种为原型添加属性的方式比较:

一:
Aaa.prototype.name = 'zz';
Aaa.prototype.age = '18'
alert( a1.constructor ); //function Aaa(){}

二:

//prototype被覆盖,其中的constructor : Aaa不再了,所以{}形式需要在里面加上constructor : Aaa,否则constructor是空的Object

Aaa.prototype = {name : 'zz',age : '18'};   
alert( a1.constructor ); //Object(){}

jQuery的设计思想:可以实现$().css()方式编程的原理
function jQuery(){
return new jQuery.prototype.init();
}
jQuery.prototype.init = function(){};
jQuery.prototype.css = function(){};
jQuery.prototype.init.prototype = jQuery.prototype;   //对象的引用关系,对象的原型是一个对象

Jquery源码学习(第一天)的更多相关文章

  1. jquery源码学习第一天

    第一天认识了jquery的大体结构,总的大范围是 (function() { // 这里是封装的代码,包括了各种方法.工具 window.JQuery = JQuery window.$ = $; } ...

  2. jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  3. jquery源码学习(一)——jquery结构概述以及如何合适的暴露全局变量

    jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...

  4. jquery 源码学习(一)

    从上边的注释看,jQuery的源码结构相当清晰.条理,不像代码那般晦涩和让人纠结   1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQ ...

  5. jQuery源码学习笔记一

    学习jQuery源码,我主要是通过妙味视频上学习的.这里将所有的源码分析,还有一些自己弄懂过程中的方法及示例整理出来,供大家参考. 我用的jquery v2.0.3版本. var rootjQuery ...

  6. jquery 源码学习(四)构造jQuery对象-工具函数

    jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下.   作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原 ...

  7. jQuery源码学习感想

    还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...

  8. 读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一

    背景: 有心学习jquery源码,苦于自己水平有限,若自己研究,耗时耗力,且读懂之日无期. 所以,网上寻找高手的源码分析.再经过自己思考,整理,验证.以求有所收获. 此篇为读高手艾伦<jQuer ...

  9. jquery 源码学习(*)

    最近在做日志统计程序,发现对方的程序是在Jquery基础上进行开发的,而公司的网站的框架是prototype.而且我也早就想了解一下Jquery源码,故决定研究Jquery源码,模拟它的方法   Jq ...

随机推荐

  1. Android Studio上NDK/JNI开发环境问题

    基础环境: 操作系统 —— Windows 7 Android Studio —— 1.5.1(android-studio-bundle-141.2456560-windows.exe) NDK — ...

  2. tp框架之文件上传

    控制器 function wenjian() { if(empty($_FILES)) { $this->display(); } else { $u = new \Think\Upload() ...

  3. JavaScript通过id获取不到元素是什么原因阿?

    s代码 JavaScript code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function show_more_mess() {     $(&qu ...

  4. ZooKeeper基本原理

    ZooKeeper简介 ZooKeeper是一个开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务,配置维护和命名服务等. ZooKeeper设计目的 1. ...

  5. 从ord()中对Unicode编码的理解

    刚开始学习编程的时候,老对字符串编码的理解模模糊糊.也一直看这方便的资料,今天在看Dive in python时,突然有了新的理解(不知道是否正确). Python有个built-in函数ord(), ...

  6. 改变按钮在iPhone下的默认风格

    -webkit-appearance: none; "来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用"appearance"属性,来改变任何元素的浏览 ...

  7. 尽量用goto代替尾递归

    void PrintList(List L) { if(L!=Null) { PrintElement(L->Element); PrintLisr(L->Next); } } 所谓尾递归 ...

  8. 运行时使用Dev的ImageListEditor

    uses cxImageListEditor, cxGridMenuOperations; {$R *.dfm} procedure TForm1.Btn1Click(Sender: TObject) ...

  9. oracle中批量生成字段类型的脚本

    select ' ALTER TABLE '||table_name || '  MODIFY( '|| column_name || ' DATE );' from USER_TAB_COLUMNS ...

  10. dedecms搜索框写法

    <div class="bg_search"> <form id="forms" name="formsearch" ac ...