jQuery05

「已注销」

于 2022-03-26 11:47:25 发布

阅读量988

点赞数 2

文章标签： jquery

本文链接：https://blog.csdn.net/qq_64164870/article/details/123752906

版权

插件

1.自定义插件

$.extend

作用：对象继承：$extend(对象1,对象2)----->对象1继承对象2

$.extend({方法名:function(){方法体}}) //注意多个之间用逗号隔开

$.fn.extend

$.fn.extend({方法名:function(){方法体}}) //注意多个之间用逗号隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			let 小明={
				"写作业":function (){
					console.log("正在写作业~~~~~")
				}
			}
			
			let 小美={
				"唱歌":function (){
					console.log("正在唱歌~~~~~")
				}
			}
			
			//小明.写作业()
			//小美.唱歌()
			
			$.extend(小明,小美)
			
			小明.写作业()//本身自带
			小明.唱歌()//从小美哪里继承来的
			
			//具备一个可以算出多个数字的最大值的方法
			
			$.extend({
				max:(...is)=>{
					//...is 具备多个参数，且是一个数组
					//[1,2,3,4,5,6,7,8,9]
					
					//let max=is[O]
					let max=-Infinity
					//打擂台
					for(let i of is){
						max=max<i?i:max
					}
					return max
				}
			})
			console.log($.max(1,2,3,4,5,6,7,8,9))
			
			
			$.fn.extend({
				test:()=>{
					console.log("hahahaha")
				}
			})
			//$ 是jQuery
			//$("xx") 是jQuery对象
			
			$("a").test()
		</script>
	</body>
</html>

第三方插件——表单验证

插件明:jQuery Validation

使用步骤

1.下载jQuery插件验证库——jquery.validation.js

2.将类库引入页面

3.两种方式使用验证

html标签属性方式

js方式

jQueryvalidation的一些规则

实现必填提示和长度5-10

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		label.error{
			color: red;		}
		</style>
	</head>
	<body>
		<!--表单验证插件是基于jquery的 再导入插件之前需要先导入jQuery-->
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/jquery-validation-1.19.0/dist/jquery.validate.js"></script>	
		<script src="js/jquery-validation-1.19.0/dist/localization/messages_zh.js"></script>
		
		<form action="">
			<p>
				<input type="text" name="username" placeholder="用户名">
			</p>
			<p>
				<input type="text" name="userword" placeholder="用户密码">
			</p>
			<p>
				<button>登入</button>
				<button type="reset">取消</button>
			</p>
			
		</form>
		<script>
	    //表单验证
			$("form").validate({
				rules:{
					username:{
					required:true,
					rangelength:[5,10]
					},
					userword:"required"
				}
			})
		</script>
	</body>
</html>

「已注销」

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery05

插件1.自定义插件$.extend作用：对象继承：$extend(对象1,对象2)----->对象1继承对象2$.extend({方法名:function(){方法体}}) //注意多个之间用逗号隔开$.fn.extend$.fn.extend({方法名:function(){方法体}}) //注意多个之间用逗号隔开<!DOCTYPE html><html> <head> <meta charset="utf-8"&..
复制链接

扫一扫