<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
<title>Document</title>
<script type="text/javascript">
//匿名函数，页面加载时会运行一次，里面的函数会被加载到内存供后面使用?
(function(){
//局部的匿名函数带参数赋给jq，返回的是个对象。这里的sel参数传入的就是节点，可能是js的，也可能是#或者.这类的就query用的
var jq=function(sel){
return new jq.fn.init(sel);//这里的new 返回给对象 js函数就是类
}
//给对象jq添加成员方法fn
jq.fn={
init:function(sel){
//实现各种选择器：#id tag dom对象
//字符串.indexOf('#') 从字符串的左边查找第一次出现"#"号的下标位置,没有出现返回-1
if(sel.nodeType){//dom对象 $(dom对象)
this[0] = sel;
this.length = 1;
}else if(sel.indexOf('#')===0){ //#id
//sel = "#username";
var flag = sel.substr(1); //去除#号
var elem = document.getElementById(flag);
//dom对象 是jquery对象的数组部分
this.length = 1; //dom对象数量
this[0] = elem;
}else{//tag标签
//sel = "input";
var elems = document.getElementsByTagName(sel);//集合列表对象
//集合列表对象 与 jquery对象做合并，dom对象变为jquery对象的数组部分
for(var i=0; i<elems.length; i++){
this[i] = elems[i];
}
this.length = elems.length;
}
},
css:function(k,v){
//this代表调用该方法的当前对象(jquery对象)
//jquery对象 需要变为dom对象才可以设置样式
//设置遍历机制，以便多个对象的处理
for(var i=0; i<this.length; i++){
this[i].style[k] = v;
}
},
attr:function(k,v){
//遍历并设置属性
for(var i=0; i<this.length; i++){
this[i].setAttribute(k,v);
}
},
each:function(callback){
//this代表调用该方法的当前对象(jquery对象)
//callback代表参数是函数参数
//遍历每个dom对象
for(var i=0; i<this.length; i++){
//this[i] //代表每个dom对象
//callback在此for循环被执行多次，每个函数内部的this关键字就代表dom对象
callback.call(this[i],i,this[i]); //函数.call/apply(函数内部this的指引,参数,参数...)
}
}
}
//init继承了fn的所有成员变量和方法,根据上面的函数返回的是new jq.fn.init(sel)，jq对象本身是init，现在Init继承了fn，jq更强大
jq.fn.init.prototype = jq.fn;
window.$ = jq;//把jq赋给$现在$就表示对象jq
})();
function f1(){
var clr = ['green','blue','gole','orange','pink','yellow'];
$('li').each(function(m, n){
$(this).css('color',clr[Math.floor(Math.random()*7)]);
});
//console.log($('#username'));//可以获取id="username"的所有信息
$('#username').css('backgroundColor','pink');
console.log($('li'));
$('li').css('backgroundColor','blue');
$('li').attr('country','three');
}
</script>
</head>
<body>
<input type="text" id="username" value="jack" /><br />
<input type="text" id="useremail" value="jack@163.com" /><br />
<input type="text" id="userqq" value="238823" /><br />
<ul>
<li>刘</li>
<li>关</li>
<li>张</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
红色部分就是贯穿始终，根据匿名函数参数创建的对象。jq就是这个this。这个this原型继承（prototype）fn。就能使用fn里面的所有。