jQuery_05 插件机制

最新推荐文章于 2023-03-02 17:59:45 发布
最新推荐文章于 2023-03-02 17:59:45 发布
阅读量1.2k 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64692712/article/details/123722961
版权

本课代码 原码(自定义插件和第三方插件)

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>jQuery_05插件机制</title>
	<!-- 引入jQuery库 -->
	<!-- 课前回顾 
		1.事件加载DOM两种方式(顺序+个数)
		绑定事件的两种方式
			元素.事件名(回调函数)
			元素.on/bind(事件名,回调函数) 跟版本有关系
		解绑事件的两种方式 off/unbind
		事件的传播 从小到大传播 return false
		事件的坐标:pageX pageY
		合成事件:hover/toggle  toggle跟版本相关1.7+版本动画效果
		一次事件:one 

		2.动画效果
		自带动画:
				基本动画:show() hide() toggle()
				滑动动画:slideDown()	 slideUp()	slideToggle() 
				淡入淡出动画:fadeIn() fadeOut() fadeToggle()
		自定义动画:
				元素.animate({
					宽高top left "10xp" "+=5"
				},time)
			-->
			<style type="text/css">
					#myForm label.error{
						color: red;
						font-size: 14px;
					}
			</style>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script src="js/jquery.validate.js" type="text/javascript"></script>
	<!-- 引入jQuery表单验证类库 -->
	<script type="text/javascript">
		
		/* jQuery第五次课☞插件 */
		/*
		 * 区分java的类方法以及对象方法
		 * 	--类(静态)方法：例如DBHelper.getCon()
		 * 	--对象方法：StuDao sd = new StuDao(); sd.addStu();
		 */

		$(function () {
			/* 一、自定义插件 */
			//1.1 $.extend()实现对象继承
			//案例1：两个对象的继承
			// var s1={};
			// var s2={"name":"史华志"};
			// console.info("继承前: "+s1.name);
			// console.info("继承前: "+s2.name);
			// //开始继承
			// $.extend(s1,s2);//s1继承s2
			// console.info("继承后: "+s1.name);
			// console.info("继承后: "+s2.name);

			//1.2 $.extend()扩展jQuery类方法
			//案例2：求最大值(最小值)
			// $.extend({
			// 	abcd:function(){
			// 		alert(1234);
			// 	},
			// 	getMax:function(a,b){
			// 		return a>b?a:b;
			// 	},
			// 	getMin:function(a,b){
			// 		return a<b?a:b;
			// 	}
			// })
			// // $.abcd();
			// // var a=$.getMax(10,40);
			// // console.info(a);	

			// console.info($.getMin(10,30));

			//用全选框实现全选功能
			//1.3 $.fn.extend()扩展jQuery对象方法
			// $.fn.extend({
			// 	xx:function(){
			// 		$(this).each(function(i,ck){//下标，ck值每一个复选框
			// 			ck.checked=true;
			// 		})
			// 	},
			// 	yy:function(){
			// 		$(this).each(function(i,ck){//下标，ck值每一个复选框
			// 			ck.checked=false;
			// 		})
			// 	}
			// })
			//案例3：实现全选效果
			//用按钮实现
			// $("#ok").click(function(){
			// 	$(".aaa").xx();
			// })
			// $("#nook").click(function(){
			// 	$(".aaa").yy();
			// })
			//用复选框实现
			// $("#qx").click(function(){
			// 	//判断全选框是否选中
			// 	// console.info($(this).prop("checked"));
			// 	// if($(this).prop("checked")){//选中了
			// 	if($(this).is(":checked")){//is 也可以
			// 		$(".aaa").xx();//让其他复选框也选中
			// 	}else{
			// 		$(".aaa").yy();
			// 	}
			// })
			// //给其他复选框增加点击是事件
			// $(".aaa").click(function(){
			// 	var f=true;//假设全选是选中的
			// 	$(".aaa").each(function(i,ck){
			// 		if(ck.checked==false){//有任何一个复选框没有被选中
			// 			f=false;
			// 		}
			// 	})
			// 	$("#qx").prop("checked",f);//改变全选功能
			// })

			/* 二、第三方插件:表单验证插件 */
			//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
			$("#myForm").validate({
				rules: {
					//表单字段规则
					uname: {
						required: true,
						rangelength: [6,10]
					},
					upwd1:"required",
					upwd2:{
						required:true,
						equalTo:"#upwd1"
					},
					uemail:{
						required:true,
						email:true
					},
					uage:{
						required:true,
						range:[1,150]
					},
					uurl:{
						required:true,
						url:true
					}
				},
				messages: {
					//错误信息提示
					uname: {
						required: "用户名必填",
						rangelength: "用户名长度必须在6-10之间"
					},
				}

			})
		})
	</script>
</head>

<body>
	<h2>案例3:自定义插件实现全选功能</h2>
	<input type="button" value="全选" id="ok">
	<input type="button" value="取消全选" id="nook">
	<input type="checkbox" id="qx">全选
	<input type="checkbox" value="看美女" class="aaa">看美女
	<input type="checkbox" value="上网课" class="aaa">上网课
	<input type="checkbox" value="打王者" class="aaa">打王者
	<h2>案例4:使用jQuery validation插件完成表单验证</h2>
	<form id="myForm">
		用户名:<input type="text" name="uname" /><br />
		密码:<input type="text" name="upwd1" id="upwd1"/><br />
		确认密码:<input type="text" name="upwd2" /><br />
		邮箱:<input type="text" name="uemail" /><br />
		年龄:<input type="text" name="uage" /><br />
		网址:<input type="text" name="uurl" /><br />
		<input type="submit" value="提交">
	</form>
</body>

</html>

区分java的类方法以及对象方法

类（静态）方法：列如DBHelper.getCon()

对象方法：StuDao sd = new StuDao(); sd.addStu();

 一、自定义插件

1.1 $.extend()实现对象继承

            // var s1={};
			// var s2={"name":"张三"};
            // //开始继承
			// $.extend(s1,s2);//s1继承s2
			// console.info("继承后: "+s1.name);
			// console.info("继承后: "+s2.name);

1.2 $.extend()扩展JQuery类方法

案例2:求最大值(最小值) 

            // $.extend({
			// 	getMax:function(a,b){//扩展一个求最大值的方法
			// 		return a>b?a:b;
			// 	},
			// 	getMin:function(a,b){//扩展一个求最小值的方法
			// 		return a<b?a:b;
			// 	}
			// })
            // // var a=$.getMax(10,40);//接收值
			// // console.info(a);	//打印值

			// console.info($.getMin(10,30));//直接打印

 //用全选框实现全选功能

            //1.3 $.fn.extend()扩展jQuery对象方法
			// $.fn.extend({
			// 	xx:function(){
			// 		$(this).each(function(i,ck){//下标，ck值每一个复选框
			// 			ck.checked=true;
			// 		})
			// 	},
			// 	yy:function(){
			// 		$(this).each(function(i,ck){//下标，ck值每一个复选框
			// 			ck.checked=false;
			// 		})
			// 	}
			// })

//案例3：实现全选效果

  //用按钮实现

            // $("#ok").click(function(){
			// 	$(".aaa").xx();
			// })
			// $("#nook").click(function(){
			// 	$(".aaa").yy();
			// })
			//用复选框实现
			// $("#qx").click(function(){
			// 	//判断全选框是否选中
			// 	// console.info($(this).prop("checked"));
			// 	// if($(this).prop("checked")){//选中了
			// 	if($(this).is(":checked")){//is 也可以
			// 		$(".aaa").xx();//让其他复选框也选中
			// 	}else{
			// 		$(".aaa").yy();
			// 	}
			// })
			// //给其他复选框增加点击是事件
			// $(".aaa").click(function(){
			// 	var f=true;//假设全选是选中的
			// 	$(".aaa").each(function(i,ck){
			// 		if(ck.checked==false){//有任何一个复选框没有被选中
			// 			f=false;
			// 		}
			// 	})
			// 	$("#qx").prop("checked",f);//改变全选功能
			// })

/* 二、第三方插件:表单验证插件 */

 //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)

 

$("#myForm").validate({
				rules: {
					//表单字段规则
					uname: {
						required: true,
						rangelength: [6,10]
					},
					upwd1:"required",
					upwd2:{
						required:true,
						equalTo:"#upwd1"
					},
					uemail:{
						required:true,
						email:true
					},
					uage:{
						required:true,
						range:[1,150]
					},
					uurl:{
						required:true,
						url:true
					}
				},
				messages: {
					//错误信息提示
					uname: {
						required: "用户名必填",
						rangelength: "用户名长度必须在6-10之间"
					},
				}

			})

效果

 

weixin_64692712
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery两种插件机制
深海潜蛟的博客
07-31 160
1、jQuery.extend(object)：扩展jQuery对象本身，主要是用来扩展jQuery全局函数 ，调用时直接$.函数名(参数) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/jscript" src="js/jquery-1.8.3.js"></script&
Jquery_PageViewJS翻页插件
04-28
这种灵活的机制使得插件能够适应各种复杂的业务需求。 **4. 翻页效果** PageViewJS提供了多种翻页效果，比如淡入淡出、滑动等，这些效果可以增强用户的交互体验，使页面看起来更加动态和生动。同时，插件允许...
烟花特效Html
热门推荐
大宽的博客
03-02 5万+
【代码】烟花特效Html。
jQuery5插件
qq_66450046的博客
03-23 1245
jQuery5插件 1.自定义插件 ①$.extend （作用1：对象继承，$.extend(对象1，对象2) 对象1继承对象2） （作用2：扩展jQuery类方法，$.extend({方法名：function(){方法体}})要注意多个方法之间用逗号隔开） ②$.fn.extend （作用：扩展jQuery对象方法，$.fn.extend({方法名：function(){方法体}})要注意多个方法之间用逗号隔开） 2.第三方插件(表单验证) ①插件名：jQuery Validation ②使用步骤.
jQuery中插件机制总结
IT_Helianthus的博客
05-31 468
为了扩展jQuery库函数，jQuery提供了两种方式： 1、jQuery.extend(object)：扩展jQuery对象本身，主要是用来扩展jQuery全局函数 ，调用时直接$.函数名(参数)。 示例如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title...
jQuery 插件机制
Q_GQ_COM的博客
09-06 264
简介：利用jquery提供的$.fn.extend()和$.extend(),方法，扩展 $.extend(),扩展jquery的类方法 作用：1.合并对象 var a = {sid:12};  var b = {"name":"ls"};//后面加到前面，属性相同的后面覆盖前面的属性  console.log($.extend(a,b)); 2.扩展jquery类方法 var meth...
013，Jquery插件机制
V哥教育，java技术博客
05-05 98
Jquery插件机制 V哥教育QQ群：673215016 官网：http://www.vgxit.com 1，概述 Jquery的插件机制可以让我们开发人员自己增强jquery的功能。实现方式有如下两种： 1，$.fn.extend(object)：这个方式可以增强通过jquery获取到的对象的功能，比如我们通过$("#id")获取到的对象。 2，$.extend(object)：增强Jquery对象自身的功能，就是增强$的功能。 2，扩展对象功能 <!DOCTYPE html&gt
JQuery自定义插件机制
林高禄
08-07 5662
JQuery除了可以通过$调用自身带有的插件方法之外，还可以自定义插件方法 $.fn.extend(object)：增强通过JQuery获取的对象的功能 $.extend(object)：增强JQuery对象自身的功能 $.fn.extend(object)：增强通过JQuery获取的对象的功能 $.extend(object)：增强JQuery对象自身的功能 语法 $.extend( { 自定义方法名1：functio...
JQuery插件机制
u010989191的博客
05-03 2788
前言在实际的项目开发中，很多时候会用一些特殊的处理手段，很多时候会在现有jQuery的基础上进行扩展一些方法或者制作一些插件。下面介绍如何利用jQuery扩展新的方法及如何使用。帮助文档API介绍jQuery.fn.extend(object)jQuery.extend(object)实例演示扩展jQuery对象主要是用到了上面的两种方法，查看相关的帮助文档也可以了解到。下面以实际操作演示如何使用这
jquery 动态加载js插件
红尘炼炼心的博客
08-26 618
在H5页面直接加载插件，有时可能在js使用到时没有记载完成，如果不进行二次加载及判断，程序可能就此卡壳，无法继续运行。通过jquery动态多次判断加载，保证插件的完整加载及使用。
JQuery Ajax 分页插件 jquery_paginator
03-19
**jQuery Ajax 分页插件 jquery_paginator 知识点详解** 在Web开发中，当页面数据量过大时，为了提高...通过深入理解jQuery和Ajax原理，结合插件的配置和事件机制，开发者可以轻松地将分页功能集成到任何Web项目中。
使用_jQuery（中级）_第_1_部分_使用插件创建和扩展_jQuery_函数.doc
01-08
这篇文档，"使用jQuery（中级）第1部分：使用插件创建和扩展jQuery函数"，深入探讨了jQuery插件的开发和应用，揭示了jQuery如何通过插件机制让Web应用的功能无限扩展。 jQuery插件的出现，源于库本身的设计理念，即...
jquery_plug插件
08-26
**jQuery Plug插件详解** jQuery Plug是一款基于JavaScript库jQuery的扩展插件，它为开发者提供了更丰富的功能和更便捷的编程体验。这款插件尤其适用于那些希望增强网页交互性、优化用户界面的开发者。在本篇文章中...
jQuery(PDF).rar_jquery_jquery pdf
09-21
此外，教程可能还会涵盖jQuery插件的使用，因为jQuery拥有庞大的生态系统，众多高质量的插件可以满足各种特定需求，如表单验证、轮播图、日期选择器等。学习如何选择和集成这些插件，可以极大地扩展jQuery的功能。 ...
浙江海洋大学考研8个学院，42个专业课历年考试真题及答案汇总，备考资料题库笔记，考前题库汇总.pdf
07-16
浙江海洋大学考研8个学院，42个专业课历年考试真题及答案汇总，备考资料题库笔记，考前题库汇总.pdf
传感器实验指导书.docx
07-16
传感器
海康相机使用IO触发模式并输出NG/OK
最新发布
07-16
1、包含海康工业相机接线图 2、MVS中的相机设置 3、vm4.2中的设置 4、VM简单创建程序步骤
传感器复习--习题.doc
07-16
传感器
jquery插件内部方法
05-09
jQuery插件不仅提供了各种丰富的功能，还提供了各种机制来使其更加灵活和可定制。其中之一就是插件内部方法。 插件内部方法是插件作者在插件编写过程中加入的私有方法，这些方法一般只能被插件内部的方法所调用，而...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值