jQuery_插件

最新推荐文章于 2024-09-02 17:27:54 发布
最新推荐文章于 2024-09-02 17:27:54 发布
阅读量49 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67188520/article/details/124366201
版权

jQuery_插件

一、自定义插件

【作用1】对象继承：
$.extend(对象1，对象2)---->对象1继承对象2。可以理解成：对象2中的数据给了对象1，后面的对象数据给了前面对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自定义插件的两种方式</title>
	</head>
	<script type="text/javascript"src="js/jquery-3.3.1.js">	</script>
	<!-- <script type="text/javascript"src="js/jquery-1.7.2.js">	</script> -->
	<script type="text/javascript"src="js/check.js"></script>
	<body>
		<table border="1px" width="500px">
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
		</table>
		<center>
			<button class="selectAll">全选</button>
			<button class="unselectAll">取消全选</button>
		</center>
	</body>
	<script type="text/javascript">
		$(function(){
			// var sa = {"name":"害嗨嗨"};

			// var sb = {"name":"赵杰","sex":"女"};

			// var sc = {}

			// $.extend(sa,sc,sb);

			// console.info("sa:"+sa.name+"_"+sa.sex)

			// console.info("sb:"+sb.name+"_"+sb.sex)


			// console.info("sc:"+sc.name+"_"+sc.sex)

			//自定义方法

              // $.extend({demo:function(){console.info("demo1测试")},demo2:function(){console.info("demo2测试")}});
			 // $.demo();
			 // $.demo2();
			 // $.extend({min:function(a,b){return a>b?a:b},max:function(c,d){return c<d?c:d}})
			 // console.info($.min(3,4));
			 // console.info($.max(3,4));
			 $('.selectAll').click(function(){$('.checkbox').selectAll()})
			 $(".unselectAll").click(function(){$(".checkbox").unselectAll()})
			 
		})
		
	</script>
</html>

二、表单插件

2.1表单验证

  1. 下载jQuery插件验证库jquery.validate.js
  2. 引入页面
  3. 两种方式使用验证
  4. HTML标签属性方式
  5. JS方式
  6. 验证及错误信息
$("表单元素").validate({
    rules:{
     字段验证规则
    }，
    messages:{
    字段错误信息
   }
})
  • 验证规则说明
    在这里插入图片描述

2.2演示表单验证

<html>
	<head>
		<meta charset="utf-8">
		<title>引用插件</title>
	<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
	<script src="js/jquery-validation-1.19.0/dist/jquery.validate.js" type="text/javascript" ></script>
	<style type="text/css">
		#myform label.error{
			color: red;
		}
	</style>
	</head>
	
	
	<body>
		<form id="myform">
			账号：<input type="text" name="uname" /><br>
			密码：<input type="text" name="upwd" id="pwd" /><br>
			确认密码：<input type="text" name="qrpwd" /><br>
			年龄：<input type="text" name="uage"  /><br>
			<button >提交</button>
		</form>
	</body>
	<script type="text/javascript">
		$(function(){
			$("#myform").validate({
			rules:{
				uname:{
					required:true,
					minlength:5
				},
				upwd:{
					required:true,
					rangelength:[5,10]
				},
				qrpwd:{
					required:true,
					equalTo:"#pwd"
				},
				uage:{
					required:true,
					digits:true,
					range:[18,100]
				}
			},
			messages:{
				uname:{
					required:"不能为空",
					minlength:'最少长度为5'
				},
				upwd:{
					required:"不能为空",
					rangelength:'长度为5-10'
				}
			},
			qrpwd:{
				required:"不能为空",
				equalTo:"与密码保持一致"
			},
			uage:{
				required:"不能为空",
				digits:"请输入整数",
				range:'年龄要在18-100'
			}
			})
		})
	</script>
</html>
学IT的弟弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery插件
weixin_62232726的博客
03-22 1433
一.自定义插件 1. $.extend 作用1：对象继承 $.extend(对象1，对象2)----对象1继承对象2 案例：对象间的继承（两个对象） var person = {"name":"哈哈","sex":"女"} var stu = {} // 通过$.extend()；为stu继承person中的所有属性 $.extend(stu,person) 作用2：扩展jQuery类方法： $.extend({方法名：function(){方法体}})多个方法之间用逗号隔开 案例
jQuery-------插件
ZY_jaychou6的博客
03-23 837
自定义插件 $.extend 【作用1】对象继承：$.extend(对象1，对象2)--…>对象继承对象2 案例1：对象间的继承(两个对象) 【作用2】扩展JQuery类方法：$.extend((方法名：function(){方法体} 注意多个方法之间用运号幅开 案例2：扩展$.max0和$.min0方法 $.fn.extend 【作用】扩展jQuery对象方法：$.fn.extend({方法名：function()(方法体 )}) 注乘多个方法之间用运号幅开 案例3：扩展复选框的全.
jQuery.js中继承的实现
蜗牛山水
03-28 160
  　　对于JavaScript语言，虽然标榜是面向对象的语言，但是和那些像Java一样传统的面向对象的语言相比，其面向对象的实现，总显得一些别扭。就拿继承来说吧，传统面向对象的语言都是在语言层面上支持了，而JavaScript就要自己来实现继承这个功能了，下面来看看jQuery.js是怎么实现这个功能的。   　　在jQuery.js中有一个jQuery.extend()的静态方法，它提供了jQ...
jquery继承
weixin_34246551的博客
12-26 77
　对于JavaScript语言，虽然标榜是面向对象的语言，但是和那些像Java一样传统的面向对象的语言相比，其面向对象的实现，总显得一些别扭。就拿继承来说吧，传统面向对象的语言都是在语言层面上支持了，而JavaScript就要自己来实现继承这个功能了，下面来看看jQuery.js是怎么实现这个功能的。 在jQuery.js中有一个jQuery.extend()的静...
Jquery 继承
07-10 589
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="../jquery-2.2.1.min.js">script> script> //$.extend 方式 继承 ，通过 $.*** 调用 类似于 $.trim() $.e
jQuery_Tips_插件
07-01
jQuery插件是基于jQuery的扩展，可以增加特定的功能或行为到网页中。jQuery_Tips插件是其中一种，用于生成提示信息。 **插件的安装与使用** 要使用jQuery_Tips插件，首先需要在页面中引入jQuery库和该插件的...
jquery_json.rar_JSON_jquery_jquery-json_jquery.json_jquery.json.
09-22
在jQuery的json插件中，可能存在一个类似的方法，如`$.toJSON()`，这在早期的jQuery版本中是很有用的，因为那时原生的`JSON.stringify`方法在某些浏览器中尚未支持。 2. **JSON字符串到JavaScript对象的解析**：...
JQuery_插件FlexiGrid_之完全配置与使用
05-11
自己再做这个的时候.也是找了很多资料..但网上搜索了很多资料. 没有介绍的很全的.... 来全面的介绍一下JQuery FlexiGrid插件的配置和实用. 本人很菜. 各位大拿看了这么菜的文章 就不要拍砖了.. 一笑而过.好吗?谢谢
jQuery继承extend用法详解
10-21
主要为大家详细介绍了jQuery继承extend用法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery_api_for_dwcs5.rar_jquery_api_for
09-24
jQuery API for Dreamweaver CS5 是一个专门为网页开发工具Dreamweaver CS5设计的插件，旨在增强其对jQuery库的语法支持和代码提示功能。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
jQuery_api_for_dwcs5为dw安装jquery插件
10-24
在本教程中，我们将探讨如何使用jQuery_api_for_dwcs5这个插件将其集成到Dreamweaver（DWCS5）中，从而在DW环境下更方便地编写和调试jQuery代码。 首先，了解jQuery的核心概念至关重要。jQuery的核心功能包括选择器...
jQuery.05.继承与插件
Champion_me的博客
03-22 1348
jQuery.05.继承与插件
jQuery继承的实现（extends）
caibinghong的专栏
04-03 181
jQuery中的extend方法通过不同的参数实现了几种不同的继承方法： 1.extend(src) 将src对象的属性和方法逐一复制给jQuery或jQuery对象 2.extend(dest,src1,src2,src3...srcN) 将src1、src2...对象的属性和方法逐一复制给dest对象，需要注意的是，在复制的过程中...
jQuery-源码阅读，JavaScript原生继承方式与jQuery中的继承
柒青衿的博客
02-29 2523
JavaScript中继承方法有以下几种： 1.原型链继承： function Book (name,author){ this.name=name; this.author=author; } Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author)
jQuery_05 之快速入门 继承&插件
m0_60786924的博客
03-14 1028
1.jQuery插件是什么？ 2.如何下载jQuery插件？ 3.jQuery插件如何使用？ 4.怎样应用在案例中？
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
最新发布
stay hungry, stay foolish
09-02 1480
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值