文章目录
Day33 JS&jQuery基础增强
JS一切皆对象
JS中一切皆对象
var num = 1.345423;
console.debug(num.toFixed(2));
底层的原理:当基本数据类型去调用方法的时候,它会自动把该类型转为相应的对象,当调用完毕后,他再把该对象转为相应的基本数据类型
操作对象
创建对象
- 使用new的方式
- 使用json的方式创建对象
给对象赋值/取值
赋值:####
普通赋值:对象.属性 = 值
动态赋值:对象[“属性名”] = 值
取值
普通取值:对象.属性
动态取值:对象[“属性名”]
删除对象中的属性
delete 对象[“属性”];
循环遍历对象中的成员
for in
/*
k:属性名
obj:对象
*/
//循环迭代,并且打印出对象中每个属性对应的值
for(var k in obj){
//判断成员里的属性是字段还是函数
if("function"===typeof obj[k]){
//如果是函数就调用该方法
obj[k]();
}else{
//如果不是普通字段就打印该值
console.debug(k,obj[k]);
}
}
JSON字符串转JSON对象
三种方式:
- 使用eval("("+jsonStr+")"); 不需要标准的json字符串也能转
- JSON.parse(jsonStr); 只能转标准的json字符串
- $.parseJSON(jsonStr); 只能转标准的json字符串(底层就是第二种方式实现的) 推荐使用
对象属性的拷贝
需求:请把obj1内部所有的值,拷贝到obj2中,如果obj2已经有对应的属性,那就不要覆盖了
for(var k in obj1){
//如果obj2没有指定的属性,那obj1的属性就要给obj2赋值
if(!obj2.hasOwnProperty(k)){
obj2[k] = obj1[k];
}
}
函数也是对象(了解)
注意点:如果你把函数当成一个对象进行赋值,那请不要给name设置值,因为在每个函数内部都有一个内置属性name,该属性是只读的,不能对其进行修改
window中的name
- 在script中直接打印name的值,它是不会报错的,因为name是window中的内置属性
- 给window中的 name进行赋值 每个页面都有一个window对象
得出一个结论:以后大家在script标签中定义变量名的时候,请不要定义name,很可能出现代码冲突
prototype
在js中prototype它主要用来扩展功能的
语法格式: 类型.prototype.成员 = 值
回调函数
回调函数就是在一个函数中去调用另一个函数
回调函数的作用
意义就在于我们可以对 公共代码进行封装 让代码看起来更加的整洁好看
无参的回调函数:
function go(){
console.debug("go go go olay olay");
}
setInterval(go, 500);
有参的回调函数:
function walk(str){
console.debug("滚 滚"+str);
}
setInterval("walk('测试一把')", 100);
匿名函数
方式1:把函数的值赋值给变量
var go = function(){
};
方式二:
好处: 屏蔽变量污染
(function(){
var num = 33;
alert(num);
})();
jQuery的事件注册
注册事件方式1
比较常用
但是不支持事件冒泡
$("#btn").click(function(){
alert("这是事件注册方式一")
});
//注销事件
$("#btn").off("click");
注册事件方式2
用的最多,因为兼容性最好,功能也非常强大(支持事件冒泡)
第一个参数:事件类型
第二个参数:选择器
第三个参数:不管
第四个参数:回调函数
jQuery.on(events,[selector],[data],fn)
$("#btn").on("click",function(){
alert("这是事件注册方式二");
})
//注销事件
$("#btn").off("click");
事件的注册方式三
事件绑定
$("#btn").bind("click",function(){
alert("bind一下");
});
//解绑事件
$("#btn").unbind("click");
只注册一次事件,然后自动注销
用得不多
$("#btn").one("click",function(){
alert("只生效一次...");
})
clone事件克隆
clone() 浅克隆 :只克隆表面
clone(true) 深克隆 不仅仅克隆表面,还要克隆事件
js代码:
$("#btn").on("click",function(){
var clone = $("#filediv input[code]:first").clone(true);
clone.appendTo($("#filediv"));
});
$("input[code='btn']").on("click",function(){
alert("....");
})
html代码:
<input type="button" value="动态添加按钮" id="btn">
<div id="filediv">
<input type="button" code="btn" value="按钮"><br/>
</div>
jQuery的继承
jquery的继承语法格式:
java只能是单继承,而js是可以多继承的
js继承它不仅仅继承基本属性,它还能继承父类的prototype
$.extend(子,父1,父2,父3);
jquery功能扩展
扩展语法格式:
$.fn.函数/属性 = 值
扩展方式1:
$.fn.getHtml = function(){
return this.html();
}
$.fn.setHtml = function(str){
this.html(str);
}
扩展方式2:
连续扩展
$.fn.extend({
getHtml:function(){
return this.html();
},
setHtml:function(str){
this.html(str);
}
})
var html = $("#mydiv").getHtml();
console.debug(html);
$("#mydiv").setHtml("<h1>你被我覆盖了</h1>");
data与attr的区别
data与attr都是取属性的值
attr取属性的值,取到的类型都是字符串
而data取属性的值,它会把取到的值转为对应的类型,能转则转,转不了全部返回字符串
使用data取值,必须要遵循的规则 属性名必须是data-xxxx 取值必须是 jquery对象.data(“xxxx”)
var person = $("#input").attr("data-person");
console.debug(person);
person = $("#input").data("person");
console.debug(person);
<input id="input" type="text" data-person='{"name":"西门吹雪","age":33,"dept":{"name":"开发部"}}' data-name="张三" data-age="33" data-sex="true">