1、对象
js一切都是对象,包括基本类型 和引用类型 ,函数,平时使用比较多,只是把引用类型看成对象
1.2ture和false
js在里的false:0,"",undefined,NaN,null,false,除开这几个,全部是true了
1.3对象的创建
var obj = new Object();
var obj1 = {"age":20}
var obj2 = new Person();
1.4添加属性/方法
obj.age = 18;
obj.name = "药家鑫"
obj.say = function(){
console.log("世风日下")
}
obj2.name = "波哥";
obj2["role"]="教育大师"
1.5删除属性
delete obj2["role"];
console.log(obj2);
1.6对象的遍历
要调用,需要动态调用,把p当做一个动态的变量,使用[]方式
function Person(){
var obj1={}
obj1.name = "歌神周泓旭"
obj1.age = 18;
obj1.role = "歌手"
obj1.doShow = function(){
console.log("小文超级抠门")
}
for(var key in obj1){
if(typeof obj1[key]=="function"){
obj1[key]();
}else{
console.log(obj1[key])
}
}
2 JSON对象和JSON字符串
标准的json字符串格式:'{"key":"value","key":"value"}'// key必须使用双引号,值如果不是数字和boolean类型的也必须双引号
JSON字符串和JSON对象转换有三种方式:
[if !supportLists]Ø [endif]eval表达式:表达式中必须添加()字符串,通过jsonStr.toSource()方法,查看对象源码,发现就有()
[if !supportLists]Ø [endif]window.JSON.parse(jsonStr):必须是标准的json字符串
[if !supportLists]Ø [endif]$.parseJSON(jsonStr):查看jQuery源码,发现jQuery底层就是采用JSON.parse方法,所以也必须是标准的Json字符串(源码7495行)
var jsonObj = eval("("+jsonStr+")");
console.log(jsonObj)
var jsonObj1 = JSON.parse(jsonStr)
console.log(jsonObj1)
var jsonObj2 = $.parseJSON(jsonStr console.log(jsonObj2)
2.1json类操
//定义了一个类的构造函数
function User(name,age){
//构造函数中this,就是实例对象
//如果要为对象添加属性,那么需要使用 "this.属性名 = 值;"
this.name = name;
this.age = age;
this.getName = function(){
return this.name;
};
}
//通过new创建 实例对象.
var u1 = new User("姚明",50);
console.debug(u1.getName());
var u2 = new User("小明",30);
console.debug(u2.getName());
2.2对象属性/方法拷贝
[if !supportLists]Ø [endif]通过遍历,一次性赋值。最好通过hasOwnProperty()来判断是否已经存在这个属性或者方法,避免原有的属性或者方法被覆盖
for(var key in obj1){
if(!obj2.hasOwnProperty(key))
obj2[key] = obj1[key]
}
3函数对象
函数里面name这个属性,比较特殊,他是可读的属性,不能进行修
window的name属性
变量要先定义才能使用。但是name是一个特殊的,可以当成java中关键字。直接使用name表示是使用的window.name属性。默认window.name是空字符串。但是我们可以给这个name赋值。
4 this
this:谁调用,就指向谁
修改函数中的this指向
call(thisObject,args1,args2...)//第一个参数,是调用对象;第2-n个参数是函数需要的参数,一个个的写
apply(thisObject,[args1,args2])//第一个参数,是调用对象,第2个参数是函数需要的参数,是一个数组
call,apply区别:第一个参数都是指函数运行时的this,也就是说,第一个参数是我们期望this指向的那个对象;call从第二参数开始都为调用函数的参数,而apply,第二个参数为一个数组,该数组就是调用函数的所有参数。
5 prototype原型
prototype-可以向对象添加属性和方法(原类型)
Javascript中的每一个对象都有一个prototype属性(__proto__),这个属性是一个引用,这个引用指向对象的原型。对象的实例由两部分组成:
原型共享
同一个类的各个实例的原型(__proto__)是相等的
var user1 = new User('小王',18);
console.dir(user1);
var user2 = new User('小李',5);
console.dir(user2);
console.log(user1.__proto__ === user2.__proto__)
对象属性查找规则,先从自定义的属性上面找,如果找到,就返回,如果没有,从原型上面去找
6回调函数
回调函数就是一个通过函数(对象)引用调用的函数;
如果你把函数的引用(地址)作为参数传递给另一个函数,当这个引用被用来调用其所指向的函数时,我们就说这是回调函数
setTimeout(doHandle,3000);
function doHandle(){
alert(1111);
}
alert(1);
7匿名函数
写法
(function(){
alert(1);
})();
~function(){
alert(2);
}();
+function(){
alert(3);
}();
8闭包
闭包,指的是语法。简单理解就是:函数中可以使用函数之外定义的变量。一种封装特性
闭包第一种用法:函数中可以使用函数之外定义的变量。
var result = 0;
function getRes(){
result++;
return result;
}
console.debug(getRes());
console.debug(getRes());
console.debug(getRes());
// result=2;
console.debug(getRes());
console.debug(getRes());
//result可以被外界修改,我们是想不能修改,只能计数,因为result的范围在window上,是一个全局变量,需要缩小作用域,我们可以使用匿名函数,而且需要只读,可以使用闭包,闭包+匿名函数就可以实现计数器功能。
9事件委托
前面的基本的事件绑定,在功能有一个局限。就是绑定事件的元素,必须是在绑定的时候已知的、存在的。对于以后出现的元素是不起作用,事件委托就可以处理这种情况。
$(function(){
$("#addFile").click(function(){
$("#userForm").append("
})
$("#userForm").on('click','a.delete',function(){
alert('111111111111');
})
})
10命名空间
命名空间可以有效地管理同一事件的不同监听器。就是说命名空间可以更加细致的过滤需要增加事件监听的事件源,用来做区分的。简单理解命名空间就是一串字符串。
$(function(){
$("#myBtn").on('click.btn1',function(){
alert('111');
});
$("#myBtn").on('click.btn2',function(){
alert('222');
});
$("#myBtn").off('click.btn2');
})
11 java继承:体现在子类和父类之间,子类可以继承父类里面的属性和方法
继承:jquery的继承:可以扩展功能
jquery想实现继承:可以通过prototype
jQuery.fn == jQuery.prototype == $.fn
12自定义插件
创建方法获得 路径
$("#dg").datagrid({
"url":"data.json"
});
做判断获取值
$(function(){
//自定义的表格插件的方法
$.fn.datagrid = function(obj){
var url = obj.url;//data.json
//获取表格
var table = $("#dg");
var ths = table.find("tr th");
console.log(ths);
//ajax请求
$.get(url,function(data){
//循环出来 每一个行数据
for(var i=0;i<data.length;i++){
//行
var row = data[i];
var content = "<tr>";
//列
for(var j=0;j<ths.length;j++){
//获取每一个列 id username
var th = ths[j];
//<th field="id">编号</th> id username。。。
var field = $(th).attr("field");
var funName = $(th).attr("format");//id null
var filedValue = row[field];
if(!funName){
content += "<td>"+filedValue+"</td>";
}else{
content += "<td>"+window[funName](filedValue)+"</td>";
}
}
content += "</tr>";
table.append(content);
console.log('----------------------')
/*var id = row.id;
var username = row.username;
table.append("<tr><td>"+id+"</td><td>"+username+"</td></tr>")*/
}
})
}
处理年龄
//处理年龄的方法
function ageFormat(value){
if(value != null && value != "" && value > 20){
return "<font color='red'>"+value+"</font>"
}else{
return value;
}
}
判断头像
//表示头像
function headImage(value){
if(value != null && value != ""){
return "<img width='100px' height='100px' src='"+value+"'></img>";
}else{
return "没有头像";
}
}
打印头
<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="headImage" format="headImage">头像</th>
<th field="age" format="ageFormat">年龄</th>
</tr>
</table>
<img id="myImg" src="img/5.jpg" sdsfasd="111"></img>