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">

此生只愿你笑靥如繁花

发布了54 篇原创文章 · 获赞 9 · 访问量 872

私信关注

JS&jQuery基础增强

文章目录