java中jQuery自我学习中介_jquery 回调函数debug-优快云博客

本文链接：https://blog.youkuaiyun.com/sdadaada/article/details/96447852

1.什么是js？

js是一个基于对象和事件驱动的前端的编程语言，可以用来改进的设计，比如验证表单

下面都是基于jQuery框架所做的小练习
1.1.js中创建对象的三种方式``

		//通过直接new js中的已知类型
			var obj = new Object();
			console.debug(obj)
			//给对象赋值
			obj.name="猪儿虫";
			obj.age="18";
			console.debug(obj)
			console.debug("--------------------------------------------")
			//第二种方式 varobj1={}	
			var obj1 = {"name":"人才","age":18}
			console.debug(obj1)
			console.debug("--------------------------------------------")
			//第三种方式 先自定义一个对象然后通过new对象的方式获取
			function People(){}
			var obj2 = new People();
			obj2.name="你是猪吗"
			console.debug(obj2)

1.2 js中的true和false
在js代码中只有false：0,"",undefined,NaN,null,false，表示false，除开这几个，全部是true了
1.3js中的JSON操作

		/*标准的json格式字符串key必须用双引号，value只有不是布尔值或者数字时可以不用双引号*/
			var b = '{"name":"猪儿虫","age":19}'
			//1.第一种方式
			var JSON1 = eval("("+b+")")
			console.debug(JSON1)
			console.debug("---------------------------------------")
			//2.第二种方式JSON。parse()传入的字符串必须是标准的json格式
			var JSON2 = JSON.parse(b)
			console.debug(JSON2)
			console.debug("---------------------------------------")
			//3.第三种方式$.parseJSON()传入的字符串必须是标准的json格式
			var JSON3 =$.parseJSON(b)
			console.debug(JSON3)

1.4对象属性的拷贝

		/*js中对象间属性的拷贝*/
			var obj1={
				name:"猪儿虫",
				age:20,
				sex:"男"
			}
			var obj2={
				age:20
			}
			/*我们可以通过先遍历对象1得到所有属性（key）*/
			console.debug(obj1)
			for(var key in obj1){
			//判断obj2中有没有这个属性 如果为false 取反则为true
			hasOwnproperty()方法判断有没有这个属性
				if(!obj2.hasOwnProperty(key)){
					obj2[key]=obj1[key]
				}
			}
			console.debug(obj2)

1.5js中this属性
this使用场景：对函数或方法所在的那个对象(函数也是对象)进行操作；
this指向的是谁？“谁调用该函数，this就代表谁”

			var a = {name:"猪儿虫"}
			function getName(){
				return this.name;
			}
			a.get= getName
			//this值当前对象
			console.debug(a.get())
			//当没有明确的对象指向时，默认window调用 结果为空字符串
			console.debug(getName())

1.6js中的prototype属性
1.6.1prototype-使您有能力向对象添加属性和方法(原类型)
Javascript中的每一个对象都有一个prototype属性(proto)，这个属性是一个引用，这个引用指向对象的原型。对象的实例由两部分组成：
对象的自定义属性部分(就是我们的构造函数中定义的属性)
对象原型部分，原型也是一个对象，指向对象类型的原型。

1.6.2同一个类中的prototype属性是共享的并且相等

1.6.3 prototype作用？
JS对象属性访问过程为：先从对象自定义区域查找属性，如果有就使用，如果没有就到对象的原型区域中进行查找，并且原型区域可被多个对象共享使用，所以我们可以往原型对象上面添加属性或方法，就相当于往对象上面添加了属性或方法。

		function User(name,age){
				this.name=name
				this.age=age
			}
			var user1 = new User("张三",18);
			var user2 = new User("李四",20);
			//可以通过dir()方法查看每个类的原型
			console.dir(user1)
			console.dir(user2)
			//结果为true,因为同一个类的原型是相同的
			console.debug(user1.prototype==user2.prototype)
			 /*在一个类中加上原型方法，它对应的所有对象都拥有了这个方法
  			  类.prototype.方法名 = function(){} */
			User.prototype.run=function(name){console.debug(name+"要跑了")}
			console.debug(user1.run(user1.name))
			console.debug(user2.run(user2.name))

1.7回调函数
1.7.1回调函数就是一个通过函数(对象)引用调用的函数;
如果你把函数的引用（地址）作为参数传递给另一个函数，当这个引用被用来调用其所指向的函数时，我们就说这是回调函数。

	function run(){
				console.debug("你好，我是回调函数")
			}		
			    setTimeout(run,2000);

1.8匿名函数
一般这种函数作为参数进行传递到某一个函数中或者是赋给其他变量。
匿名函数作用：还可以包含一段代码，然后直接调用执行,避免产生全局变量。
匿名函数三种写法：
(function(){})//推荐写法
~function(){}
+function(){}

			//可以将使用匿名函数，或者定义在匿名函数中防止作用域的污染。
			/*1.function(){}*/
			console.debug((function(){console.debug("第一种创建方式")})())
			/*2.~function(){}*/
			console.debug(~function(){console.debug("第二种创建方式")}())
			/*3.+function(){}*/
			console.debug(+function(){console.debug("第三种创建方式")}())

1.9闭包
闭包，指的是语法。函数中可以使用函数之外定义的变量。一种封装特性
闭包第一种用法:函数中可以使用函数之外定义的变量。

			/*闭包第一种用法:函数中可以使用函数之外定义的变量。*/
			var a = "猪儿虫"
			function sayName(){
				console.debug(a)
			}
			sayName();
			
			/*闭包第二种用法:通过闭包实现只读属性*/
			//实现一个计数器功能
			  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上，是一个全局变量，需要缩小作用域，我们可以使用匿名函数，
			//而且需要只读，可以使用闭包，闭包+匿名函数就可以实现计数器功能。
			(function(){
				var id=1;
				window.getId = function(){
				return id++;
				}
				})();
			console.debug(getId());
			console.debug(getId());
			console.debug(getId());
			id=1; //不再会影响计数
			console.debug(getId());
			console.debug(getId());

2.0事件委托
2.0.1jQuery注册事件的三种方法
jQuery提供了多种事件注册的方式，简化了我们开发，常见的事件注册有三种方式
$("#btn").click(function()//jQuery对象.事件名
$("#btn").bind(‘click’，function() // jQuery对象.bind unbind取消绑定
$("#btn").on(‘click’，function() // jQuery对象.on off取消绑定
2.0.2什么是事件绑定？
就是绑定事件的元素，必须是在绑定的时候已知的、存在的。
2.0.3什么是事件的委托？
对于以后出现的元素是不起作用，这个时候就需要用到事件委托
2.0.4事件委托的几种方法：
delegate：可以指定匹配的dom范围，可以替换旧版本中的live方法
on：其实源码发现，他们都是用on实现的，搞定on，就可以搞定一切，推荐使用：事件委托的格式：this.on( types, selector, data, fn );
不是事件委托，普通注册事件的on方法：普通绑定事件：on(events,[selector],[data],fn)

		$("#addFile").click(function(){
		//通过js代码添加一个标签 直接事件绑定
		$("#userForm").append("<div>附件:<input type='file' name='file' /><a href='javascript:void(0)' class='delete' '>删除</a></div>")})
				$("#userForm").on('click','a.delete',function(){	
				console.debug("1111111")			
				})

2.1jQuery中自定义插件

前端页面部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.3.js" ></script>
		<script type="text/javascript">
			//首先获得我们的json数据
			
			$(function(){
				//给每个jquery对象的原型上添加这个方法
				$.fn.getUrl=function(myJson){
					var url = myJson.url
					//获取表格
					var table = $("#dg");
					//找到所有的th标签为了找到里面的filed属性，得到属性值，这样能够避免代码写死
				var ths = table.find("tr th");
				//通过ajax请求获取数据
				$.get(url,function(data){
					//遍历得到每一个json数据
					for(var i=0;i<data.length;i++){
						var everyOne= data[i]
						//定义一个变量用于拼接标签
						var appd = "<tr>"
						//循环我们得到的th标签集合
						for(var j=0;j<ths.length;j++){
							
							//得到th标签中的属性值
						var field = $(ths[j]).attr("field")
							//获取json中的每一个数据,field不是everyOne中的属性因此要用【】得到值不能直接.field
						var value = everyOne[field]
							//得到format属性，以便对年龄，图片进行处理
						var forMat=$(ths[j]).attr("format")
						
						if(forMat){
							//forMat得到标签中的所有属性值
						appd += "<td>"+window[forMat](value)+"</td>";	
						}else{
						appd += "<td>"+value+"</td>";	
						}
						
						}
						appd += "</tr>";
						table.append(appd);	
					}					
				})					
				}
				$("#dg").getUrl({
				//这个传入的是一个匿名对象
				"url":"data.json"
				});	
			})
			//处理年龄的方法
			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 "没有头像";
				}
			}
		</script>
	</head>
	<body>
		<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>
				<th ></th>
			</tr>
		</table>
	</body>
</html>

json格式文件
[
{
“id”:1,
“username”:“admin”,
“password”:“62efb964427b82a243c4fb11c628f986”,
“tel”:“100001”,
“email”:"admin1@qq.com",
“age”:20,
“headImage”:“img/1.jpg”
},
{
“id”:2,
“username”:“admin2”,
“password”:“e9f128d79283d54b1eb25f23b1c17b5a”,
“tel”:“100002”,
“email”:"admin2@qq.com",
“age”:20,
“headImage”:“img/2.jpg”
},
{
“id”:4,
“username”:“admin4”,
“password”:“63eac0108bbcfd82f5a8ed69e7299496”,
“tel”:“100004”,
“email”:"admin4@qq.com",
“age”:50,
“headImage”:“img/3.jpg”
}
]