JS 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));//3
2.函数的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的name
2.修改函数中的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__);//true
2.往类原型上面添加属性和方法,其他对象也可以共享
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>
//取出它的属性field
var field = $(th).attr("field");//id
var formatter = $(th).attr("formatter");
if(formatter){
//调用方法 ageFormatter /imageFormatter
content += "<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 "没有图片";
}
}
1847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
