JavaScript高级加强笔记

2022-09-27 16:47:47

1.js可以写任意位置(建议写在最下面)
2.所有的全局变量(函数)都在window对象中
3.动态调用对象[“方法名”] () 对象.方法名()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
	//一切都是对象
	//函数就是方法，方法就是函数
	// 函数:面向过程的说法  方法:面向对象的说法
	/* function say() {
		alert(0);
	}
	say();//调用函数 ,调用函数必需要加一个括号*/
	var say = new Function("a","b","return a+b;");
	console.debug(say(4,6));
	//调用函数和参数无关
	//返回值:想返回什么直接return ,如果没有return，自己返回undefined
	function say1(a,b){
		alert(a+b);
	}
	console.debug(say1(4,8));
	console.debug(say1(4));
	console.debug(say1(1,2,3))
	// window->我们在外部定义【全局变量】的所有的变量以及方法都属于顶层对象
	var username="蛇皮超";
	console.debug(username);
	console.debug(window.username);
	console.debug(window)
	window.say1(3,4);
	//我们拿一个对象的属性，使用.和[]是一个效果
	console.debug(window.username);
	console.debug(window["username"]);	
	//动态调用
	window["say1"](4,4)
	console.debug(window)
</script>

</body>
</html>

4.预编译(变量提升) -> 所有变量的定义都会跑到最上面去【面试】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//js会把所有变量的定义放到最前面
//以后写js定义尽量就写在最前面
		var username="预编译了吗？"
		console.debug(username)
</script>
</head>
<body>

</body>
</html>

 - 建议大家以后定义变量都写在最前面

5.arguments js的内置对象,伪数组
- 所有方法中都有一个arguments,它里面装的是调用方法的所有参数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/**
		调用函数和参数无关
			把我传过来的参数全部累加起来
		js内置了很多对象 内置对象(js自动为你准备好的)
			arguments -> 每次调用方法都会在方法中创建这对象
			arguments -> 伪数组(它里面装的就是我访问方法这个方法的所有参数)
	*/
	function add(){
		//console.debug(arguments)
		var result = 0;
		for(var i=0;i<arguments.length;i++){
			result += arguments[i];
		}
		return result;
	}
			
	console.debug(add(5));
	console.debug(add(5,8));
	console.debug(add(5,8,2));
	console.debug(add(5,8,2,5));

</script>
</head>
<body>

</body>
</html>

6.对象三步曲
- 定义对象: var obj = {};
- 设置对象的属性(重点): obj.属性名/obj[“属性名”]
- 删除相应的属性 delete obj.属性名/obj[“属性名”]
- for…in -> 循环与遍历数组/对象
  - 数组的话:key是下标，对象的话:key是属性
  - for(var key in obj){obj[key]}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	//1.创建对象
	//var obj = new Object();
	var obj = {};
	//2.设置对象的属性与方法  所以用.的地方都可以用[]来替换
	/*
	obj.name = "小张";
	obj.age = 45;
	obj.say = function(){console.debug("我说，。。。")}
	*/
	obj["name"] ="小王";
	obj["age"] = 15;
	obj["say"] = function(){console.debug("你说....")}
	/**
		for..in是用于做循环的
			数组：key就是下标
			对象：key就是对象的属性
	*/
	for(var key in obj){
		//console.debug(obj[key],typeof obj[key])//小王  string
		if(typeof obj[key] == "function"){
			//console.debug(obj[key])//对象的属性
			obj[key]();
		}
	}
	
	//修改与添加设置写法是一样的
// 	obj.name = "小八";
	//删除某一个属性
// 	delete obj.age;
	
	//3.获取属性的方法
// 	console.debug(obj.name);
// 	console.debug(obj.age);
// 	obj.say();
// 	console.debug(obj)

</script>
</head>
<body>

</body>
</html>

7.JSON字符串的转换
eval("("+jsonStr+")");
JSON.parse(“标签的jsonStr”)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		var json={"name":"json",age:12};
		console.debug(json);
		
		var json='{"name":"json",age:12}';
		console.debug(json)
		//把json字符串转成json,方法一
		var json='{"name":"json",age:12}';
		console.debug(eval("("+json+")"))
		//把json字符串转成json,方法二
		var json='{"name":"json","age":12}';
		console.debug(JSON.parse(json))
</script>
</head>
<body>

</body>
</html>

8.对象的属性拷备【练一下】
for(var key in obj01){
if(!obj02.hasOwnProperty(key)){
obj02[key] = obj01[key];
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var obj1 = {
		name : "鳝鱼超",
		age : 100,
		pwd : "123"
	}
	var obj2 = {
		name:"咸蛋超"	
	}
	//遍历第一个对象，把他的所有属性交到第二个对象
	for(var key in obj1){
		//hasOwnProperty()来判断是否已经存在这个属性
		if (!obj2.hasOwnProperty(key)) {//判断 一个对象是否有这个属性
			obj2[key]=obj1[key];
		}
	}
	console.debug(obj1)
	console.debug(obj2)
		
</script>
</head>
<body>

</body>
</html>

9.函数也是一个对象(它就是可以加属性加方法,但是name属性不能改)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		//函数也是一个对象
		function say(){
			alert(0);
		}
		//say.name="haha";//name是一个只读属性，方法名
		say.age=5;
		say.sex=true;
		say.hello=function(){
			alert("hello...")
		}
		console.debug(say)
		say.hello()
</script>
</head>
<body>

</body>
</html>

10.this:谁调用，this就指向谁
改变this的指向 call,apply
函数.call(obj,arg1,arg2,…)
函数.apply(obj,[arg1,arg2,…])

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		var obj01={
				name:"酒杯",
				age:45
		}
		var obj02={
				name:"酒",
				age:400
		}
		var say = function(a,b){
			console.debug(this)
			console.debug(a,b);
		    console.debug(this.name+","+this.age);
		}

		/* obj01.hello=say;//变量赋值，say相当一个变量
		obj01.hello(); */
		//改变this的指向
		say.call(obj01,3,6);
		//say.apply(obj02,[4,6])
	
</script>
</head>
<body>

</body>
</html>

11.prototype:js的原型
我们可以通过原型扩展(原生,自定义)功能
Date.prototype.方法名 = function(){}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		//prototype:为原生对象扩展的一个方法
		Date.prototype.format=function(){
			console.debug(this)
			return this.getFullYear()+"-"+this.getMonth();
		}
		var date=new Date();
		console.debug(date.getMonth())//5
		console.debug(date.getFullYear())//2019
		console.debug(date.format)//function format()
		console.debug(date.format());//2019-5
</script>
</head>
<body>

</body>
</html>

12.回调函数，匿名函数,闭包
回调　函数（函数）
setInterval(function(){},1000) / $.get(url,function(){})

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//我们可以把一个函数当做另一个函数的属性传过去，而传过去的这个函数我们称之为回调函数
	/* var i = 0;
	setInterval(function(){
		console.debug(i++)
		
	},1000); */
	var i=0;
	function haha(){
		console.debug(i++)
	}
	setInterval(haha,1000);//定时器
</script>
</head>
<body>

</body>
</html>

匿名函数
(function(){})() -> 修改作用域

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//一般来说，Js要求尽量不要使用全局变量
//匿名函数就是一个没有名称的函数
//他可以改变代码的作用域
		(function(a,b){
			console.debug(a+b)
		})
			(4,6)
</script>
</head>
<body>

</body>
</html>

闭包:函数里面可以使用函数外的变量与方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//闭包：指的是语法，简单理解就是：函数中可以使用函数之外定义的变量，一种封装特性
		var username="闭包";
		function say(){
			console.debug(username);
		}
		say()
</script>
</head>
<body>

</body>
</html>

计数器
(function(){
var result = 0;
window.getRes = function(){
return result ++;
}
})

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		/* var result =0;
		function getRets(){
			result++;
			return result;
		} */
		(function(){
			var result=0;
			window.getRets=function(){
				result++;
				return result;
			}
		})
		()
		//让result只能通过方法来修改，无法直接修改
		console.debug(getRets())
		console.debug(getRets())
</script>
</head>
<body>

</body>
</html>

13.jQuery的三个点
1.注册事件 jquery对象.on(“click.命名空间”,function(){…})

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
		$(function(){
			$("#mybtn").on("click.one",function(){
				console.debug("事件监听一")
			})
			
		$("#mybtn").on("click.two",function(){
				console.debug("事件监听二")	
		})
		$("#mybtn").off("click.two")//取消事件监听二
	})
		
</script>
</head>
<body>
	<button id="mybtn">你点我啊</button>

</body>
</html>

2.继承(拷备属性) -》把后面的对象的属性都拷备给第一个对象
$.extend(obj,obj2,obj3,…)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
	$(function(){
		
		var obj =  {tel:"189",sex:true};
		var obj1 = {name:"达康书记",age:100};
		var obj2 = {};
		//把第一个对象的属性，交给第二个对象
		//把后面的对象的属性，交给前面
		$.extend(obj2,obj1,obj);
		console.debug(obj2);
	})
</script>
</head>
<body>
</body>
</html>

3.自定义插件 $.fn.插件名 = function(){}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
	
	$.fn.changeColor = function(){
		this.hover(
			function(){
				 $(this).addClass("youdiv");
			},
			function(){
				$(this).removeClass("youdiv");
			}
		)
	}
	
	$(function(){
		/*
		//监听鼠标移上来与移出去的事件
		$("#mydiv").hover(
		  //鼠标移上来
		  function () {
			 $(this).addClass("youdiv");
		  },
		  //鼠标移出来
		  function () {
			 $(this).removeClass("youdiv");
		  }
		);
		*/
		
		$("#mydiv").changeColor();
		
	})
</script>

<style type="text/css">
	.mydiv{
		width:100px;
		height:100px;
		background: red;
	}
	.youdiv{
		background: blue;
	}
</style>
</head>
<body>
<div id="mydiv" class="mydiv"></div>

</body>
</html>

14.js一切皆对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		var i = new Number(6.4545);
		//我们可以调用Number对象上面的toFixed(2)方法来进行小数位的截取
		console.debug(i.toFixed(2))//6.45,一切皆对象
		console.debug(i)//Number { 6.4545 }
		var i=6.4545;
		console.debug(i.toFixed(2))
		//在js：null,false,"",NaN,undefined,0;
		//js 中所有值的真假性:  0,"",undefined,NaN,null,false(基本数据类型的false)为false,
		//其他值都为true.
		var flag=false;
		if (flag) {
			alert(0)
		}
		//js 中所有值的真假性:  0,"",undefined,NaN,null,false(基本数据类型的false)为false,
		//其他值都为true.
		var flag = new Boolean(false)
		if(flag){
			console.debug("会输出...坑")
		}
</script>
</head>
<body>

</body>
</html>

jQuery自定义插件datagrid
- 显示表格数据的插件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">

$(function(){

	//创建一个datagrid控件
	$.fn.datagrid = function(params){
		//这个this指的就是调用的元素 -》 $("#mytable")
		//var that = this;
		//拿到这个table中的tbody
		// find:当前元素里面的某个符合条件的元素
		var tbody = this.find("tbody");
		//拿到table中的所有th
		var ths = this.find("th");
		//拿到请求的路径
		var url = params.url;
		//根据路径到后台拿到对应的数据
		$.get(url,function(result){
			//遍历咱们的result数据
			for(var i=0;i<result.length;i++){
				//拿到每一条数据
				var userData = result[i];
				//创建一个tr
				var tr = $("<tr>");
				//遍历所有的th（每个th都对应一个td）
				for(var j=0;j<ths.length;j++){
					var th = $(ths[j]);
					//拿到th中地filed属性
					var field = th.attr("field");
					//创建相应的td
					var td = "<td>"+userData[field]+"</td>";
					//把td放到tr中去
					tr.append(td);
				}
				
				//把tr放到tbody中去
				tbody.append(tr);
			}
		})
	}
	
	$("#mytable").datagrid({url:"/data.json"})
})

</script>

</head>
<body>

<table id="mytable" border="1">
	<thead>
		<tr>
			<th field="id">编号</th>
			<th field="username">用户名</th>
			<th field="email">邮件</th>
			<th field="tel">电话</th>
			<th field="headImage">头像</th>
			<th field="dept">部门</th>
			<th field="age">年龄</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>


</body>
</html>

data.json

[
    {
        "id":1,
        "username":"admin",
        "password":"62efb964427b82a243c4fb11c628f986",
        "tel":"100001",
        "email":"admin1@qq.com",
        "age":20,
        "headImage":"/img/1.jpg",
        "dept":{
        	"id":1,
        	"name":"IT部"
        }
    },
    {
        "id":2,
        "username":"admin2",
        "password":"e9f128d79283d54b1eb25f23b1c17b5a",
        "tel":"100002",
        "email":"admin2@qq.com",
        "age":20,
       	"headImage":"/img/2.jpg",
        "dept":{
        	"id":2,
        	"name":"小卖部"
        }
    },
    {
        "id":4,
        "username":"admin4",
        "password":"63eac0108bbcfd82f5a8ed69e7299496",
        "tel":"100004",
        "email":"admin4@qq.com",
        "age":50,
        "headImage":"/img/3.jpg"
    },
    {
        "id":5,
        "username":"admin5",
        "password":"1c7406e47313a524a9efb0cc3c4700ed",
        "tel":"100005",
        "email":"admin5@qq.com",
        "age":20,
        "headImage":"/avtars/avtars5.png"
    }    
]


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		function say(){
			alert("你好啊")
		}
		say();
		function say(){
			alert("方法名一样能吗")//上面那个被覆盖了
		}
		say()
</script>
</head>
<body>

</body>
</html>

重点(几天之后你还得记得):

1. []和.是一样的意思
        动态调用  对象["方法名"]();
2. JSON字符串的转换 
	eval("("+jsonStr+")") / JSON.parse("标准json字符串")
3. this:谁调用，this就指向谁

码农公寓

重点(几天之后你还得记得):

相关文章