jQuery——插件

最新推荐文章于 2024-07-22 14:15:06 发布
最新推荐文章于 2024-07-22 14:15:06 发布
阅读量140 收藏
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l65656565/article/details/124113047
版权

                    自定义插件

   1. $.extend
            【作用1】对象继承(拷贝)：

                 $.extend(对象1，对象2)---->对象1继承对象2

案例

	<!-- 引入jQuery库 -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!-- 引入jQuery第三方表单验证插件  validata.js -->
		<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
			 * 区分java的类方法以及对象方法
			 * 	--类(静态)方法：例如DBHelper.getCon()
			 * 	public static Connection getConn(){
					Connection conn = null;
					try{
						conn = DriverManager.getConnection('jdbc:sqlserver://localhost:1433;DatabaseName=db_sb',SA,123);
					}catch(Exception e){
						
					}
					return conn;
				}
				
			 * 	--对象方法：StuDao sd = new StuDao(); sd.addStu();
			 */
 
			$(function() {
				/* 一、自定义插件 */
				// $.extend() 能够实现继承，能够扩展类方法（类似java的静态方法  直接可通过$工具调用）
				//1.1 $.extend()实现对象继承
				//案例1：两个对象的继承
				// var person = {
				// 	"name":"tangtang",
				// 	"sex":"女",
				// 	"age":19
				// };
				// console.log($.type(person));
				// var stu = {
				// 	"hobby":"吃喝玩乐"
				// };
				// console.log(person);
				// console.log(stu);
				// // 使用$.extend()来实现将stu继承person中的属性
				// $.extend(stu,person);
				// console.log(person);
				// console.log(stu);
 
				//extend(三个参数)
				// 第一个参数的对象继承后面所有参数的对象
				// var tqq = {
				// 	"love":100
				// }
				// console.log(tqq);
				// $.extend(tqq,stu,person);
				// console.log(person);
				// console.log(stu);
				// console.log(tqq);
 
				//1.2 $.extend()扩展jQuery类方法
				// 类方法===java中的静态方法  可以直接通过$.方法（）
				$.extend({
					"mydemo": function() {
						console.log("糖糖编写的类方法");
					}
				});
 
				// 调用拓展的类方法
				$.mydemo();

【作用2】扩展jQuery类方法：

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

	//案例2：求最大值(最小值)
				$.extend({
					// 实现最大值的类方法制作
					// "myMax":function(a,b){
					// 	return a>b?a:b;
					// }
					// arguments 数组容器，可以存储函数中的参数个数
					"myMax": function() {
						var max = arguments[0];
						if (arguments.length > 0) {
							for (var i = 0; i < arguments.length; i++) {
								if (arguments[i] > max) {
									max = arguments[i];
								}
							}
						} else {
							return arguments.length;
						}
						return max;
					},
					"myMin": function() {
						var min = arguments[0];
						if (arguments.length > 0) {
							for (var i = 0; i < arguments.length; i++) {
								if (arguments[i] < min) {
									min = arguments[i];
								}
							}
						} else {
							return arguments.length;
						}
						return min;
					}
 
				});
 
 
				// console.log($.myMax(60,80));
				// console.log($.myMax(20,40,80));
				// console.log($.myMin(20,30,40));
				// console.log($.myMax());
 
				//1.3 $.fn.extend()扩展jQuery对象方法
				$.fn.extend({
					"demo1": function() {
						console.log("这是我拓展的某个对象的方法");
					}
				});
 
				$("#obtn1").click(function() {
					// $(this).demo1();
					$.fn.demo1();
				});
				//1.3 $.fn.extend()扩展jQuery对象方法
				$.fn.extend({
					"demo1": function() {
						console.log("这是我拓展的某个对象的方法");
					}
				});
 
				$("#obtn1").click(function() {
					// $(this).demo1();
					$.fn.demo1();
				});
 
 
 
 
 
				//案例3：实现全选效果
				// 通过$.fn.extend()扩展一个对象方法（作用：实现全选）
				$.fn.extend({
					"mycheck": function() {
						// console.log($(this));
						$(this).each(function() {
							// console.log($(this).val());
							// 调用prop属性设置选中
							$(this).prop("checked", true);
						});
					},
					"unmycheck": function() {
						$(this).each(function() {
							// console.log($(this).val());
							// 调用prop属性设置选中
							$(this).prop("checked", false);
						});
					}
				});
 
				//为全选按钮设置一个点击事件并调用对象方法
				$("#qx").click(function() {
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").mycheck();
				});
				// 取消全选
				$("#unqx").click(function() {
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").unmycheck();
				});

第三方插件

 表单验证
            插件名：jQuery Validation
            使用步骤
                【1】.下载jQuery插件验证库
                                    jquery.validate.js
                【2】.将类库引入页面
                【3】.两种方式使用验证
                             HTML标签属性方式
                             JS方式【推荐】
  JS方式
         验证及错误信息
                            $("表单元素").validate({
                                 rules:{
                                  字段验证规则
                                 }，
                               messages:{
                                  字段错误信息
                                }
                                   })
        错误样式
                      表格元素  label.error{
                                    样式
                                 }
                     
   验证规则说明  

	/* 二、第三方插件:表单验证插件 */
				//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
			})
		</script>
 
		<!-- 第三方插件（表单验证） -->
		<script type="text/javascript">
			$(document).ready(function() {
				// 获取表单标签调用设置插件的方法
				$("#myForm").validate({
					// 规则rules
					rules: {
						// 账号username
						username: {
							required: true
						},
						// 验证邮箱规则
						myeamil: {
							required: true,
							email: true
						}
					},
					// 自定义错误信息messages
					messages: {
						// 账户的错误信息提示
						username: {
							required: "用户名不能为空哦~~~"
						},
						myeamil: {
							required: "邮箱不能为空~~~",
							email: "邮箱的格式不满足要求哦~~~"
						}
					}
				});
			})
		</script>

完整代码如下


				/* 二、第三方插件:表单验证插件 */
				//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
			})
		</script>
 
		<!-- 第三方插件（表单验证） -->
		<script type="text/javascript">
			$(document).ready(function() {
				// 获取表单标签调用设置插件的方法
				$("#myForm").validate({
					// 规则rules
					rules: {
						// 账号username
						username: {
							required: true
						},
						// 验证邮箱规则
						myeamil: {
							required: true,
							email: true
						}
					},
					// 自定义错误信息messages
					messages: {
						// 账户的错误信息提示
						username: {
							required: "用户名不能为空哦~~~"
						},
						myeamil: {
							required: "邮箱不能为空~~~",
							email: "邮箱的格式不满足要求哦~~~"
						}
					}
				});
			})
		</script>
完整代码如下
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#myForm .error {
				color: plum;
				font-size: 12px;
				/* margin-left: 10px; */
			}
		</style>
		<!-- 引入jQuery库 -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!-- 引入jQuery第三方表单验证插件  validata.js -->
		<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
			 * 区分java的类方法以及对象方法
			 * 	--类(静态)方法：例如DBHelper.getCon()
			 * 	public static Connection getConn(){
					Connection conn = null;
					try{
						conn = DriverManager.getConnection('jdbc:sqlserver://localhost:1433;DatabaseName=db_sb',SA,123);
					}catch(Exception e){
						
					}
					return conn;
				}
				
			 * 	--对象方法：StuDao sd = new StuDao(); sd.addStu();
			 */
 
			$(function() {
				/* 一、自定义插件 */
				// $.extend() 能够实现继承，能够扩展类方法（类似java的静态方法  直接可通过$工具调用）
				//1.1 $.extend()实现对象继承
				//案例1：两个对象的继承
				// var person = {
				// 	"name":"tangtang",
				// 	"sex":"女",
				// 	"age":19
				// };
				// console.log($.type(person));
				// var stu = {
				// 	"hobby":"吃喝玩乐"
				// };
				// console.log(person);
				// console.log(stu);
				// // 使用$.extend()来实现将stu继承person中的属性
				// $.extend(stu,person);
				// console.log(person);
				// console.log(stu);
 
				//extend(三个参数)
				// 第一个参数的对象继承后面所有参数的对象
				// var tqq = {
				// 	"love":100
				// }
				// console.log(tqq);
				// $.extend(tqq,stu,person);
				// console.log(person);
				// console.log(stu);
				// console.log(tqq);
 
				//1.2 $.extend()扩展jQuery类方法
				// 类方法===java中的静态方法  可以直接通过$.方法（）
				$.extend({
					"mydemo": function() {
						console.log("糖糖编写的类方法");
					}
				});
 
				// 调用拓展的类方法
				$.mydemo();
				//案例2：求最大值(最小值)
				$.extend({
					// 实现最大值的类方法制作
					// "myMax":function(a,b){
					// 	return a>b?a:b;
					// }
					// arguments 数组容器，可以存储函数中的参数个数
					"myMax": function() {
						var max = arguments[0];
						if (arguments.length > 0) {
							for (var i = 0; i < arguments.length; i++) {
								if (arguments[i] > max) {
									max = arguments[i];
								}
							}
						} else {
							return arguments.length;
						}
						return max;
					},
					"myMin": function() {
						var min = arguments[0];
						if (arguments.length > 0) {
							for (var i = 0; i < arguments.length; i++) {
								if (arguments[i] < min) {
									min = arguments[i];
								}
							}
						} else {
							return arguments.length;
						}
						return min;
					}
 
				});
 
 
				// console.log($.myMax(60,80));
				// console.log($.myMax(20,40,80));
				// console.log($.myMin(20,30,40));
				// console.log($.myMax());
 
				//1.3 $.fn.extend()扩展jQuery对象方法
				$.fn.extend({
					"demo1": function() {
						console.log("这是我拓展的某个对象的方法");
					}
				});
 
				$("#obtn1").click(function() {
					// $(this).demo1();
					$.fn.demo1();
				});
 
 
 
 
 
				//案例3：实现全选效果
				// 通过$.fn.extend()扩展一个对象方法（作用：实现全选）
				$.fn.extend({
					"mycheck": function() {
						// console.log($(this));
						$(this).each(function() {
							// console.log($(this).val());
							// 调用prop属性设置选中
							$(this).prop("checked", true);
						});
					},
					"unmycheck": function() {
						$(this).each(function() {
							// console.log($(this).val());
							// 调用prop属性设置选中
							$(this).prop("checked", false);
						});
					}
				});
 
				//为全选按钮设置一个点击事件并调用对象方法
				$("#qx").click(function() {
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").mycheck();
				});
				// 取消全选
				$("#unqx").click(function() {
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").unmycheck();
				});
 
 
				/* 二、第三方插件:表单验证插件 */
				//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
			})
		</script>
 
		<!-- 第三方插件（表单验证） -->
		<script type="text/javascript">
			$(document).ready(function() {
				// 获取表单标签调用设置插件的方法
				$("#myForm").validate({
					// 规则rules
					rules: {
						// 账号username
						username: {
							required: true
						},
						// 验证邮箱规则
						myeamil: {
							required: true,
							email: true
						}
					},
					// 自定义错误信息messages
					messages: {
						// 账户的错误信息提示
						username: {
							required: "用户名不能为空哦~~~"
						},
						myeamil: {
							required: "邮箱不能为空~~~",
							email: "邮箱的格式不满足要求哦~~~"
						}
					}
				});
			})
		</script>
 
 
	</head>
	<body>
		<h2>
			案例3:自定义插件实现全选功能
		</h2>
		<button id="obtn1">演示</button>
		<hr>
		<button id="qx">全选</button>
		<button id="unqx">取消全选</button>
		<br>
		<input type="checkbox" value="aa">傻逼
		<input type="checkbox" value="bb">傻儿
		<input type="checkbox" value="cc">傻子
		<input type="checkbox" value="dd">傻傻
		<input type="checkbox" value="ee">莎莎
		<h2 align="center">
			案例4:使用jQuery validation插件完成表单验证
		</h2>
 
		<form action="" method="get" id="myForm">
			账号: <input type="text" autocomplete="off" id="username" name="username">
			<br>
			邮箱： <input type="email" id="myeamil" name="myeamil">
			<br>
			密码: <input type="password">
			<br>
 
			<input type="submit" value="注册" />
		</form>
 
 
 
	</body>
</html>

思维导图小结

凡哈哈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery插件,jQuery插件
03-09
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery插件——多级菜单
12-12
在这个“jquery插件——多级菜单”项目中，我们可能看到以下关键技术点： 1. **CSS样式和布局**：多级菜单的呈现通常依赖于CSS来实现层次感。通过设置适当的`display`属性（如`none`和`block`），我们可以控制菜单...
jQuery05（插件）
m0_67777597的博客
03-14 988
区分java的类方法以及对象方法 --类(静态)方法：例如DBHelper.getCon() public static Connection getConn(){ Connection conn = null; try{ conn = DriverManager.getConnection('jdbc:sqlserver://localhost:1433;DatabaseName=db_sb',SA,123); }catch(Exception e){
jQuery常用插件介绍
ykizz的博客
07-10 9599
    最新最全的插件可以从jQuery官方网站的插件板块中获取，网站地址http://plugins.jquery.com/ 。 1、jQuery表单验证插件：Validation （1）Validation简介     最常使用JavScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件——Validation.Validat...
jQuery插件
qq_34283987的博客
09-22 391
一、validation插件表单验证： 使用方式：①引入jQuery库和validation插件 ②确定那个表单需要验证，$(“#表单域id”).validate() ③给表单域设置验证规则。 class=”required” 为必须填写，minlength=”2”为最小长度为2，class=”required email” 必填且符合email格式，class=”url” 为 url格式验
图片文件上传回显jQuery插件——插件四
04-24
"图片文件上传回显jQuery插件——插件四"正是针对这一需求设计的工具，它简化了开发者实现这一功能的复杂度，使得图片预览和上传变得更加便捷。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、...
常用的jquery模板插件——jQuery Boilerplate介绍
10-25
Query Boilerplate是一个不错的jQuery插件开发工具，使用这个工具可以帮助你快速的构建一个jQuery框架。这个工具提供你很多评论用以帮助你使得开发变得简单和直接，它是个真正的面对对象的工具，你可以实现公开或者...
初探jquery——表单应用范例
01-19
先来共享几个jquery的资源站Plugins – jQuery JavaScript Library（这里有不少的jquery插件）http://jquery.com/这儿就是jquery的老家了Visual jQuery 1.0 (Automated)jquery的说明文档15 Days Of jQuery...
jquery流程插件
10-30
今天我们将深入探讨一个特别的jQuery扩展——"jQuery流程插件"，它旨在帮助开发者更高效地管理网页中的业务流程，实现交互式的工作流控制。 一、jQuery流程插件的概述 jQuery流程插件是基于jQuery框架构建的一种...
jquery-3.3.1
01-12
最新的jquery文档.jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery插件库
01-29
jQuery插件库jQuery插件库jQuery插件库jQuery插件库jQuery插件库
Jquery插件大全
weixin_34162228的博客
02-21 470
2019独角兽企业重金招聘Python工程师标准>>> ...
JDBC java数据库连接
m0_58785149的博客
04-14 826
package JDBC; import java.sql.*; import java.util.ArrayList; import java.util.List; public class JDBCDemo01 { public List<Emp> findAll() throws SQLException { ResultSet r = null; Statement s ...
一个JdbcUtils的类详解及原理备忘
Anakki的博客
09-08 346
 一.静态代码块中的代码 1.声明Properties用于读取配置文件 2.使用加载JdbcUtil的类加载器去加载配置文件jdbc.properties，节约加载文件所耗费的资源。  （getResourceAsStream只能用于  需加载的配置文件 与被加载的类处于同一src下的文件） 3.Properties读取配置文件 4.通过键值对的键获取值（值为数据库驱动的类加载路径），从...
12. Hibernate 模板设计模式
最新发布
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
07-22 587
如何运用模板设计模式重构 Hibernate 操作流程；持久化对象与序列化接口；OOP中有一个编码原则 ：写仅写一次。翻译过来就是，不要重复，要重用。答案是：使用模板设计模式进一步封装Hibernate的操作。在真实项目中，Hibernate仅仅只是完成项目中的一部分工作，需要和其它，如Spring等框架联合工作，一起承担整体项目的开发。Spring框架中就提供的有Hibernate模板对象。一个常规的、频繁的操作代码中，大部分代码不需要变动，只有小部分代码需要根据需求变动。
jQuery插件之——简单日历
05-23
在这里，我将向你介绍如何使用jQuery创建一个简单的日历插件。 首先，我们需要在HTML文件中引入jQuery库和我们自己的脚本文件： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值