私人网站如何建学生个人网页制作成品代码
jQuery基础二
一、JavaScript面向对象
（一）一切皆对象
不管是基本类型和引用类型或者函数都可以看成一个对象调用方法
**基本数据类型:**number boolean string null undefined
**引用数据类型:**Object Array Regexp Date Number Boolean String…
/*基本数据类型中number*/
var num1 = 3.1415926;
console.log(num1.toFixed(2));//保留2位小数
console.log(typeof num1);//number/*引用数据类型Number*/
var num2 = new Number(3.1415926);
console.log(num2.toFixed(2));
console.log(typeof num2);//object
（二）JS中true和false的判断
0 " " undefined NaN null false表示为false,其他值都表示为true
var b1 = false;
if(b1){console.log("不能输出");
}
//这是一个对象类型，判断 为true
var b2 = new Boolean(false);
if(b2){console.log("能输出");
}
if(10){console.log("表示true");
}
（三） JS对象的操作
1.创建对象
//方法一
var obj1 = new Object();
console.log(obj1);
//方法二
var obj2 = {name:"猪皮",age:2};
console.log(obj2);
//方法三
function Animal(){}
var obj3 = new Animal();
console.log(obj3);
2.添加属性和方法
obj3.name = "猪皮";
obj3["age"] = 2;//使用[]需要使用引号
obj3.eat = function(food){
console.log(this.name+"喜欢吃"+food);
}
console.log(obj3);
3.删除属性
delete obj3.name;
delete obj3["age"];
console.log(obj3);
4.遍历对象成员
for(var a in obj3){if(typeof obj3[a] == "function"){//为方法时obj3[a]("小鱼干");//函数的调用需要有()}else{console.log(obj3[a]);}
}
（四）JSON对象和字符串相互转换
标准的json字符串格式：’{“key”:“value”,“key”:“value”}’（key必须使用双引号，值如果不是数字和boolean类型的也必须双
引号）
//json字符串
var jsonStr = '[{"name":"猪皮","age":2}]';
//转换json对象的方法一：eval
var jsonObj1 = eval("("+jsonStr+")");
console.log(jsonObj1);
//转换json对象方法二： window.JSON.parse(jsonStr) 必须使用标准格式
var jsonObj2 = window.JSON.parse(jsonStr);
console.log(jsonObj2);
//转换json对象方法三： $.parseJSON(jsonStr) 必须使用标准格式
var jsonObj3 = $.parseJSON(jsonStr);
console.log(jsonObj3);
（五）对象属性拷贝
1.方法一 ：先从obj1取出来，在赋值obj2
//先从obj1取出来，在赋值obj2
obj2.address = obj1.address;
obj2.age = obj1.age;
obj2.sex = obj1.sex;
2.方法二：通过hasOwnProperty()来判断是否已经存在这个属性或者方法
//通过遍历，一次性赋值
for(var key in obj1){//判断obj2中是存在这个属性if(!obj2.hasOwnProperty(key)){obj2[key] = obj1[key];}
}（六）JS函数对象
1.定义方式
var add = new Function("a","b","return a+b");
console.log(add(1,2));//32.函数的name属性
是只读属性，不能修改
3.window的name属性
默认window.name是空字符串，但是我们可以给这个name赋值
console.log(name);//""
window.name = "名字";
console.log(name); //名字（七）JS中的this
1.概念
谁调用该函数，this就代表谁
function sayHello() {return this.name;
}
console.log(sayHello());//"" 相当于是window.sayHello(),所以this指向window的name2.修改函数中的this指向
1）call（thisObject,args1,args2…）
第一个参数，是调用对象；第2-n个参数是函数需要的参数，一个个的写
console.log(sayHello.apply(u,[10,11]));2）apply（thisObject,[args1,args2]）
第一个参数，是调用对象,第2个参数是函数需要的参数，是一个数组
console.log(sayHello.call(u,11,12));二、JS的prototype原型
（一）作用
Javascript中的每一个对象都有一个prototype属性(proto),可以通过该属性往对象上面添加属性和方法
（二）原型共享
1.同一个类的各个实例的原型是相等的
function User(name, age) {this.name = name;this.age = age;this.eat = function(){console.log("吃食物");}
}
var u1 = new User("彩虹",17);
var u2 = new User("桂林",18);
//同一个类的各个实例的原型是相等的
console.debug(u1.__proto__ == u2.__proto__);//true2.往类原型上面添加属性和方法,其他对象也可以共享
u1.__proto__.sex = "男";
console.debug(u2.__proto__ .sex);//男（三）对象访问属性
如果本身对象里面有属性和方法，先使用本身对象里面的属性和方法，如果没找到，z再从原型上面找
User.prototype.eat = function(){console.log("火锅");
}
u1.eat();//吃食物三、JS回调函数
重新回过头来调用函数
例子
1.jQuery的回调
$.get/post(url,data,function(data){})2.定时器setTimeOut的回调
setTimeout(function(){console.log("定时器回调")
},3000);四、JS匿名函数
（一）概念
就是没有名称的函数
（二）使用
1.(function(){})()
2.~function(){}()
3.+function(){}()
（三）作用
1.只使用一次
2.可以避免作用域污染问题
（四）作用域污染
定义一个属性默认是在window上的,相当于一个全局变量。当我使用完后不再使用的时候，就出现在window上面，这样会
造成一个作用域的污染
var x = 10;
var y = 20;
var result = x + y;
console.log(result);
console.log(window);
//解决方法：写一个匿名函数，将这个功能包裹起来，这样变量就只在我的函数里存在
(function(a,b){var result = a+b; window.getResult = function(){return result;}
})(10,20);var result2 = getResult();
console.log(result);//30
console.log(window);//window上面没有出现a、b的值五、JS闭包
（一）概念
函数内使用函数外的变量
（二）作用
1.函数中可以使用函数之外定义的变量
var msg = "闭包";
function sayMsg(){console.log(msg);
}
sayMsg();//闭包2.实现只读属性
var result = 0;
function getResult(){result = result+1;return result;
}console.log(getResult());//1
console.log(getResult());//2
console.log(getResult());//3
result = 0;
console.log(getResult());//1
console.log(getResult());//2
console.log(getResult());//3_________________________________________________________________(function(){var a = 0;getResult = function(){return a++;}
})();console.log(getResult());//0
console.log(getResult());//1
console.log(getResult());//2
a = 1;
console.log(getResult());//3
console.log(getResult());//4
console.log(getResult());//5六、JS练习题
/*练习题1*/
var name = "The Window";
var object = {name : "My Object",getNameFunc : function(){alert("1:"+this);return function(){alert("2:"+this);return this.name;};}
};
alert(object.getNameFunc()());//1:[object Object] 2：[object Window] The Window/*练习题2*/
var name = "The Window";
var object = {name : "My Object",getNameFunc : function(){var that = this;return function(){return that.name;};}
};
alert(object.getNameFunc()());//My Object/*练习题3*/
function Hello(){alert("Hello");
}
Hello();//Hello World
function Hello() {alert("Hello World");
}
Hello();//Hello World七、jQuery事件机制
事件源:事件发生的源头
事件响应函数：执行的一些操作
事件监听器：监听事件源，监听到之后，可以触发响应函数
事件对象：事件发生 的 事件 地点 人物 封装到一个对象里面
事件名称: 事件名字 onclick keyup keydown
事件源：杰哥的某个部位
事件响应函数： 被别人打了一耳光
事件监听器: 美女神经系统 / 杰哥神经系统
事件对象:这个事件里面的人物、时间、地点 – 封装到对象
事件名称: 摸人事件
（一）事件注册
- $("#btn").click(function(){}）
- $("#btn").bind(‘click’，function(){}) unbind取消绑定
- $("#btn").on(‘click’，function(){}) off取消绑定
（二）事件委托
1.概念
绑定事件的元素，必须是在绑定的时候已知的、存在的，对于以后出现的元素是不起作用，事件委托就可以处理这种情况
2.使用
<a id="addFile" href="javascript:;">添加更多附件</a>
<form id="userForm"><div>附件:<input type="file" name="file" /></div>
</form>$(function(){/*常规的事件绑定方法*/$(#addFile).click(function(){var content = '<div>附件:<input type="file" name="file" /><a class="delete" href="javascript:;">删除</a></div>';$("#userForm").append(content);
});
$(".delete").click(function(){alert("删除");
});/*事件委托*/
$("#userForm").on("click","a.delete",function(){alert("删除..");
})
});八、jQuery事件命名空间
（一）语法
事件名称.命名空间
（二）使用
有一个按钮，可能同时绑定了两个点击事件，做出不同的响应。但是在某种情况下，就需求取消其中一个事件的绑定，就使用命名空间来进行区分
$(function(){ $("#btn").on('click.btn1',function(){alert(1);})$("#btn").on('click.btn2',function(){alert(2);});$("#btn").off('click.btn1');})九、jQuery扩展机制
（一）概念
在原型prototype上扩展
jQuery.fn = jQuery.prototype = $.fn == jQuery.extend
（二）使用
相当于$("#div").html(“扩展机制”)
<div id="div">扩展</div>$(function(){$.fn.setHTML = function(content){$(this).html(content);console.log(content); };$("#div").setHTML("扩展机制");
});十、jQuery自定义插件datagrid
<table id="dg" border="1"><tr><th field="id">编号</th><th field="username">用户名</th><th field="password">密码</th><th field="tel" >电话</th><th field="email">邮箱</th><th field="age" formatter="ageFormatter">年龄</th><th field="headImage" formatter="imageFormatter">头像</th></tr>
</table>$(function(){$.fn.datagrid=function(url){var table = $(this);//找到所有的th表头var ths = table.find("tr th");//发送ajax请求$.get(url,function(data){//行for(var i=0;i<data.length;i++){var obj = data[i];var content = "<tr>";//如果检测到列里面有formatter这个属性调用方法for(var j=0;j<ths.length;j++){var th = ths[j];//<th field="id">编号</th>//取出它的属性fieldvar field = $(th).attr("field");//idvar formatter = $(th).attr("formatter");if(formatter){//调用方法 ageFormatter /imageFormattercontent += "<td>"+window[formatter](obj[field])+"</td>";}else{content += "<td>"+obj[field]+"</td>";}}content +="</tr>";console.log(content);table.append(content);}})}$("#dg").datagrid('employee.json');
});//处理年龄的方法
function ageFormatter(value){if(value && value > 20){return "<font color='red'>"+value+"</font>";}else{return value;}
}
//处理图片的方法
function imageFormatter(value){if(value){return "<img width='50px' height='50px' src='"+value+"'></img>";}else{return "没有图片";}
}