JS加强

jQuery加强

1.JS概述：

JS是一个基于对象和事件驱动的编程语言。

1.1 JS一切皆对象

java对象：某一个事物的具体的实例

java基本类型：byte short int char long float double boolean

JS中的false:0 , “”,undefined , NaN , null , false；

2.语法

2.1 遍历/迭代对象成员

代码模板

for(var p in obj){ 
	console.debug(p);
    if(typeof jsonObj[p] == 'function'){//判断是否是函数方法
        jsonObj[p]();//函数的调用需要在最后加()
    }else{
        console.debug(jsonObj[p]);
    }
}

例子：

<script type="text/javascript">
	var jsonStr = [{"name":"王麻子","age" : 16,"sex" : "男"},{"name" : "张麻子","age" : 26,"sex" : "女"}];
	for (var key in jsonStr) {
		if(typeof jsonStr[key] == "function"){
			jsonStr[key]();
		}else{
			console.debug(jsonStr[key]);
		}
	}
		</script>

2.1 json字符串和json对象的转换

1、eval表达式

	var jsonStr = '[{"name":"云小贱 ","age":18,"sex":"male"},{"name":"向乌龟","age":21,"sex":"male"}]';
	console.debug(jsonStr);
	var jsonObj = eval("("+jsonStr+")");

2、window.JSON.parse(jsonStr)

var jsonObj2 = window.JSON.parse(jsonStr);

3、$.parseJSON(jsonStr)

var $jsonObj3 = $.parseJSON(jsonStr);

2.2 JS中创建对象

创建对象的两种方式

var obj = new Obj();
var json = {'key':'value','key':'value'};

对象添加属性或方法

obj.age=20;
obj.name="云小贱";
obj["age"] = 18;
obj["name"]="张三";
var json =  {"name":"云小贱","age":20}
//添加方法
obj.say = function(){
    console.debug("恭喜云珲瑜结扎成功。")
}

删除属性(无法删除方法)

delete obj.name;
delete obj["age"]

2.3 JS类

类名首字母大写

function ClassName(par1,par2...){
    this.par1 = par1;
    this.par2 = par2;
    this.func = function(){        
    }
}

新建对象

var obj = new Class(par1,par2...)

实例

<script type="text/javascript">
	function Hero(name,career){
		this.name = name;
		this.career = career;
		this.getSkill=function(){
			console.log("IronManComing")
		};
	}
	var spiderman = new Hero("Helandi","spiderman");
	console.log(spiderman.name)
	spiderman.getSkill();

2.4 对象之间的属性赋予

2.4.1 赋予方式(不建议)

obj.[key] = obj2.[key]

实例(注意对象创建时，属性之间的连接符为 , )

<script type="text/javascript">
		var wifi = {
			name:"wifi",
			age:20,
			sex:"male",
			skill:"music"
		};
			
		var blue2={
			name:"blue2",
			age:18,
		};
			
		blue2.sex=wifi.sex;
		console.log(blue2.sex);
</script>

2.4.2 推荐的赋予方式

for (var key in wifi) {
	if(!blue2.hasOwnProperty(key)){
		blue2[key] = wifi[key];
	}
}
for (var key in blue2) {
	if(typeof blue2[key] == 'function'){
		console.log(blue2[key]());
	}else{
		console.log(blue2[key]);
	}
}

执行结果

blue2 
18 
male 
music

2.5 函数也可作为对象进行赋值

函数对象

<script type="text/javascript">
	var add = new Function("a","b","return a+b");
	console.log(add(2,3));
</script>

注意return，如果没有return会报错。

实例：

			add.age=18;
			add.name = "小明";
			add.sname="小牛";
			console.log(add.age);
			console.log("!!!!" + add.name);
			console.log("!!!!" + add.sname);

执行结果：name属于只读属性，无法被更改(可能是固有字段)。

5 
18 
!!!!anonymous 
!!!!小牛

2.6 JS中的this：谁调用指向谁。

实例：

var obj1 = {
	"name": "云小贱"
};			
function sayHello() {
	return this.name; 
};			
obj1.say = sayHello;
console.debug(obj1.say()); 
console.debug(sayHello()); 

执行结果：

云小贱

obj1.say()会将obj1的name作为返回值返回，而第二个sayHello调用的是window的属性，故为空值。

2.7 JS中修改this的指代对象(Unknown)

看不懂。直接贴图。

[外链图片转存失败(img-MUfuoeYl-1563460112337)(file:///C:/Users/MI/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg)]

2.8 Prototype原型

Javascript中的每一个对象都有一个prototype属性(proto)，这个属性是一个引用，这个引用指向对象的原型。

同一个类的各个实例的原型(proto)是相等的

同一个类的各个实例的原型(proto)共享

function User(name, age) {
		this.name = name;
		this.age = age;
	}
	
	var obj1 = new User("云小贱",17);
	var obj2 = new User("向乌龟",18);
console.debug(obj1.__proto__==obj2.__proto__);//true	

3.回调函数

回调函数是通过函数/对象引用调用的函数；

如同system.out.println(str.toString.trim())；

4.匿名函数

为了不污染作用域(不产生只使用一次的全局变量)传递参数的一种方法，有三种写法。

4.1 （function({});

4.2 ~function(){};

4.3 +function(){};

实例

//正常函数
	function sayName(name) {
		console.debug("我是:" + name);
	}
	
	//匿名函数
	function(name){
		console.debug("我是:" + name);
	}

一般使用写法：

(function(name) {
		console.debug("我是:" + name);
	})();//必须要加()才算调用,此时未传参。

<script type="text/javascript">
	(function(a, b) {
		window.result = a*b; //全局变量接收。
	})(10, 50);
	console.debug(result);
	console.debug(window);
</script>

直接当作参数传递

setTimeout(function(){
	console.debug("恭喜像乌龟喜提绿帽子一顶");
},1000);

5. 闭包

在函数中可以使用该函数外的变量，类似于java中调用代码块之外的变量。

实例：

var msg = "666";
function sayMsg(){
	console.debug(msg);
}
sayMsg();

6.jQuery事件机制回顾和加强

6.1 常见的三种事件注册方法：

1、$("#btn").click(function(){})

2、$("#btn").bind(‘click’,function(){})

3、$("#btn").on(‘click’,function(){})

6.2 事件委托

事件绑定的功能有局限：绑定事件的元素必须是页面加载时已经存在的元素，对于之后出现的元素是不起作用的，而事件委托就可以处理这个问题；

语法

事件绑定

$("a.delete").bind("click",function(){
 	console.debug("XXX");	
}) 

事件委托

//delegate(selector,[type],[data],fn)
$("#userForm").delegate("a.delete",'click',function(){
	console.debug("XXXX")
})

7.事件命名空间

管理同一事件的不同监听器。

例如：某个按钮可能同时绑定了两个点击事件做出不同的响应，但在某种情况下需要取消其中一个事件的绑定，就可以使用这个功能。

真的是个很鸡肋的设计了。

<script type="text/javascript">
	$(function(){	
		$("#btn1").on("click.1",function(){
			alert("喜提绿帽子一顶！");
         })							 
        $("#btn1").on("click.2",function(){
            alert("喜提绿帽子第二顶！");
	   })		
 		$("#btn1").off("click.2");
     })
</script>
	</head>
	<body>
		<input type="button" id="btn1" value="云小贱"/>
		<input type="button" id="btn2" value="向乌龟"/>
	</body>

8.JQuery的继承

给jQuery对象进行功能扩展，就应该在原型prototype上扩展；

jQuery源码：就是在扩展原型jQuery.fn = jQuery.prototype=$.fn.

扩展分为单一扩展（一次扩展一个功能）和连续扩展 一次有多个功能。