一.jQuery总体架构 jQuery作为一款强大的js库,由以下模块构成: (function(window,undefined){ var jQuery=function(selector,context){ //... }; //工具方法utilities //回调函数 callbacks //异步队列 Defered Object //浏览器功能测试 Support //数据缓存 Data //队列 Queue //属性操作 Attributes //事件系统 Events //选择器…

第一章  总体架构 1.设计理念 jQuery的理念就是“写更少的代码,做更多的事”,而且做到代码的高度兼容性. 2.总体架构 大致可以分为三个部分:构造模块,底层支持模块和功能模块. 3.使用自调用匿名函数 (function( window, undefined ) { ... })(window) 这里先分析一下匿名函数: 匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法,有两种比较常见的写法: 写法一:(function(){ ... }()) 写法二:(function…

在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样.下面就来看看init这个幕后的构造函数是怎么写的: init: function( selector, context, rootjQuery ) { ... } 可以看到这个方法接受3个参数,其前两个参数是jQuery方法传递过来的 var…

从上边的注释看,jQuery的源码结构相当清晰.条理,不像代码那般晦涩和让人纠结   1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 复制代码 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名函数.什么东东呢?在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2. 为什么要创…

原本项目里是用h5的新属性data-list,但是这个下拉框的数据太多,而data-list似乎没有设置高度的地方,所以写了个小插件,期间也发现了一些bug,目前这个版本算是可以一用的版本,故写一下这个插件碰到的奇怪问题. 一点简单的CSS(因为项目原因,暂时只写了webkit内核). .datalist_ul { background: #fff; display: none; list-style: none; padding: 0; margin: 0; overflow: auto; p…

day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍 1.1.1 JavaScript 库 ​ JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多…

day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍 1.1.1 JavaScript 库 ​ JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多…

1. 总体架构 1.1自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: (function( window, undefined ) { // jquery code })(window); 1.这是一个自调用匿名函数.在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2.为什么要创建这样一个“自调用匿名函数”呢? 通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命…

总体架构 jquery模块分类和依赖关系: 自调用匿名函数: /** * 自调用匿名函数,jquery加载完后立即被调用,用来加载各个模块 * 为什么使用自调用匿名函数: * 通过使用自调用匿名函数,创建了一个特殊的函数作用域,该作用域 * 中的代码不会和已有的同名函数,方法和变量以及第三方库冲突. * */ //传入undefined好处:缩短查找undefined的作用域链,确保undefined没有被重写为新值. (function ( window, undefined ) { //传入…

练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的? 1.首先,jquery就是一些javascript. 而且完全就是一些原始的javascript,没有用其他第三方的库或什么的.它本身就存放在一个js文件里. 我们常常张嘴就说: jquery是一个javascript框架 哦,可不是随便说说而已. 2.总体结构 javascript里,基本元素…

第一次在博客中记录自己的笔记,希望能坚持下去吧,加油! 今天学习的是Jquery的源代码,官网上下载,然后使用DW(dream waver)编辑器打开Js(下载的是未压缩版),版本是2.0.3.第一次下下来之后,对其中的8000多行的代码表示跪下,确实是自己接触前端以来最多见到的一次(本人刚刚开始接触前端开发),首先还是按照自己学习的老套路,对整个的源代码进行分析,列好代码的框架(也可以去网易云课堂找相关的视频,下面部分的内容来源于视频“逐行分析Jquery源码的奥秘”): (21,94) 定义…

为什么选择2.X版本,而不是1.X版本,因为2.X不兼容IE6/7/8,所以少了兼容代码,让我们更专注于jquery原理的代码. 一共有8830行. 1.1 匿名函数自执行 首先,匿名函数的作用是,把函数内部的变量和函数变成"局部变量"和"局部函数"的,那么就不会与外部的变量和函数发生冲突了. (function(){ var a=10; })(); alert(a);//console.log报错,"Uncaught ReferenceError: a…

链式编程....方法多,属性无法得到对象进行链式.vs10自动完成.书籍锋利的jQuery vsdoc有智能提示开发时候用,开发完之后,换成min压缩版的. 经验:打开网站文件夹.可以把vs网站上的解决方案另存到和网站文件夹同一个文件夹中,直接打开.sln就能打开同一文件夹中的网站. Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问.文档流.body可能很小哦可以就包含一个层..,不能把document当成body. <%@ Page…

(function (window, undefined) { //构建jQuery对象 var document = window.document, navigator = window.navigator, location = window.location; var jQuery = (function () { var jQuery = function (selector, context) { return new jQuery.fn.init(selector, context…

Sizzle是一款纯javascript实现的css选择器引擎,它具有完全独立,无库依赖;小;易于扩展和兼容性好等特点. W3C Selectors API规范定义了方法querySelector()和querySelectorAll(),但是IE6,7不支持这两个方法. 在Sizzele内部,如果浏览器支持方法querySelectorAll(),则调用该方法查找元素,如果不支持,则模拟该方法的行为. Sizzle支持几乎所有的css3选择器,并且会按照文档位置返回结果. 上面截取的只是Siz…

▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题.比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行.最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,…

声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的 无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用. 由于好多人都只是拷贝代码,故在此全用图片作说明. 图片效果图1 这个界面是上左右下结构 左边是一棵树 右边是一个表格 上部…

点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之1.ABP总体介绍 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ASP.NET Boilerplate 基于DDD的经典分层架构思想,实现了众多DDD的概念(但没有实现所有DDD的概念). ABP的官方网站…

由于前几次都没能写完,这次年底总算有自由时间了,又想继续捣鼓一下.于是下载了VS 2015专业版(不知为什么我特别钟爱专业版,而不喜欢企业版).由于以前的教训,我这次决定写一个极简的Deom,简到什么程度呢?简单到只实现添加.修改栏目,用户登录后可以添加管理文章.管理员登陆后可以修改网站设置(也就标题.版权信息等)这些功能.为了避免以前大家经常搞不清哪个是最新的代码的情况,这次我准备把代码直接发布到Codeplex.com上做个代码开源,到时候大家直接去Codeplex.com下载最新代码就行了…

最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Javascript库,Dojo和jQuery在各自领域有着为数众多的拥护者.不过正所谓一把钥匙开一把锁,对一个项目来说肯定有个最适合它的工具库,用对了工具才能事半功倍.所以对项目经理或是技术总监来说,工程开始前的技术选型是关键一步,本文将对Dojo和 jQuery最新版本进行一个综合比较,重点在于区分两…

响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们去hack,现在是终端问题,让我展现出不同的设备不同的样式,折腾来折腾去,终于我们走进了热火朝天的响应式布局,自适应只能算是响应式布局的一个子集吧,对于流体个栅格后面会再次提到,有兴趣可以关注. 首先讲讲实现原理吧,css3的媒体查询功能的确帮了我们很大一个忙,@media query,它的出现也带…

Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选择页面元素更灵活的DOM遍历方法 理解DOM树 DOM(Document Object Model)文档对象模型,可以充当JavaScript和网页之间的接口.jQuery最强大的功能就是能轻松的处理和简化在DOM中选择元素.DOM中各元素的关系,同数据结构中的二叉树的称呼非常相近.元素之间的关系包…

之前使用jquery的slidetoggle方法,可以轻易的实现元素的收缩展开:使用angularjs后,没有找到相关的方法,通过多方面查资料,自己写了个demo,展示slidetoggle的angularjs写法: html <div ng-controller="ctrl_main"> <li ng-repeat-start="el in list" ng-click="$index=!$index">{{el.nam…

最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs的话,很可能学了很久还不知道这个东西能用来干什么以及怎么使用,怎么和UI进行结合等问题,在stackoverflow上找到一篇关于这方面的文章,阅读之后颇有收获,在此基础上将它译成中文,以求抛砖引玉大家一同学习. 原问题:假如我熟悉利用jQuery去开发客户端应用,那么我怎么上手angularjs,…

问题: 假如我熟悉利用jQuery去开发客户端应用,那么我怎么上手angularjs,能否描述下所需要的模式转变,下面这些问题能够帮助你给出一个回答: 1.在设计客户端web应用的时候有什么区别,最大的区别是什么? 2.我应该停止使用哪些技术,同时又使用哪些技术作为替代? 3.是否存在服务端需要考虑的东西或者说一些限制呢? 回答: 1.不要首先设计好你的页面,然后再通过DOM操作去修改它 在jQuery中,你首先设计了一个page,然后再去动态修改它的内容,这是因为jQuery被设计用来进行扩展…

这篇文章主要介绍了jQuery和angularJS的区别浅析,本文着重讲解一个熟悉jQuery的程序员如何应对angularJS中的一些编程思想的转变吗,需要的朋友可以参考下 最近一直研究angularJs最大的感受就是它和之前的jQuery以及jQuery各种库的设计理念完全不一样.如果不能认识到这一点,而对于之前做jQuery开发的程序员,去直接学习angularJs的话,很可能学了很久还不知道这个东西到底是什么,拿来做什么的,怎么和UI进行结合等问题,我也是到处找资料看了看,在此把自己学习…

闲来无事,在网上发现了一篇对比AngularJs和Jquery的文章.恰好最近自己也在研究AngularJs.特此收藏.需要的朋友可以参考. 原问题:假如我熟悉利用jQuery去开发客户端应用,那么我怎么上手angularjs,能否描述下所需要的模式转变,下面这些问题能够帮助你给出一个回答: 1.在设计客户端web应用的时候有什么区别,最大的区别是什么? 2.我应该停止使用哪些技术,同时又使用哪些技术作为替代? 3.是否存在服务端需要考虑的东西或者说一些限制呢? 回答: 1.不要首先设计好你的页…

写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.js文档,下载地址:http://jquery.com/download/ 注意选择其中的development版本进行下载,如下图所示 开发版本的JQ.js属于非压缩的源文件,方便我们阅读和分析其代码. 下载完用Dreamweaver或其它代码编辑器打开查阅即可.我们今后分析的代码也是基于1.11.0版本的J…

$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); //window.location.reload(); $.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ].concat( { "c" : 3, "d" : 4 } ) );…

之前写过一篇JavaScript命名空间的文章,写完后一对比对jQuery的简单使用很是惊羡,看了看人家源码,用的原理很类似啊,改进一下之前的版本,做个简易版的jQuery 之前的代码 (function () { var _NS = function () { } _NS.prototype.select = function (selector,context) { var context = context || document; return context.querySelector…