jQuery基础入门（下）

最新推荐文章于 2020-12-19 20:17:34 发布
最新推荐文章于 2020-12-19 20:17:34 发布
阅读量211 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yukuiadeyu2/article/details/103658185
版权

jQuery基础入门（下）

今日内容介绍

重写javascript案例：省市联动

javascript案例：左右选择

重写javascript案例：表单校验

今日内容学习目标

能够使用jQuery为标签添加属性或样式

能够为指定标签添加子标签或兄弟标签

学会给标签绑定事件

能够使用jQuery Validate对表进行校验

课堂笔记

1、 重写省市联动

1.1、 案例分析

重写javascript案例“省市联动”

1.2、 相关知识点

本案例需要对标签的value属性值，标签体内容进行操作，并需要遍历所有的市。

1.2.1、 属性的操作：val、text、html

方法名描述
val()
val(“设置的值”)		获得表单元素value属性的值。
给表单元素的value属性设置值。
html()
html(“设置的值”)		获得元素的html代码，如果有标签，一并获得。
设置元素的html代码，如果有标签，将进行解析。
text()
text(“设置的值”)		获得元素的文本，如果有标签，忽略。
设置文本，如果含有标签，不进行解析。原样输出。
<input type="text" id="txt" value="hello" />
<div id="div1">
    <h2>标题222</h2>
</div>
<div id="div2">
    <h2>标题333</h2>
</div>
需求一：获取文本框的value值
需求二：设置文本框的value值为‘world’
需求三：获取id为div1的div的标签内容
需求四：设置id为div1的div的标签内容为：‘<b>我是加粗的</b>’
需求五：使用text() 获取id为div2的div的标签内容
需求六：使用text() 设置id为div2的div的标签内容：‘<b>我是加粗的</b>’

代码示例：

案例需要的html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="txt" value="hello" />
		<div id="div1">
			<h2>标题222</h2>
		</div>
		<div id="div2">
			<h2>标题333</h2>
		</div>	
	</body>
</html>

实现上述案例的jQuery代码如下：

<script src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			// 1. val() 获取表单元素的value值
			//    val(...) 设置表单元素的value值
			// 获取input的value值
			console.log($('#txt').val()); // hello
			// 设置input的value值
			$('#txt').val('world');
			//设置完成之后再获取一遍值，原来的文本框的默认值不会改变，还依然存在
            console.log($('#txt').val());
			// 2. html() 获取元素html代码，如果有标签一并获取
			//    html(...) 设置元素的内容，如果有标签将被解析
			// 获取div的html内容
			console.log($('#div1').html()); // <h2>标题222</h2>
			// 设置div的html内容
			$('#div1').html('<b>我是加粗的</b>');
			
			// 3. text() 获得元素的文本，如果有标签，忽略
			//    text(...) 设置元素的文本，如果有标签，不进行解析，原样输出
			// 获取div的文本内容
			console.log($('#div2').text()); // 标题333
            //对于text()方法来说，<b></b>标签不进行解析，即在页面上不会实现加粗功能，会将b标签原样显示
			$('#div2').text('<b>我是加粗的</b>');
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fMhKBiJL-1577025900007)(img/1.bmp)]

总结：

1、 val()相当于我们之前的value 。

2、 html()相当于我们之前的innerHTML 。

1.2.2、 遍历函数：each

jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的对象的数组。因此在常常需要对jQuery对象进行遍历。我们会学习2种遍历jQuery的方法。

1、原始方式遍历

跟普通JS循环一样，使用普通的for循环，因为每个JQ对象都有一个length属性或者size()方法。

语法结构：

for (var i = 0; i < $ele.length或者size(); i++) {
使用获取的标签[索引]操作标签的时候，这里获取的标签[索引]属于原生dom,还不能直接使用jQuery中的方法，要想使用，必须使用$()包起来。
}

2、 JQ对象的方法 （重点）

此方式是jquery特有的遍历方式，使用JQ对象调用each方法即可遍历。

语法结构：

$ele.each(function(index,element) {
		this
});
each方法接收一个回调函数
回调函数参数：
index  :  遍历的索引（下标）
element:  遍历的当前的对象

经验：我们一般不会去写回调函数的参数，可以直接在回调函数里面使用this , 而this和element是等价的 ：即this等于 element

​

注意：别管是上述的哪种遍历方式，遍历的集合中的每一个元素对象都是原生JS对象，而原生JS对象不能使用JQ的所有方法，要想使用JQ的方法要使用$()包一层。

案例需要的html代码：
<ul>
    <li>Java</li>
    <li>PHP</li>
    <li>Android</li>
    <li>IOS</li>
</ul>
需求：遍历ul下面所有的li,并且输出li的内容

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>Java</li>
			<li>PHP</li>
			<li>Android</li>
			<li>IOS</li>
		</ul>
		<script src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			// 需求：遍历ul下面所有的li,并且输出li的内容
			var aLi = $('ul li');
			// 方式一：普通的for循环
			for (var i = 0; i < aLi.length; i++) {
				// 注意：aLi[i] 是原生的JS对象没有JQ方法，要想使用JQ方法需要使用$()包一层
				//console.log(aLi[i].innerHTML);
				console.log($(aLi[i]).html());
			}
			
			// 方式二：JQ对象的each方法
			aLi.each(function(index,element) {
				// 注意：element是原生的JS对象
				//console.log(index + '...' + element);
				//console.log(element == this);
				console.log($(this).html());
			});
		</script>
	</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L6N825Z0-1577025900009)(img/2.bmp)]

1.2.3、DOM操作的方法：元素的创建和添加

目标

使用JQ对象的方法创建和插入元素

回顾

JS中创建元素：document.createElement(“标签名”)

JS添加到DOM树： 父元素.appendChild(子元素)

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fufbXTpF-1577025900010)(img/1553159949690.png)]

说明：

1.创建标签：

$('完整的标签'); 
例如: $('<li>…</li>');

2.关于append举例：(内部插入)

A.append(B)  : 
<A>
	....
	<B></B>
</A>
将B插入到A内部后面

3.关于prepend举例：(内部插入)

A.prepend(B) : 
<A>
<B></B>
	....
</A>
将B插入到A内部前面

4.关于before举例：(外部插入)

A.before(B) : 
<B></B>
<A></A>
将B插入到A外部的前面

5.关于after举例：(外部插入)

A.after(B)  : 
<A></A>
<B></B>
将B插入到A外部的后面
演示代码
案例1：
<ul>
		<li>111</li>
</ul>
需求：创建一个li标签并且使用append追加到ul的最后面
需求：创建一个li标签并且使用prepend添加到ul的最前面

说明：

1）JQ创建元素：$(‘完整的标签’) ： 例如： $(’

  • …
  • ’)；

    jQuery代码示例：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>111</li>
		</ul>
		<script src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			// 1. A.append(B); 将B插入到A内部的后面
			// JQ创建元素：$('完整的标签') ： 例如： $('<li>....</li>')
			// 需求：创建一个li标签并且使用append追加到ul的最后面
			$('ul').append($('<li>222</li>'));
			
			// 2. A.prepend(B); 将B插入到A内部的前面
			// 需求：创建一个li标签并且使用prepend添加到ul的最前面
			$('ul').prepend('<li>000</li>');
		</script>
	</body>
</html>
    案例2：

    案例的html代码如下：

    <ul>
		<li id="bbb">bbb</li>
</ul>
需求一：创建一个li使用after插入到bbb的后面
需求二：创建一个li使用before插入到bbb的前面

    jQuery代码实现如下：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li id="bbb">bbb</li>
		</ul>
		<script src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			// 需求一：创建一个li使用after插入到bbb的后面
			$('#bbb').after($('<li>ccc</li>'));
			
			// 需求二：创建一个li使用before插入到bbb的前面
			$('#bbb').before($('<li>aaa</li>'));
		</script>
	</body>
</html>
    小结
    方法名描述
    $(标签的全部内容)创建元素
    父元素.append(子元素)追加成最后一个子元素
    元素.before(元素)在当前元素前添加新元素

    1.3、 省市联动案例实现

    省市联动需要的html代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="province" name="province">
			<option value="">--请选择省--</option>
		</select>
		<select id="city" name="city">
			<option value="">--请选择市--</option>
		</select>
	</body>
</html>

    实现省市联动jQuery代码：

    <script src="js/cities.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
			// 页面加载的时候填充省的下拉框
			// 使用JQ遍历china数组
			$(china).each(function() {
				// 创建option
				var option = $('<option value="'+ this.p_id +'">'+this.p_name+'</option>');
				// 每次添加到省下拉框的最后面
				$('#province').append(option);
			});
			
			// 给省添加一个onchange 事件 ： 对应JQ change 
			$('#province').change(function() {
				// 每次加载之前先清空城市下拉的内容
                //$('#city')[0]表示将jQuery对象转换为原生dom对象
				$('#city')[0].options.length = 1;
				// 获取当前的省的value值
				var p_id = $(this).val();
				$(china).each(function() {
					if (p_id == this.p_id) {
						var cityJsonArr = this.cities;
						// 循环城市数组填充城市下拉框
						$(cityJsonArr).each(function() {
							var option = $('<option value="'+ this.c_id +'">'+this.c_name+'</option>');
							$('#city').append(option);
						});
					}
				});
			});
</script>

    1.4、 总结：jQuery其它的方法

    1.4.1、 样式的操作：css

    语法结构：

    $ele.css(样式名);          获取指定标签的指定样式  
$ele.css(样式名，样式值);   给指定标签设置一个样式  
$ele.css({样式名1：值1，样式名2：值2}); 给指定标签设置多个样式

    案例需要的html代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div>我是div</div>
	</body>
</html>

    需求一：获取div 的宽度

    需求二：给div设置一个红色的背景色

    需求三：给div设置多个样式：2px 实心的 黑色边框 和 字体颜色为白色

    jQuery代码实现：

    <script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
// 需求一：获取div 的宽度
// css(样式名); 获取指定的样式
console.log($('div').css('width')); // 100px

// 需求二：给div设置一个红色的背景色
// css(样式名,样式值); 设置一个样式
$('div').css('backgroundColor', 'red');

// 需求三：给div设置多个样式：2px 实心的 灰色边框 和 字体颜色为白色
// 设置多个样式 {...}
$('div').css({
"color" : "white",
"border" : "2px solid black"
});
</script>

    效果：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SBqO7tdY-1577025900010)(img/3.bmp)]

    1.4.2、DOM操作方法：删除元素

    目标

    与删除元素有关的方法

    语法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JZbPcQf9-1577025900011)(img/1553160293609.png)]

    示例

    案例需要的html代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<h2>标题222</h2>
		</div>
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
		</ul>
	</body>
</html>

    实现上述效果的jQuery代码：

    <script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    // 1. $ele.remove(); 删除指定元素
    // 需求：删除div
    $('div').remove(); 

    // 2. $ele.empty(); 清空指定元素的内容，标签保留
    // 需求： 清空ul
    $('ul').empty();
</script>
    案例效果：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ItA1vpYt-1577025900011)(img/4.bmp)]

    小结
    方法名功能
    元素.remove()删除自己
    父元素.empty()删除所有的子元素

    2、 左右选择

    2.1、 案例介绍

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z46VNQtg-1577025900012)(img/5.bmp)]

    1、点击按钮“-->”让下拉框A中选中的项 到 下拉框B中，并且添加到最后
2、点击按钮“==>”让下拉框A中所有的项 到 下拉框B中 
3、点击按钮“<--”让下拉框B中选中的项 到 下拉框A中，并且添加到最后
4、点击按钮“<==”让下拉框B中所有的项 到 下拉框A中

    2.2、 案例分析

    本案例我们jQuery的“层级选择器”、“表单属性过滤选择器”、“文档处理”。通过“层级选择器”获得需要的操作对象，通过“表单属性过滤选择器”从已有的对象中筛选出需要的，最后通过“文档处理”将筛选后的内容追加到指定的位置。

    2.3、 案例实现

    案例准备html代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				font-family: Courier;
				font-size: 12px;
				margin: 0px 0px 0px 0px;
				overflow-x: no;
				overflow-y: no;
				background-color: #B8D3F4;
			}
			td {
				font-size: 12px;
			}
			.default_input {
				border: 1px solid #666666;
				height: 18px;
				font-size: 12px;
			}
			.default_input2 {
				border: 1px solid #666666;
				height: 18px;
				font-size: 12px;
			}
			.nowrite_input {
				border: 1px solid #849EB5;
				height: 18px;
				font-size: 12px;
				background-color: #EBEAE7;
				color: #9E9A9E;
			}
			.default_list {
				font-size: 12px;
				border: 1px solid #849EB5;
			}
			.default_textarea {
				font-size: 12px;
				border: 1px solid #849EB5;
			}
			.nowrite_textarea {
				border: 1px solid #849EB5;
				font-size: 12px;
				background-color: #EBEAE7;
				color: #9E9A9E;
			}
			.wordtd5 {
				font-size: 12px;
				text-align: center;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #b8c4f4;
			}
			.wordtd {
				font-size: 12px;
				text-align: left;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #b8c4f4;
			}
			.wordtd_1 {
				font-size: 12px;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #516CD6;
				color: #fff;
			}
			.wordtd_2 {
				font-size: 12px;
				text-align: right;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #64BDF9;
			}
			.wordtd_3 {
				font-size: 12px;
				text-align: right;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #F1DD34;
			}
			.inputtd {
				font-size: 12px;
				vertical-align: top;
				padding-top: 3px;
				padding-right: 3px;
				padding-bottom: 3px;
				padding-left: 3px;
			}
			.inputtd2 {
				text-align: center;
				font-size: 12px;
				vertical-align: top;
				padding-top: 3px;
				padding-right: 3px;
				padding-bottom: 3px;
				padding-left: 3px;
			}
			.tablebg {
				font-size: 12px;
			}
			.tb {
				border-collapse: collapse;
				border: 1px outset #999999;
				background-color: #FFFFFF;
			}
			.td2 {
				line-height: 22px;
				text-align: center;
				background-color: #F6F6F6;
			}
			.td3 {
				background-color: #B8D3F4;
				text-align: center;
				line-height: 20px;
				width: 160px;
			}
			.td4 {
				background-color: #F6F6F6;
				line-height: 20px;
			}
			.td5 {
				border: #000000 solid;
				border-right-width: 0px;
				border-left-width: 0px;
				border-top-width: 0px;
				border-bottom-width: 1px;
			}
			.tb td {
				font-size: 12px;
				border: 2px groove #ffffff;
			}
			.noborder {
				border: none;
			}
			.button {
				border: 1px ridge #ffffff;
				line-height: 18px;
				height: 20px;
				width: 45px;
				padding-top: 0px;
				background: #CBDAF7;
				color: #000000;
				font-size: 9pt;
				font-family: Courier;
				;
			}
			.textarea {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 9pt;
				color: #000000;
				border-bottom-width: 1px;
				border-top-style: none;
				border-right-style: none;
				border-bottom-style: solid;
				border-left-style: none;
				border-bottom-color: #000000;
				background-color: transparent;
				text-align: left
			}
		</style>
	</head>
	<body>
		<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:450px; height:300px; background-color:#E6E6E6;">
			<table width="385" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
				<tr>
					<td width="126">
						<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
						<select name="first" size="10" multiple="multiple" class="td3" id="first">
							<option value="选项1">选项1</option>
							<option value="选项2">选项2</option>
							<option value="选项3">选项3</option>
							<option value="选项4">选项4</option>
							<option value="选项5">选项5</option>
							<option value="选项6">选项6</option>
							<option value="选项7">选项7</option>
							<option value="选项8">选项8</option>
						</select>
					</td>
					<td width="89" valign="middle" align="center">
						<input name="add" id="add" type="button" class="button" value="-->" />
						<input name="add_all" id="add_all" type="button" class="button" value="==>" />
						<input name="remove" id="remove" type="button" class="button" value="&lt;--" />
						<input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
					</td>
					<td width="127" align="left">
						<select name="second" size="10" multiple="multiple" class="td3" id="second">
							<option value="选项9">选项9</option>
						</select>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html >

    jQuery代码实现:

    <script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
		// 点击 -->按钮 需要让first下拉框选中的项 添加到second下拉的后面
		// 1. 给 -->按钮 添加一个点击事件
		$("#add").click(function() {
			// 2. 通过选择器 获取first下拉里面选中的项 并且添加到second下拉框的后面
			$("#second").append($("#first option:selected"));
		});
		// 点击 ==>按钮 需要让first下拉框中所有的项 添加到second下拉框里面
		$("#add_all").click(function() {
			$("#second").append($("#first option"));
		});

		// 点击 <-- 按钮 需要让second下拉框选中的项 添加到first下拉的后面
		$("#remove").click(function() {
			$("#first").append($("#second option:selected"));
		});
	
		// 点击 <==按钮 需要让second下拉框中所有的项显添加到first下拉框里面
		$("#remove_all").click(function() {
			$("#first").append($("#second option"));
		});
</script>

    效果：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kxxDtCs3-1577025900012)(img/6.bmp)]

    注意： 上述是在执行添加的操作，但是添加完毕之后，数据没有了的原因是：DOM的添加操作相当于一个剪切的功能。

    3、jQuery的事件的使用

    语法

    $ele.事件名(function() {
});
注意：事件名需要把原生JS的事件的“on”去掉
例如：原生js:oDiv.onclick = function() {…};  ->  jq中的：$div.click(function(){…});

    jQuery中常用的事件

    事件方法功能
    blur()失去焦点
    change()改变事件
    click()单击事件
    dblclick()双击事件
    focus()得到焦点
    keydown()按下键
    keyup()松开键
    mouseover()鼠标移上
    mouseout()鼠标移出
    submit()表单提交
    hover()jq创建的事件，鼠标悬浮，相当于mouseover和mouseout

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xvPzM39A-1577025900013)(img/7.bmp)]

    事件的切换

    hover( over , out ) 简化方法

    ​ A.hover( fn1 , fn2) 等效与 A.mouseover( fn1 ),A.mouseout( fn2 )

    **需求1：**鼠标悬停在div上时div变红色，离开还原。

    案例需要的html代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 150px;
				height: 150px;
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<div>我是div</div>
	</body>
</html>

    jQuery代码实现：

    <script src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
           /* $('div').mouseover(function(){
             // 悬停变红色
				$(this).css('backgroundColor', 'red');
			});
			$('div').mouseout(function(){
             // 离开还原
				$(this).css('backgroundColor', 'gray');
			});*/

			// 需求：鼠标悬停在div上div变红色，离开还原
			$('div').hover(function(){
				// 悬停变红色
				$(this).css('backgroundColor', 'red');
			}, function(){
				// 离开还原
				$(this).css('backgroundColor', 'gray');
			});
</script>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HyrF7EJA-1577025900013)(img/8.bmp)]

    4、动态绑定事件：绑定(bind)与解绑(unbind)

    目标

    学习事件的动态绑定与解绑

    什么是事件绑定和解绑定

    ​ 事件绑定：就是让一个标签绑定一个事件，然后这个标签就有了该事件的功能了。

    ​ 事件解绑定：就是从该标签上解除绑定的事件。

    绑定语法

    jQuery对象.bind(事件类型，响应函数);
例如：
绑定一个事件：
$("btn").bind("click", function(){ … });
绑定多个事件： 
$("btn").bind({
    click:function(){ … },
    mouseover:function(){ … },  
    mouseout:function(){ … }  
});

    说明：绑定多个事件使用json格式进行绑定。

    解绑语法

    jQuery对象.unbind([事件类型]);中括号表示可写可不写。不写表示解绑所有的事件。书写就是解除某个事件。
例如：
解绑所有事件：
$("btn").unbind();
解绑指定事件：
$("btn").unbind(“click”);或者   $("btn").unbind(“click mouseout”);

    **说明：解除多个绑定事件格式：jq对象.unbind(“事件1 事件2 …”); **

    示例：绑定和解绑定事件

    代码

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">点我试试</button>
		<script src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			// 使用bind方法给按钮绑定一个点击事件
			$('#btn').bind('click', function() {
				console.log('hello world');
			});
			
			// 使用unbind方法将按钮的点击事件解除
			$('#btn').unbind();
			
			// 给按钮一次绑定多个事件
			$('#btn').bind({
				mouseover : function() {
					$(this).css('backgroundColor','red');
				},
				mouseout : function () {
					$(this).css('backgroundColor','blue');
				}
			});
			
			// 将按钮的移出事件解除
			$('#btn').unbind('mouseout');
		</script>
	</body>
</html>

    5、 表单校验

    5.1、 案例介绍

    在学习JavaScript时，我们手动的完成过表单数据的校验，此功能在开发中非常常见，属于通用功能范畴，实际开发一般使用都是第三方工具。本案例我们将使用jQuery插件validation进行表单的校验。

    5.2、 **相关知识点：**validation校验插件

    5.2.1、 什么是jQuery插件

    jQuery插件就是将jQuery实现的某些特定的功能进行封装就叫做jQuery插件，而我们可以按照插件的语法去操作，就可以实现很多复杂的功能。 我们任何开发人员都可以借助于jQuery提供的扩展接口来开发自己的插件，从而来简化开发，实现 write less， do more 的愿望。现在越来越多的开发者借助与JQuery开发插件，已经形成了围绕JQuery的生态圈！

    5.2.2、 什么是jQuery Validate

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-89VIAqH0-1577025900014)(img/9.bmp)]

    5.2.3、 下载

    官网：https://jqueryvalidation.org/

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AdCMPuaN-1577025900014)(img/10.bmp)]

    官网下载地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

    帮助文档位置：http://jqueryvalidation.org/documentation/

    菜鸟网地址： http://www.runoob.com/jquery/jquery-plugin-validate.html

    目录结构：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KRkzyigi-1577025900015)(img/11.bmp)]

    我们需要的文件在： dist 发布代码 里面的**jquery.validate.js **

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mplwv2yz-1577025900015)(img/12.bmp)]

    5.2.4、 如何使用

    语法格式：

    $("form表单的选择器").validate({
//校验规则
rules : {
 表单项name值：{
//校验规则
例如：
"username":{
             required:true
          }
}，
表单项name值：{
校验规则
}，
... ...
 	 },
//错误提示信息
messages : {
 表单项name值：{
//错误提示信息
例如：
"username":{
             required:"用户名不能是空"
          }
}，
表单项name值：{
错误提示信息
}，
... ...
 	 }
});

    说明：

    ​ 1) jQuery Validate需要手动的声明对哪个表单进行校验，即需要手动调用validate()方法。

    ​ 2) rules：配置验证规则（JSON结构）

    ​ 里面是具体的验证规则（JSON结构），key是被验证表单元素的name属性的值，value是验证规则 (也是json格式)

    ​ 3) messages：配置通过验证规则不通过要显示的提示信息（JSON结构）

    ​ 里面是具体的错误信息（JSON结构），key是被验证表单元素的name属性的值，value是提示信息 (也是json格式)

    ​ 默认的 校验规则

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2t23Ful-1577025900016)(img/13.bmp)]

    5.2.5、 快速入门

    需求：实现一个简单的表单验证：用户名不能为空，密码是4-6位，确认密码 .

    案例需要的html代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
      <style type="text/css">
        label.error{
            color:red;
            margin-left: 10px;
        }
</style>
	</head>
	<body style="margin: 50px;">
		<form id="form1" action="#" method="post">
			<table>
				<tr>
					<td>用户名</td>
					<td><input type="text" name="username" id="username" /></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="password" id="password" /></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type="password" name="repassword" id="repassword" /></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" value="提交" /></td>
				</tr>
			</table>
		</form>
	</body>
</html>

    案例需要的jQuery代码实现：

    <!--引入JQ库-->
<script src="js/jquery-1.11.0.js"></script>
<!--引入validate库-->
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">
    // 1. 选择要进行表单验证的form后调用validate()方法
    $('#form1').validate({
    // 验证规则
    rules: {
        // 要验证的表单项
        username : { // 用户名
            // 验证规则
            required : true // 必填项
        },
        password : { // 密码
            required : true, // 必填项
            rangelength: [4,6] // 密码是4-6位
        },
        repassword : { // 确认密码
            equalTo : '#password'   // 确认密码必须与密码一致 这里 #password 表示id选择器，还可以使用其他选择器
        }
    },
    // 提示信息
    messages: {
        username : {
            required : '用户名为必填项'
        },
        password : {
            required : '密码为必填项',
            rangelength: "密码长度是{0}-{1}位"//此写法可以根据实际长度的改变而改变
        },
        repassword : {
            equalTo : '两次密码输入不一致'
        }
    }
});
</script>

    效果：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zA30Ik4v-1577025900017)(img/14.bmp)]

    说明：

    1）由于validation插件是使用jQuery进行编写的，所以该插件需要使用jQuery库中的内容，所以在引入库的时候，一定要先引入jquery-1.11.0.js核心库，然后在引入jquery.validate.js库；

    2）默认情况下，验证提示信息用label元素来显示，并且会添加css class为error, 所以我们可以通过css很方便设置出错误信息的显示方式。

    说明：关于lable标签，我们明天会学习。

    5.3、 高级：自定义校验

    如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则，使用jQuery Validate 提供的方法$.validator.addMethod来完成自定义校验规则。

    语法结构：

    $.validator.addMethod(“name” , method , [message]);
	参数1：name，  校验规则的名称。例如：required，pwdFormat等
	参数2：method，执行校验时使用的处理函数。该函数返回true表示校验通过，返回false表示校验未通过。
		function(value , element , params ){} ,处理函数被调用时，可以获得3个参数。（直接写这三个参数就好了，系统会自己获取值）
			参数value：   表单项的value值。例如：<input value="aaa">
			参数element：被校验的表单项对象。
			参数params： 使用当前校验规则传递的值。例如：rules : { username : {required : true} },这里params接收的就是true这个值。
	参数3：message，校验未通过时的提示的信息。注意：参数可以不用写，不写可以在messages里面配置！[]表示可写可不写

    默认的 校验规则

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pd4cHsX3-1577025900017)(img/13.bmp)]

    5.4、 案例实现

    5.4.1、 案例需要准备的html代码

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p { text-align: center; font-size: 24px; color: red; font-weight: bold; }
			table { margin: 0 auto; border: 0; }
			table tr { height: 40px;border: 0; }
			table tr td { padding: 0 14px; border: 1px solid #999 }
label.error { margin-left: 10px; color: red }
		</style>
	</head>
	<body>
		<p>员工信息录入</p>
		<form name="empForm" id="empForm" action="#" method="post">
			<table border=1>
				<tr>
					<td>真实姓名(不能为空 ,没有其他要求)</td>
					<td><input type="text" id="realname" name="realname" />
					</td>
				</tr>
				<tr>
					<td>登录名(不能为空,长度在5-8之间,可以包含中文字符(一个汉字算一个字符))</td>
					<td><input type="text" id="username" name="username" /></td>
				</tr>
				<tr>
					<td>密码(不能为空,长度6-12字符或数字,不能包含中文字符)</td>
					<td><input type="password" id="password" name="password" /></td>
				</tr>
				<tr>
					<td>重复密码</td>
					<td><input type="password" id="repassword" name="repassword" /></td>
				</tr>
				<tr>
					<td>性别(必选其一)</td>
					<td>
						<input type="radio" id="male" value="male" name="gender" />&nbsp;男&nbsp;&nbsp;
						<input type="radio" id="female" value="female" name="gender" />&nbsp;女
<label class="error" for="gender" style="display: none;"></label>
					</td>
				</tr>
				<tr>
					<td>年龄(必填26-50)</td>
					<td><input type="text" id="age" name="age" /></td>
				</tr>
				<tr>
					<td>你的学历</td>
					<td>
						<select name="education" id="education">
							<option value="">--请选择你的学历--</option>
							<option value="zk">专科</option>
							<option value="bk">本科</option>
							<option value="yjs">研究生</option>
							<option value="ss">硕士</option>
							<option value="bs">博士</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>出生日期(1982/09/21)</td>
					<td><input type="text" id="birthday" name="birthday" value="" /></td>
				</tr>
				<tr>
					<td>兴趣爱好</td>
					<td colspan="2">
						<input type="checkbox" name="hobby" value="sing"  />&nbsp;唱歌 &nbsp;
						<input type="checkbox" name="hobby" value="dance" />&nbsp;跳舞 &nbsp;
						<input type="checkbox" name="hobby" value="coding" />&nbsp;编码 &nbsp;
						<input type="checkbox" name="hobby" value="shoping" />&nbsp;购物 &nbsp;
<label class="error" for="hobby" style="display: none;"></label>
					</td>
				</tr>
				<tr>
					<td align="left">电子邮箱</td>
					<td><input type="text" id="email" name="email" /></td>
				</tr>
				<tr>
					<td align="left">身份证(15位或者18位)</td>
					<td><input type="text" id="card" name="card" /></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" value="保存"></td>
				</tr>
			</table>
		</form>
	</body>
</html>

    注意： 如果验证的是单选按钮或者复选框需要手动在后面添加一个label标签

    <label class=”error”for=”name名称”style=”display:none”></label>

    默认的 校验规则

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k8OB5LIo-1577025900018)(img/13.bmp)]

    submitHandler, jQuery Validate中的属性，作用是表单数据验证全部通过后提交表单数据，在rules和messages后执行（位置rules和messages同级）

表单对象.serialize();   序列化表单:将表单全部数据序列化成一个大的字符串

    5.4.2、 jQuery代码实现

    <!--引入JQ库-->
<script src="js/jquery-1.11.0.js"></script>
<!--引入validate库-->
        <script src="js/jquery.validate.js"></script>
<script type="text/javascript">
    // 自定义密码校验规则  密码(不能为空,长度6-12字符或数字,不能包含中文字符)
    //pwdFormat校验规则的名称。例如：required
    //第二个参数表示执行校验时使用的处理函数。该函数返回true表示校验通过，返回false表示校验未通过。
    $.validator.addMethod('pwdFormat', function(value,element,params) {
    // value : 当前密码框的value值
    // element : 当前密码框对象
    // params : 规则的参数 [6,12]
    var reg = new RegExp('^[a-zA-Z0-9]{'+ params[0] +','+ params[1] +'}$');
    if (reg.test(value)) {
        return true;
    } else {
        return false;
    }
}, '密码必须是{0}-{1}位的字符或者数字');


// 自定义身份证校验规则
$.validator.addMethod('cardFormat', function(value, element, params) {
    if (params) { // params:true 表示要验证
        if (value.length == 15) { 
            // 15位： 都是数字
            var reg = /^\d{15}$/;
            return reg.test(value);
        } else if (value.length == 18) {
            // 18 位： 都是数字或者末尾是X,x
            var reg = /^\d{18}|\d{17}[Xx]$/;
            return reg.test(value);
        } 
        // 格式不符合
        return false;
    }
    // 执行到这里说明params是false 表示不验证 直接通过，所以该函数返回true
    return true;
});

$('#empForm').validate({
    rules: {
        realname : {
            required : true
        },
        username : {
            required : true,
            rangelength : [5,8]
        },
        password : {
            required : true,
            pwdFormat : [6,12]
        },
        repassword : {
            equalTo : '#password'
        },
        gender : {
            required : true
        },
        age : {
            required : true,
            //min : 26,
            //max : 50
            range:[26,50]
        },
        education : {
            required : true
        },
        birthday : {
            required : true,
            dateISO : true
        },
        hobby : {
            required : true
        },
        email : {
            required : true,
            email : true
        },
        card : {
            required : true,
            cardFormat : true
        }
    },
    messages: {
        realname : {
            required : '真实姓名为必填项'
        },
        username : {
            required : '登录名为必填项',
            rangelength : '登录名长度必须在5-8之间'
        },
        password : {
            required : '密码为必填项'
        },
        repassword : {
            equalTo : '两次密码输入不一致'
        },
        gender : {
            required : '性别必须选择一个'
        },
        age : {
            required : '年龄是必填项',
            //min : '年龄最小值是{0}',
            //max : '年龄最大值是{0}'
            range: '年龄必须在{0}和{1}之间'
        },
        education : {
            required : '学历信息是必填项'
        },
        birthday : {
            required : '出生日期是必填项',
            dateISO : '出生日期格式不正确'
        },
        hobby : {
            required : '兴趣爱好是必填项'
        },
        email : {
            required : '邮箱是必填项',
            email : '邮箱格式不正确'
        },
        card : {
            required : '身份证是必填项',
            cardFormat : '身份证格式不正确'
        }
    }
});
</script>

    ]
    },
    education : {
    required : true
    },
    birthday : {
    required : true,
    dateISO : true
    },
    hobby : {
    required : true
    },
    email : {
    required : true,
    email : true
    },
    card : {
    required : true,
    cardFormat : true
    }
    },
    messages: {
    realname : {
    required : ‘真实姓名为必填项’
    },
    username : {
    required : ‘登录名为必填项’,
    rangelength : ‘登录名长度必须在5-8之间’
    },
    password : {
    required : ‘密码为必填项’
    },
    repassword : {
    equalTo : ‘两次密码输入不一致’
    },
    gender : {
    required : ‘性别必须选择一个’
    },
    age : {
    required : ‘年龄是必填项’,
    //min : ‘年龄最小值是{0}’,
    //max : ‘年龄最大值是{0}’
    range: ‘年龄必须在{0}和{1}之间’
    },
    education : {
    required : ‘学历信息是必填项’
    },
    birthday : {
    required : ‘出生日期是必填项’,
    dateISO : ‘出生日期格式不正确’
    },
    hobby : {
    required : ‘兴趣爱好是必填项’
    },
    email : {
    required : ‘邮箱是必填项’,
    email : ‘邮箱格式不正确’
    },
    card : {
    required : ‘身份证是必填项’,
    cardFormat : ‘身份证格式不正确’
    }
    }
    });
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery去掉数组最后一个元素_从数组中删除最后一项
weixin_39907850的博客
12-29 2376
您可以使用以下.slice()方法执行此操作：arr.slice(0, -1); // returns [1,0]这是一个演示：var arr = [1, 0, 2];var newArr = arr.slice(0, -1); // returns [1,0]console.log(newArr);$('#div1').text('[' + arr + ']');$('#div2')...
JQ 删除字符串最后一个或几个字符的方法
php菜鸟技术天地
09-24 1万+
字符串：var s = "1,2,3,4,5," 目标：删除最后一个 "," 方法： s=s.substring(0,s.length-1)； s=s.substring(0,s.length-1)； 1修改成4，就是删除最后四位 注意：length  第一个字母：“l”一定要小写，“L”是错误的（Length），   转载：https://blog.csdn.net/dot...
js点击删除最后一个元素节点
Yiright的博客
12-22 1万+
这里是昵称 这里是未读信息条数 function remo(obj){ var test = obj.getElementsByClassName('test')[0]; var lastChild = obj.lastElementChild ? obj.lastElementChild : obj.lastChild; if(test ==
【jquery】删除数组最后一个元素与返回其它同级元素
mudarn的博客
02-27 2225
arr.pop(); $(this).siblings().removeClass("actived");
Jquery 删除最后一个元素
weixin_30426879的博客
04-21 2433
Jquery 删除最后一个元素 方法一： $(document).ready(function () { $(Element).eq(-1).remove(); }); 方法一： $onload(RemoveLastElement); function RemoveLastElement() { ...
jQuery基础语法实例入门
10-25
文章的结尾提醒读者，希望本文内容对于进行jQuery程序设计的朋友们有所帮助，也说明了文章中提供的实例仅作为基础入门，更多的功能和方法还需要读者们深入学习和掌握。总的来说，掌握jQuery的核心语法是进行Web前端...
jquery 指南/入门基础
10-30
### jQuery 指南/入门基础 #### 一、简介 jQuery 是一款快速、小巧且功能丰富的库。它极大地简化了 JavaScript 编程，并通过一个干净、统一的 API 提供了丰富的功能集，使得 DOM 操作、事件处理、动画以及 Ajax ...
jquery基础入门教程
04-13
1.第1章　jQuery入门　11.1　jQuery能做什么　11.2　jQuery为什么如此出色　21.3　第一个jQuery文档　31.3.1　下载jQuery　31.3.2　设置HTML文档　41.3.3　编写jQue... 2.第2章　选择符——取得你想要的一切　102.1...
jQuery基础入门
06-28
jQuery基础入门： jQuery简介 jQuery核心方法及DOM对象 事件与事件对象 jQuery中的Ajax jQuery工具函数
jQuery基础入门ppt
03-14
jQuery基础入门教程，可以随时查询，放到手机方便随时学习。
使用jquery删除列表元素中最后一个li元素
Ceremony_feeling的博客
10-27 4823
删除列表元素中最后一个li元素 代码: <div id="div07"> <ul> <li>元素1</li> <li>元素2</li> <li>元素3</li> <li>元素4</li> &l...
es5新增的数组方法
weixin_45488764的博客
09-08 314
常用数组元素的迭代方法： 1、 map()方法 返回一个新数组，新数组是原数组的映射； 不改变原数组的值； 新数组的元素值是每次函数return的返回值； 若不写return，接收的新数组的元素值将全为空； var arr = [20,13,11,8,0,11]; var brr = arr.map(function(item)){ //练习一：将数组的每个元素都将增加到原来的1.2倍 return item*1.2; // 此时brr为a数组每个元素的1.2倍 //练习二：若return 1，
jquery 利用splice（-1,1）删除数组最后一位数值
water_Popcorn的博客
01-18 1万+
代码： var x =[1,2,3,4,5]; //定义数组 var len = x.length; 方法一：获取数组长度，因为从0开始，所以len-1； x.splice(len-1,1); 方法二：splice(-1,1)：-1也表示数组最后一位数 x.splice(-1,1);
jquery去掉数组最后一个元素_jq获取最后一个元素
weixin_39791653的博客
12-19 558
展开全部jQuery 选择器中 :last 表示最后一个元素，所以表示含有某类属性32313133353236313431303231363533e58685e5aeb931333337616630的最后一个元素可用如下代码表示$("test-class:last") // 表示最后一个属于test-class类的元素示例如下：创建Html元素list-1list-2list-3list-4li...
jQuery删除列表元素中最后一个li元素
qq_45747484的博客
10-26 1175
<ul> <li>元素01</li> <li>元素02</li> <li>元素03</li> <li>元素04</li> <li id="01">元素05</li> </ul> <script type="...
jQuery - last-child 选择所有最后一个子元素 last最后一个元素
热门推荐
IT技术宅-北方的刀郎
03-21 2万+
$(document).ready(function(){ //$('div p:last').addClass("red"); //$('div p:last') 选择 最后一个P元素 并高亮显示得出结果如下: $('div p:last-child').addClass("red");//$('div p:last-child') 将选择所有位于div最后一个p子元素，并高亮: });P
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
最新发布
08-14
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
深度探索：神经网络在图像识别中的革命性应用
08-14
神经网络是一种受人脑结构启发的数学模型，它由大量的节点（或称为“神经元”）相互连接构成。这些节点通常组织成层，包括输入层、隐藏层和输出层。每个神经元可以接收来自前一层的输入，通过某种激活函数处理这些输入，然后将结果传递给下一层的神经元。 神经网络能够通过学习大量的数据来识别模式和特征，这使得它们在图像识别、语音识别、自然语言处理等领域有着广泛的应用。它们也可以用于预测、分类和回归等任务。 训练神经网络通常涉及到一个称为“反向传播”的过程，通过这个过程，网络可以调整其内部参数（权重和偏置），以便更好地完成特定的任务。这个过程通常需要大量的计算资源，并且伴随着梯度下降或其他优化算法来最小化损失函数，从而提高模型的性能。 随着深度学习技术的发展，神经网络变得更加复杂和强大，出现了各种类型的网络结构，比如卷积神经网络（CNNs）用于图像处理，循环神经网络（RNNs）用于序列数据，以及长短期记忆网络（LSTMs）等。
基础会计教学课件第十一章财务会计报告.pptx
08-14
基础会计教学课件第十一章财务会计报告.pptx
jQuery基础入门与实践指南
"jQuery基础教程是一本面向Web开发人员的实用指南，涵盖了jQuery选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转功能以及插件等内容。书中通过实例操作解决常见客户端问题，强调理论与实践的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值