【JQuery】day03

时间：2016-10-31 作者： thtomatic 分类： JavaScript 评论: [ 0 ] 条浏览: [ 1132 ] 次

(演示代码为注册表单）

四、工具函数

$.grep(array,function(value,key))

功能：数组的元素进行过滤

参数：array要进行过滤的数组

value：数组的元素

key:数组的下标

返回：过滤后的数组

演示：

<html>
<head>
<title></title>
<script src="1.js"></script>
<script>
//$.grep()
var arr=[34,20,3,5,8];
var result=$.grep(arr,function(value,key){
if(value>10$$key>0){
return value;
}
				});
alert(result);

</script>
</head>
<body>
</body>
</html>

$.map(array,function(value,key))

功能：数组的元素进行过滤和计算

参数：array要进行过滤的数组

value：数组的元素

key:数组的下标

返回：过滤或计算后的数组

演示：

<html>
<head>
<title></title>
<script src="1.js"></script>
<script>
//$.map()
var arr=[34,20,5,8];
var result=$.map(arr,function(value,key){
	if(value>10&&key>0){
		return value*10;
	}
})
alert(result)
</script>
</head>
<body>
</body>
</html>

$.isArray

演示：

<html>
<head>
<title></title>
<script src="1.js"></script>
<script>
$(function(){
var arr=[1,2,3];
if($.isArray(arr)){
	alert("yes")
}else{
	alert("no")
}
})
</script>
</head>
<body>
</body>
</html>

$.isNumeric

$.isFunction

功能：对变量、类型进行判断

返回：布尔

习题：

给变量

hosts=["163.com","qq.com","sina.com"]

判断变量的类型，如果是数组，则输出“yes”否则输出“no”

答案：

<html>
<head>
<title></title>
<script src="1.js"></script>
<script>
$(function(){
var hosts=["163.com","qq.com","sina.com"]
if($.isArray(hosts)){
	alert("yes")
}else{
	alert("no")
}
})
</script>
</head>
<body>
</body>
</html>

$.type(变量)

功能：返回变量的类型

参数：要进行判断的变量

返回：判断的类型

五、特殊的选择器this

当前发生事件的选择器

六、插件

插件应用步骤

1.获取插件

2.引入插件

注意：先引入JQery库，再引入插件

3.插件的应用（参考说明文档/查看插件代码）

4.引入插件汉化包或者样式

前端验证和后端验证的区别

前端验证

1.优化用户体验

2.减轻服务器负载

后端验证

1.安全

自定义插件

1.插件文件名称

jquer.插件名称.js

2.$.extend([$.fn],{

"插件名称":function(){

//插件处理程序}

})

3.插件文件中不能出现$符号

$===jquery

以下为全部代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JQuery 插件的应用 UI插件</title>
<!-- 引入JQuery 库 -->
<script src="jquery-1.8.0.js"></script>
<script src="./validate/jquery-ui-1.10.3.custom.js" ></script>
<link rel="stylesheet" href="./validate/smoothness/jquery-ui-1.10.3.custom.css" />
<script>
$(function(){
	//应用对话框插件
	//当点击p标签，注册对话框出现
	$("p").click(function(){
		$("#reg").dialog({
			"width":400,
			"title":"用户注册",
			"buttons":{
				"注册":function(){
					//针对按钮执行的程序
					$("#reg").submit();
				}
			}			
		});
		
		//邮箱自动补全
		//var complete = ["a","aa","bb","bbb"];
		$("#email").autocomplete({
			//"source":complete
			"source":function(request,response){
				//request.term 用户输入的内容
				//备选邮箱数组
				var hosts = ["163.com","126.com","qq.com","189.com","sina.com"];
				//用户输入的内容
				var term = request.term;
				//若用户没有输入@
				var name = term; //用户输入的内容 tom
				var host; //用户输入的邮箱域名
				var result; //response(result)
				var ix = term.indexOf("@");//@在用户输入内容中存在的位置 
				
				//若用户输入了@
				if(ix>-1){
					//说明用户输入了@
					name = term.slice(0,ix); //tom
					host = term.slice(ix+1);
				}
				
				//过滤用户输入的host，拿用户输入的host与hosts下的
				 //每一个元素进行比较
				//定义变量用于保存过滤后的数组 
				var findHosts;
				if(host){
					//若用户输入了host才进行过滤
					findHosts=$.grep(hosts,function(value,key){
						             if(value.indexOf(host)>-1){
						            	 return value;
						             }
					});
				}else{
					//若用户没有输入host，则整个hosts作为提示
					findHosts=hosts;
				}
			result=$.map(findHosts,function(value,key){
					return name+"@"+value;
				});


				response(result);
				
			}
		});
		
	});
});
</script>
</head>


<body>
<p>注册</p>
<form action="regist.php" method="post" id="reg" style="display:none;">
用户名：<input type="text" name="username" class="required"/><br/><br/>
密码：<input type="password" name="password"/><br/><br/>
邮箱：<input type="text" name="email" class="required email" id="email"/><br/><br/>
出生日期：<input type="text" name="birthday"/><br/><br/>
<!--  <input type="submit" value="注册" />-->
</form>
</body>
</html>

上一篇：【Smarty】Day01
下一篇：【JQuery】day02

发表评论：

23.60ms