<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);//333 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']); //789 ======================================================================== 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>