jQuery05.插件的使用

最新推荐文章于 2024-05-30 11:27:58 发布

也跌

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量762

点赞数 4

文章标签： javascript jquery 前端 html5

本文链接：https://blog.csdn.net/github_67177094/article/details/123643859

版权

回顾：jQuery04.事件&动画

目录

自定义插件

$.extend

$.fn.extend

第三方插件

插件名：jQuery Validation

使用步骤

使用JS方式验证

自定义插件

$.extend

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

【作用2】拓展jQuery类的方法：$.extend({方法名:function(){方法体}})

注意多个方法之间用逗号隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			var 对象1={
				'方法1': function () {
					console.log("我是对象1中的方法1")
				}
			}
			var 对象2={
				'方法2': function () {
					console.log("我是对象2中的方法2")
				}
			}
			$.extend(对象1,对象2) //让对象1继承对象2的方法
			对象1.方法2()  //打印结果为 我是对象2中的方法2
			
			//有时候jQuery功能不是我们所预期的,这时候就可以使用这个方法拓展jQuery,令其具备我们编写的东西
			$.extend($,对象2)
			$.方法2()  //打印结果为 我是对象2中的方法2
			
			//这时候我们就可以用这个方法,让jQuery具备一个可以算出数组中最大值得方法
			
			$.extend({
				max: (...is)=>{ //...is 具备多个参数,且是一个数组
					let max=-Infinity //让最大值初始为负无穷
					//在让最大值与数组中的元素进行比较如果有大于这个最大值得令其赋值给最大值
					for(let i of is){
						max = max < i ? i : max  //三元运算符
					}
					return max  //返回最大值
				}
			})
			console.log($.max(1,6,9,5,3,7,4,8,2))
		</script>
	</body>
</html>

$.fn.extend

【作用】拓展jQuery对象方法：$.fn.extend({方法名:function(){方法体}})

注意多个方法之间用逗号隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			    // 拓展的jquery对象上
			    $.fn.extend({
			        test:()=>{
			            console.log("haha")
			        }
			    })
			    // $ 是jquery
			    // $("xx") 是jquery对象
			    $("a").test()
		</script>
	</body>
</html>

第三方插件

插件名：jQuery Validation

是一款前端验证js插件，可以验证必填字段、邮件、URL、数字范围等，在表单中应用非常广泛。

注意：在引用第三方插件的时候也需要引用jQuery

使用步骤

1.下载jQuery插件验证库(jQuery.Validation.js)

前往官方网站:https://jqueryvalidation.org/

将网页翻译成中文后找到以下位置，点击下载

跳转网页后翻译此网页，在底部找到资产,点击jquery_validation.zip文件,即可下载完成

2.将库引入页面

复制下载好的文件夹，粘贴至项目中即可

3.两种方式使用验证

3.1使用HTML标签属性方式

3.2使用JS方式(推荐)

注意：表单验证插件的位置在jquery-validation文件夹下的dist文件夹内,其文件为jquery.validate.js(jquery.validate.min.js也行)

使用JS方式验证

方法：$.("表单元素").validate({rules:{字符验证规则},messages:{字符错误信息}})

错误样式：表单元素 label.error{样式}

验证规则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--表单验证插件是基于jquery的,在导入插件之前需要先导入jQuery-->
		<script src="js/jquery-3.5.1.js"></script>
		<script src="jquery-validation-1.19.0/dist/jquery.validate.js"></script>
		<!--这是设置语言的插件(中文是zh)-->
		<script src="jquery-validation-1.19.0/dist/localization/messages_zh.js"></script>
	</head>
	<body>
		<!-- 表单 -->
		<form action="" method="">
			<p><input type="text" name="username" placeholder="用户名"/></p>
			<p><input type="text" name="password" placeholder="用户密码"/></p>
			<p>
				<button type="button">登录</button>
				<button type="reset">取消</button>
			</p>
		</form>
		<script type="text/javascript">
			$("form").validate({
				rules:{
					username:{
						required:true,
						rangelength:[5,10]
					},
					password:'required'
				},
				messages:{
					username:{
						required:"用户名不能为空",
						rangelength:"用户名必须为5到10个有效字符"
					},
					password:{
						required:"密码必须填写"
					}
				}
			})
		</script>
	</body>
</html>

你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。

也跌

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery05.插件的使用

回顾：jQuery04.事件&动画目录自定义插件$.extend$.fn.extend第三方插件插件名：jQuery Validation使用步骤使用JS方式验证自定义插件$.extend【作用1】对象继承：$.extend(对象1,对象2) --->对象1继承对象2【作用2】拓展jQuery类的方法：$.extend({方法名:function(){方法体}})注意多个方法之间用逗号隔开<!DOCTYPE html&g.
复制链接

扫一扫