js---18miniJquery
<html>
<head>
<title>jQuery test</title>
</head>
<body>
<div id="1">
111
</div>
<div id="2">
111
</div>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
function Parent(){ //Parent当成一个类来使用
this.name = "333";//只能通过 对象.name 访问
var age = 34;//给嵌套函数使用
console.log("aaaaaaaa");
}
var pp = new Parent();//pp是对象
pp();//pp is not a function
Parent();//aaaaaaaa,函数被window调用，这个java没有对应。 //js数据类型：undefined、null、string、number、boolear、[]、{}、函数对象
var o = {
name:"123", //name的值是string
run:function(){alert("aa");} //run的值是函数对象（匿名对象）
}
console.log(o.name); //输出name的值用o.name
o.run(); //输出run的值用小括号，run()
var p = function ff(){ //p的值是函数对象
console.log(123);
}
p();//输出p的值用小括号，所以函数看成是一种特殊的值（特殊的数据类型），用小括号输出，
var d = new ff();//ff is not defined ==========================================================================
function Parent(){
this.ss = "333";
}
var pp = function(){ //pp是一个变量，值是特殊类型，函数类型
this.ss = "sss";
return new Parent();
}
console.log(pp.ss);//undefined,pp这个变量只能使用调用pp()输出他的值,他本身没有属性，
var gg = pp();//才返回return的东西
console.log(gg.ss);// pp.prorotype = 44;
console.log(pp.prorotype);//44 对象可以加一个prototype属性，不产生重名 var o = {name:666};//{}形式的对象，里面的属性不用加this就可以外部使用，函数形式的要加this,
o.aa = function(){
console.log(this.name);//666 这个函数调用的时候，里面的this就是调用他的对象
}
o.aa();
========================================================================== //$("div") 这要运行在dom下载完毕，dom加载完毕不是文档加载完毕。
//$(function(){}) === $(document).ready(function(){})
//$('div').get(0); 返回dom对象，
//$.each 静态方法
//$('div').each(function(index,ele){}); //$.extend({myMeoth:function(){}});
//$.myMeoth(); 给$扩展一个方法 //$.fn.extend({mymeath:function(){}}) 实例扩展，给jquery的对象扩展方法
//$('div').mymeath();
//jquery对浏览器兼容性，性能，容错处理。
//jquery: 选择器，ajax，动画 =========================================================================
//数组型对象， json里面可以用[]进行读写，但是[]里面要是正确的数据类型。
var o = {name:123};
o[0] = 456;
o[age] = 789; //age is not defined,age这种数据类型不再js数据类型中
o['age'] = 789;
console.log(o[name]);//undefined
console.log(o['name']);123
console.log(o[0]);
console.log(o[age]); //age is not defined,age这种数据类型不再js数据类型中
console.log(o['age']); // ========================================================================
function Parent(){
console.log("ssssssssss");
}
var pp = new Parent();//ssssssssss，new的时候，函数会执行
========================================================================
var o ={};
/* o[0] = 5;
o[1]= 6;
o.length = 2;
*/
var arr = [4,5,6];
for(var i =0 ;i<arr.length;i++){
o[i] = arr[i];
}
o.length = arr.length;//o：{0:4,1:5,2:6} var divs = document.getElementsByTagName("div");
Array.prototype.push.apply(o,divs);//o调用Array.prototype.push方法，并传入参数divs, o.(Array.prototype.push)(divs);
//o: {0:div#1,1:div#2,length:2} </script>
</body> </html>
$('div') 就返回了一个对象。 而js是，function F(){} var f = new F();才返回一个对象。
==========================================================================
(function () { //所有代码写在匿名函数里面，减少变量名的冲突，写在里面的所有东西外面是访问不到的，
//函数里面var定义的变量不是this定义的，只能给嵌套函数使用。将jquery和$暴露出去，外面就可以使用了。
var _$ = window.$;
var _jQuery = window.jQuery;//_$ === window.$ === window.jQuery === _jQuery === jQuery == 一个函数
//暴露外部使用的一个接口,jQuery是一个变量值是函数类型，里面return的对象没有赋值给jQuery,
var jQuery = window.jQuery = window.$ = function(selector){
return new jQuery.fn.init(selector);
};
//jquery是一个匿名对象，添加静态成员fn，jQuery的fn 和jQuery的prototype指向一个对象｛｝，jQuery.fn.方法名就给原型添加了一个方法，也就给jquery对象添加了一个方法。写jQuery.fn不写jQuery.prototype，fn是等于prototype的，
jQuery.fn = jQuery.prototype = {
init:function(selector){//selector选择器
var elements = document.getElementsByTagName(selector);
Array.prototype.push.apply(this,elements);//this.push(elements),返回{0:div#1,1:div#2,2:div#3}
return this;
},
jQuery:"1.0.0",
length:0,
size:function(){
return this.length;
}
};
jQuery.fn.init.prototype = jQuery.fn;
//$.extend({myMeoth:function(){}}); $.myMeoth();
//给JQuery和JQuery.fn也就是JQuery函数的原型添加一个属性extend指向一个函数（这个函数也是看成一个匿名对象，类似于 o.run = function(){},通过o.run()调用，run指向函数对象的地址，通过小括号调用，），实现继承,并且只处理只有一个参数，写jQuery.extend不写jQuery.fn.extend，fn是等于prototype的，JQery的静态属性extend是等于JQuery的原型对象的静态属性extend，指向一个匿名函数对象，
jQuery.extend = jQuery.fn.extend = function(){
var o = arguments[0];
for(var p in o){
this[p] = o[p];//this是JQuery对象，this.trim = function(text){},给jquery对象添加一个trim方法，$.trim()就可以调用这个方法。
}
};
//添加静态方法
jQuery.extend({
trim:function(text){
return (text||"").replace(/^\s+|\s+$/g,"");//text||""排除是undefined和null就是空字符串，^开头，$结尾，g全局，\s+一个或多个空格，去除空格
},
noConflict:function(){
window.$ = _$;
window.jQuery = _jQuery;
return jQuery;
}
});
//添加实例方法
jQuery.fn.extend({
get:function(num){
return this[num];//$('div').get(1);
},
each:function(fn){//$("div").each(function(){})
for(var i = 0 ;i< this.length; i++){
fn(i,this[i]);//i是索引，this是$("div")这个jquery对象，回调函数
}
return this;
},
css:function(){//$("div").css("width");获取宽度，//$("div").css("width","33px");设置值
var l = arguments.length;
if(l == 1){
return this[0].style[arguments[0]];
} else {
var name = arguments[0];
var value = arguments[1];
this.each(function(index,ele) {
ele.style[name] = value;
});
}
return this;//实现链式操作，后面还可以继续点，$("div").css("width","33px").css("height","100px")
}
});
})();
《高性能JavaScript》《JS权威指南》
<html>
<head>
<title>mini Query test </title>
</head>
<body>
<div style="width:100;height:100;background-Color:red">
abc
</div>
<div>
</div>
<script type="text/javascript">
var $ = 123;//这里写了$=123，miniQuery.js里面也定义了window.$，那么此时后面覆盖前面的，$就等于 new jQuery.fn.init(selector) 了。
/*var _$ = window.$;
var _jQuery = window.jQuery;*/
</script>
<script type="text/javascript" src="miniQuery.js"></script> <script type="text/javascript">
function FF () {
return FF.prototype.init();
}
FF.prototype ={
init:function(){
return this; //this
},
xx:"sss"
};
var f = FF(); // Object{xx:"sss"} var jq = $.conflict();
</script>
<script type="text/javascript">
var $ = 234;
console.log(jq);
</script>
</body>
</html>
js---18miniJquery的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- JS正则表达式常用总结
正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...
- 干货分享：让你分分钟学会 JS 闭包
闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...
- JS核心系列：理解 new 的运行机制
和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...
随机推荐
- 2.安装 CLI和CLI的工作原理
转自:https://www.gruntjs.net/getting-started 还在使用 Grunt 0.3 版本吗?请查看 Grunt 0.3 注意事项 在继续学习前,你需要先将Grunt命令 ...
- ubuntu16.04下snort的安装（官方文档安装）（图文详解）
不多说,直接上干货! 最近为了科研,需要安装和使用Snort. snort的官网 https://www.snort.org/ Snort作为一款优秀的开源主机入侵检测系统,在windows和Linu ...
- Adobe Photoshop CC 2015(PS CC 2015)看图不说话
- Framework3.5安装(Windows8.1)
在用到Android逆向助手,使用时提示安装Framework3.5,Windows7都有Framework3.5,Windows8却没有,联网更新就算了,这龟速更新得多久.但是问题总还是要解决,随便 ...
- PostgreSQL Replication之第一章 理解复制概念（3）
1.3 使用分片和数据分配 本节您将了解基本可扩展性技术,例如数据库分片.分片被广泛应用于高端系统并提供一个简单而且可靠的扩展设置方式来向外扩展.近年来,分片已经成为一种扩大专业系统规模的标准方式. ...
- Linux 设置交换分区
当需要添加swap分区时,可以使用如下方法:设置交换分区:1 以dd指令建立swapoff2 mkswap 来将swapfile 格式化为swap的档案格式.3 swapon 来启动该系统文件,使之成 ...
- UI Framework-1: Aura Event Handling
Event Handling A diagram of the architecture of this system: HWNDMessageHandler owns the WNDPROC ...
- 使用freerdp远程连接Windows桌面（转载）
使用freerdp远程连接Windows桌面 之前使用的是rdesktop,但是由于其不支持NLA认证,便不能登录公司的电脑.为此,现在使用freerdp——这是package的名字,实际的可执行程序 ...
- 紫书 习题 10-7 UVa 10539（long long + 素数筛）
注意要开long long 如果int * int会炸 那么久改成long long * int #include<cstdio> #include<vector> #incl ...
- Ehcache学习总结(1)--Ehcache入门介绍
Ehcache是现在最流行的纯Java开源缓存框架,配置简单.结构清晰.功能强大,最初知道它,是从hibernate的缓存开始的.网上中文的EhCache材料以简单介绍和配置方法居多,如果你有这方面的 ...