jquery模型(外壳实现)
详细解释:
1、现在传入的参数是window,document,可以知道是它俩引用
2、
3、
4、每次调用jquery方法,都会创建一个实例,但是内存并没有暴涨,原因是:jquery里面new 的这个实例,是一个局部变量,局部变量在没有被全局引用的情况下,会被浏览器
自动回收
/*
传入参数:
1、标示度,一眼能够知道在那引用
2、加快查找速度(JS是往上冒泡查找的,所以传入会更快)
3、undefined(当方法参数没有传入的时候,那么他就是未定义的) */
(function(win,doc){//毕包
//这里面声明的变量/方法都是局部的,如果全局需要引用,那么需要注册全局 //无new构造 //局部变量在没有引用的时候会被浏览器自动回收 var myjquery = function(_this){
return new Base(_this);//每次执行都得到一个实例,说明Base里面的不会相互影响
} function Base(_this){ this.elements = [];//存放/保存获取的DOM元素
//因为每个对象操作的是已知的DOM元素所以每次返回只需要this(Base)本身即可
if(_this != undefined){
this.elements[] = _this;//
}
}
/*
//获取ID
Base.prototype.getId = function(id){//ID是唯一的,不需要管理,可以直接获取
this.elements.push(document.getElementById(id));
return this;
} //Tag标签和class是可以获取多个的,所以需要特殊对待,就需要for循环逐个处理获取
//获取标签(Tag)
Base.prototype.getTagName = function(tag){
var tags = document.getElementsByTagName(tag);
for(var i = 0;i < tags.length;i++){
this.elements.push(tags[i]);
}
return this;
} Base.prototype.getClass = function(){ } */
//解耦
Base.prototype = {//括号里面都是以对象(名字:对象)的形式书写
//获取ID
getId:function(id){//ID是唯一的,不需要管理,可以直接获取
this.elements.push(doc.getElementById(id));
return this;
},
//Tag标签和class是可以获取多个的,所以需要特殊对待,就需要for循环逐个处理获取
//获取标签(Tag)
getTagName:function(tag){//仅仅只是一个开始
var tags = doc.getElementsByTagName(tag);
for(var i = ;i < tags.length;i++){
this.elements.push(tags[i]);
}
return this;
},
//获取class
//和Tag一样,需要逐个获取
getClass:function(className,idName){
//ID:document.getElmenentById();
//class:document.getElementsByClassName();//不兼容
var node = null;
if(arguments.length == ){
node = doc.getElementById(idName);
}else{
node = doc;
} var all = node.getElementsByTagName("*");
for(var i = ;i < all.length;i++){
//需要判断是否存在class,而不是等于
//这里暂时直接等于,但不是包含(绝对不能写包含)
if(all[i].className == className){
this.elements.push(all[i]);
}
}
return this; },
//增加class
//给获取的元素增加class
addClass:function(className){//$(".box .title")
for(var i = ;i < this.elements.length;i++){
//匹配每个元素是否有传入的class名字,IndexOf
//作业:如何实现给增加的class避免重复(注意完美实现)
if(this.elements[i].className == className){//解决可能元素不存在
continue;
}
this.elements[i].className += " "+ className; }
return this;
},
//indexOf和replace不可取
removeClass:function(className){
for(var i = ;i < this.elements.length;i++){
if(this.hasClass(this.elements[i],className)){
var currEle = this.elements[i];
//移除准确需要的位置,而不是直接replace
currEle.className = currEle.className.replace(
new RegExp('(\\s|^)' + className + '(\\s|$)'),"");
}
}
return this;
},
//判断元素是否存在className
hasClass:function(element,className){
//正则匹配:true/false
return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
},
//选择
eq:function(num){//只选择一个
var element = this.elements[num];//拿到选择的那个元素
this.elements = [];//清空之前获取的元素
this.elements[] = element;//把选择的那个元素存储到this.elements
return this;
},
click:function(fn){
for(var i = ;i < this.elements.length;i++){
this.elements[i].onclick = fn;
}
return this;
},
hide:function(){
for(var i = ;i < this.elements.length;i++){
this.elements[i].style.display = "none";
}
return this;
},
show:function(){//
for(var i = ;i < this.elements.length;i++){
this.elements[i].style.display = "block";
}
return this;
},
/*
不传入参数则表示获取
传入参数则表示设置/覆盖
*/
html:function(str){
for(var i = ;i < this.elements.length;i++){
if(arguments.length == ){//判断传入参数没有,0个
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML = str;
}
return this; },
tt:function () {
return this
} } win.myjquery = win.$ = myjquery;//只是一个方法 })(window,document);//传入一些常用的变量/对象
jquery模型(外壳实现)的更多相关文章
- jquery源码分析
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 前段时间上班无聊之时,研究了 ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- jQuery的事件模型
前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型. jQuery的事件系统离不开jQuery的缓存系统. jQuery的第一代缓存是直接 ...
- jQuery CSS操作及jQuery的盒子模型
jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型
- jQuery插件编写及链式编程模型
jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
- jQuery (01) 浏览器的事件模型
浏览器的事件模型 由网景公司引入的 DOM0 级事件模型 把事件处理程序绑定到 DOM 元素的属性上: ele.onclick(); ele.onDOMContentLoad(); ele.onloa ...
- jQuery源码解析对象实例化与jQuery原型及整体构建模型分析(一)
//源码剖析都基于jQuery-2.0.3版本,主要考虑到兼容IE 一.关于jQuery对象实例化的逻辑: 整个jQuery程序被包裹在一个匿名自执行行数内: (function(window,und ...
- 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
- JQuery日记6.7 Javascript异步模型(二)
异步模型看起来非常美,但事实上它也是有天生缺陷的.看以下代码 try { setTimeout( function(){ throw new Error( '你抓不到我的!' ); }, 100); ...
随机推荐
- memcache安装以及php_memcache.dll 扩展安装
php_memcache.dll扩展下载地址:http://windows.php.net/downloads/pecl/releases/memcache/3.0.8/ 下载注意事项:选择匹配自己环 ...
- 模拟事件【JavaScript高级程序设计第三版】
事件,就是网页中某个特别值得关注的瞬间.事件经常由用户操作或通过其他浏览器功能来触发.但很少有人知道,也可以使用JavaScript 在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样 ...
- flask再学习-重构!启动!
1.打造MVC框架: common/libs:放置一些功能公用的方法. common/models:放置ORM模型 config:配置文件属性 web/controllers:视图层,处理url和ap ...
- Codeforces Round #442 (Div. 2)A,B,C,D,E(STL,dp,贪心,bfs,dfs序+线段树)
A. Alex and broken contest time limit per test 2 seconds memory limit per test 256 megabytes input s ...
- 【转】如何向XML内插入一个字符串片段
转自:http://bbs.csdn.net/topics/190051229 5楼 string filepath = Server.MapPath("你的xml文件"); ...
- 【刷题】LOJ 6001 「网络流 24 题」太空飞行计划
题目描述 W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合 \(E = \{ E_1, E_2, \cdots, E_m ...
- 【Revit API】调用Revit内部命令PostableCommand
Revit内置了一些命令,直接调用Revit操作方式. 可以去API文档查询PostableCommand枚举,还是很多的. 话不多说,直接上代码 var commandId = RevitComma ...
- 【转】STM32 - 程序跳转、中断、开关总中断
程序跳转注意: 1.如果跳转之前的程序A里有些中断没有关,在跳转之后程序B的中断触发,但程序B里没有定义中断响应函数,找不到地址会导致死机. 2.程序跳转前关总中断,程序跳转后开总中断(关总中断,只是 ...
- 位运算的一种应用 和 hiho1516过河解题报告
初始i=s 每次:i=(i-1) & s 直到i=0 etc.11000100000100000000 10000=10001 & 1100001000=01111 & 110 ...
- webpack插件自动加css3前缀
想要webpack帮忙自动加上“-webkit-”之类的css前缀,我们需要用到postcss-loader和它的插件autoprefixer 1.安装 npm i postcss-loader au ...