jQuery05

最新推荐文章于 2024-03-14 07:00:00 发布
最新推荐文章于 2024-03-14 07:00:00 发布
阅读量54 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63667859/article/details/123720856
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">	
			#myForm label.error{
				color: red;
				font-size: 14px;
			}
		</style>
		<!-- 引入jQuery库 -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!-- 引入jQuery表单验证 -->
		<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* jQuery第五次课☞插件 */
			/*
			 * 区分java的类方法以及对象方法
			 * 	--类(静态)方法：例如DBHelper.getCon()
			 * 	--对象方法：StuDao sd = new StuDao(); sd.addStu();
			 */

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

				//1.2 $.extend()扩展jQuery类方法
				//案例2：求最大值(最小值)
				/* $.extend({
					abcd:function(){
						
					},
					getmax:function(a,b){
						return a>b?a:b;
					},
					getmin:function(a,b){
						 return a<b?a:b;
					}
				}) */
				/* console.info($.getmax(42,5));
				console.info($.getmin(55,52)) */

				//1.3 $.fn.extend()扩展jQuery对象方法
				//案例3：实现全选效果
				/* $.fn.extend({
					xx:function(){
						$(this).each(function(i,ck){//下标,ck指每一个复选框
							ck.checked=true;
						})
					},
					yy:function(){
						$(this).each(function(i,ck){//下标,ck指每一个复选框
							ck.checked=false;
						})
					}
				}) */


				/* $("#ok").click(function(){
					$(".as").xx();
				})
				$("#nook").click(function(){
					$(".as").yy();
				}) */

				//用复选框实现
				/* $("#qx").click(function(){
					//判断全选框是否选中
					//if($(this).prop("checked")){//选中了
					if($(this).is(":checked")){
						$(".as").xx();
					}
					else{
						$(".as").yy();
					}
				}) */

				//给其他复选框增加点击事件
				/* $(".as").click(function(){
					var f=true;
					$(".as").each(function(i,ck){//ck代表每一个复选框
						if(ck.checked==false){//有任何一个复选框没有选中
							f=false;
						}
					})
					$("#qx").prop("checked",f);//改变全选框的状态
				}) */

				/* 二、第三方插件:表单验证插件 */
				//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
				$("#myFrom").validate({
					rules:{
						//表单字段规则
						uname:{
							required:true,
							rangelength:[6,10]
						},
						upwd1:"required",
						upwd2:{
							equalTo:"#upwd1"
						},
						uemail:{
							required:true,
							email:true
						},
						uage:{
							required:true,
							range:[1,150]
						},
						uurl:{
							url:true
						}
					},
					messages:{
						//错误信息提示
						uname:{
							required:"用户名必填",
							rangelength:"只能输入6到10位"
						}
					}
				});
			})
		</script>
	</head>
	<body>
		<h2>案例3:自定义插件实现全选功能</h2>
		<button type="button" id="ok">全选</button>
		<button type="button" id="nook">取消全选</button>
		<input type="checkbox" id="qx" />全选
		<input type="checkbox" class="as" />睡觉
		<input type="checkbox" class="as" />哈哈
		<input type="checkbox" class="as" />搞笑女
		<h2>案例4:使用jQuery validation插件完成表单验证</h2>
		<form id="myFrom">
			用户名：<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>

 

ケイ907
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery_04
weixin_64692712的博客
03-23 821
1.1 加载DOM两种方式(区别)、 个数与顺序问题 优先顺序跟版本有关 //window.onload 自动调用函数只能写一个 多个会被覆盖 //可以写多个 // $(function(){ // console.info("jQuery方式"); // }) 1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等] --元素.on/bind() ...
jQuery_01
weixin_64692712的博客
03-17 208
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
使用jQuery实现表单数据验证
qq_48666244的博客
12-07 4046
1、$('form :input')返回form中的所有表单对象，包括textarea、select、button等；$('form input')返回form中的所有input标签对象。2、form input是属于层级选择器（将每一个选择器匹配到的元素合并后一起返回）；form :input是属于表单选择器（匹配所有 input、textarea、select、button等）。triggerHandler()方法触发被选元素的指定事件类型。triggerHandler()方法与trigger()方
JQuery-表单验证
qq_49246775的博客
12-07 6475
GiWiFI页面验证登录()表单验证
「jQuery系列」jQuery 校验表单（Validate）
日常笔记/总结/系列知识梳理
03-14 2068
jQuery Validate的一些常见使用场景： 网站前端表单验证：无论是用户注册、登录、提交订单还是其他类型的表单输入，使用jQuery Validate可以确保用户输入的数据符合预设的规则，如邮箱格式、密码强度、必填项等。这有助于防止因用户输入错误而导致的数据错误或系统异常。 动态校验场景：在前端设计中，实时、动态的信息校验提醒能够提供良好的用户体验。jQuery Validate提供了强大的动态校验功能，能够实时检查用户的输入，并在不满足规则时即时给出提示，帮助用户快速修正错误。
jQuery 表单验证：简单而强大的表单验证方法
weixin_68250871的博客
05-23 704
【代码】jQuery 表单验证：简单而强大的表单验证方法。
DAY05_jQuery.md
05-10
DAY05_jQuery.md
jquery-3.5.1.js
05-12
jquery最新版本 /*! * jQuery JavaScript Library v3.5.1 * https://jquery.com/ * * Includes Sizzle.js ... * ... * Released under the MIT license * https://jquery.org/license ... * Date: 2020-05-04T22:49Z */
jQueryEasyUI入门
07-22
教程名称：jQuery EasyUI入门课程目录：【】02.[jQueryEasyUI]第2章使用EasyUI【】03.[jQueryEasyUI]第3章Draggable(拖动)组件【】04.[jQueryEasyUI]第4章Droppable(放置)组件【】05.[jQueryEasyUI]第5章Resizable...
jquery基础教程05
08-23
jquery基础教程，总共分为10章，内容全面，讲解详细，是入门精通的好教程。
JQuery 简单表单验证
爪白白的个人博客
05-20 1384
选择器 $("p") 选取<p>元素 $("p.intro") 选取class="intro" 的<p>元素 $("p#demo") 选取id="demo" 的<p>元素 $("div input") 选取div 下所有的input元素 $("p:first") 选取第一个段落 $("p:last") 选取最后一个段落 $("tr:even") 选择...
jQuery-05
weixin_65088316的博客
03-24 718
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery库 --> <style type="text/css"> #myForm label.error{ color:red; ...
jQuery实例之表单验证
二木成林
05-14 2284
使用jQuery实现表单验证： register.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <!--导入jQuery--> <script src="js/jquery-3.3.1.js"></script> <!--进行
表单验证（jquery-validate）
zp的博客
11-23 2320
1.默认校验规则 属性 描述 required:true 必须输入的字段 remote:"/action" 使用ajax方法调用action验证输入值 email:true 必须输入正确格式的电子邮件 url:true 必须输入正确格式的网址 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不.
jQuery Validate详解
JBIB ENGINE
01-26 1809
rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
表单验证插件jquery-validation以及案例
伟庭师兄的博客
08-15 285
确认密码
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jQuery源码分析系列全览
05异步队列Deferred是jQuery中处理异步操作的关键，它使得异步编程更易于理解和管理。作者将详细解释Deferred对象的工作原理，包括done()、fail()、then()等方法的使用。 08队列Queue章节关注的是jQuery的内部队列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值