jQuery

最新推荐文章于 2024-03-14 07:00:00 发布

祈茒

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量56

点赞数

分类专栏： 1 jQuery 文章标签： java

本文链接：https://blog.csdn.net/T279zhengyiming/article/details/123721389

版权

jQuery 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	#myFormc label.error {
	color: red;
	font-size: 14px;
	}
	</style>
	<!-- 引入jQuery库 -->
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<!-- 引入表单验证类库 -->
	<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 s1 = {};
	var s2 = {
	"name": "大炮",
	"age": 38
	}
	console.info("继承前：" + s1.name, s1.age);
	console.info("继承前：" + s2.name, s2.age);
	//开始继承
	$.extend(s1, s2);
	console.info("继承后：" + s1.name, s1.age);
	console.info("继承前：" + s2.name, s2.age);
	//1.2 $.extend()扩展jQuery类方法
	//案例2：求最大值(最小值)
	$.extend({
	abcd: function() {
	alert(1234);
	},
	getMax: function(a, b) {
	return a > b ? a : b;
	},
	getMax: function(a, b) {
	return a < b ? a : b;
	}
	});
	// $.abcd();

	var max = $.getMax(10, 40);
	console.info(max);

	console.info($.getMin(10, 50));


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

	//案例3：实现全选效果
	$("#ok").click(function() {
	$(".aaa").xx();
	})
	$("#nook").click(function() {
	$(".aaa").yy();
	})
	//用复选框实现
	$("#qx").on("click", function() {
	console.info($(this).prop("checked"));
	if ($(this).is(":checked")) {
	$(".aaa").xx();
	} else {
	$(".aaa").yy();
	}
	})
	//给其他复选框增加点击事件
	$(".aaa").click(function() {
	$(".aaa").each(function(i, ck) { //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" id="ok" value="全选" />
	<input type="button" id="nook" value="取消全选" />
	<input type="checkbox" id="qx" />全选
	<input type="checkbox" class="aaa" value="看美女" />看美女
	<input type="checkbox" class="aaa" value="打王者" />打王者
	<input type="checkbox" class="aaa" value="打吃鸡" />打吃鸡

	<h2>案例4:使用jQuery validation插件完成表单验证</h2>
	<form id="myForm">
	用户名:<input type="text" name="uname" /><br />
	密码:<input type="text" name="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>