06.WEB-HTML之JQuery标签学习总结(二)

最新推荐文章于 2021-11-26 16:40:32 发布

「已注销」

最新推荐文章于 2021-11-26 16:40:32 发布

阅读量323

点赞数 1

分类专栏： JAVAEE

本文链接：https://blog.csdn.net/AlexMoonStriver/article/details/79160300

版权

JAVAEE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一案例1:省市联动

1.1 相关函数

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

1.1.1 属性操作：val / text / html

val() 获得value属性的值

val(...) 给value属性设置值

html() 获得html代码，如果有标签，一并获得

html(...) 设置html代码，如果有标签，将进行解析。

text() 获得文本，如果有标签，忽略。

text(...) 设置文本，如果含有标签，不进行解析。原样输出。

1.1.2 遍历函数：each()

方式1：￥(ele).each(fn);

方式2：$.each($ele,fn);

回调函数fn： function(index,docEle)

参数1：遍历索引号

参数2：遍历当前对象 docEle == this(dom对象)

1.1.3 文档处理：内部插入

A.append(B) ,将B插入到A内部后面

<A>
...
<B></B>
</A>

A.prepend(B) ,将B插入到A内部前面

<A>
<B></B>
...
</A>

A.appendTo(B) ,将A插入到B内部后面

A.preappendTo(B), 将A插入到B内部前面

1.2 案例实现

<script>
			$(function(){
				//2.创建二维数组用于存储省份和城市
				var cities = new Array(3);
				cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
				cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
				cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
				cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
				
				$("#province").change(function(){
					//10.清除第二个下拉列表的内容
					$("#city").empty();
					
					//1.获取用户选择的省份
					var val = this.value;
					//alert(val);
					//3.遍历二维数组中的省份
					$.each(cities,function(i,n){
						//alert(i+":"+n);
						//4.判断用户选择的省份和遍历的省份
						if(val==i){
							//5.遍历该省份下的所有城市
							$.each(cities[i], function(j,m) {
								//alert(m);
								//6.创建城市文本节点
								var textNode = document.createTextNode(m);
								//7.创建option元素节点
								var opEle = document.createElement("option");
								//8.将城市文本节点添加到option元素节点中去
								$(opEle).append(textNode);
								//9.将option元素节点追加到第二个下拉列表中去
								$(opEle).appendTo($("#city"));
							});
						}
					});
					
				});
			});
		</script>

二案例2:左右选择

2.1 相关函数

2.1.1 常见事件

2.1.2 事件切换

hover(over,out) 简化方法

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

toggle(fn1,fn2,....) click事件曾强班，轮回

2.2 案例实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表左右选择</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				/*1.选中单击去右边*/
				$("#selectOneToRight").click(function(){
					$("#left option:selected").appendTo($("#right"));
				});
				
				/*2.单击全部去右边*/
				$("#selectAllToRight").click(function(){
					$("#left option").appendTo($("#right"));
				});
				
				/*3.选中双击去右边*/
				$("#left option").dblclick(function(){
					$("#left option:selected").appendTo($("#right"));
				});
			});
		</script>
	
	</head>
	<body>
		<table border="1" width="600" align="center">
			<tr>
				<td>
					分类名称
				</td>
				<td>
					<input type="text" name="cname" value="手机数码"/>
				</td>
			</tr>
			<tr>
				<td>
					分类描述
				</td>
				<td>
					<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
				</td>
			</tr>
			<tr>
				<td>
					分类商品
				</td>
				<td>
					<span style="float: left;">
						<font color="green" face="宋体">已有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
							<option>IPhone6s</option>
							<option>小米4</option>
							<option>锤子T2</option>
						</select>
						<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
						<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
					</span>
					<span style="float: right;">
						<font color="red" face="宋体">未有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
							<option>三星Note3</option>
							<option>华为6s</option>
						</select>
						<p><a href="#" ><<</a></p>
						<p><a href="#" ><<<</a></p>
					</span>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type='submit' value="修改"/>
				</td>
			</tr>
		</table>
	</body>
</html>

2.3 效果图

三案例3：表单校验

3.1 相关知识：validation校验

3.1.1 下载：

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

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

目录结构：

3.1.2 导入

validate是jQuery插件，及必须在jQuery的基础上进行运行，因此导入jQuery库 validate库和国际化资源库

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<!--引入validate插件js文件-->
		<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
		<!--引入国际化js文件-->
		<script type="text/javascript" src="../js/messages_zh.js" ></script>

3.1.2 相关函数

3.2 案例实现

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<!--引入validate插件js文件-->
		<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
		<!--引入国际化js文件-->
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		<script>
			$(function(){
				$("#registForm").validate({
					rules:{
						user:{
							required:true,
							minlength:3
						},
						password:{
							required:true,
							digits:true,
							minlength:6
						},
						repassword:{
							required:true,
							equalTo:"[name='password']"
						},
						email:{
							required:true,
							email:true
						},
						username:{
							required:true,
							maxlength:5
						},
						sex:{
							required:true
						}
					},
					messages:{
						user:{
							required:"用户名不能为空!",
							minlength:"用户名不得少于3位!"
						},
						password:{
							required:"密码不能为空!",
							digits:"密码必须是整数!",
							minlength:"密码不得少于6位!"
						},
						repassword:{
							required:"确认密码不能为空!",
							equalTo:"两次输入密码不一致!"
						},
						email:{
							required:"邮箱不能为空!",
							email:"邮箱格式不正确!"
						},
						username:{
							required:"姓名不能为空!",
							maxlength:"姓名不得多于5位!"
						},
						sex:{
							required:"性别必须勾选!"
						}
					},
					errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
					success: function(label) { //验证成功后的执行的回调函数
						//label指向上面那个错误提示信息标签label
						label.text(" ") //清空错误提示消息
							.addClass("success"); //加上自定义的success类
					}
				});
			});
		</script>

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06.WEB-HTML之JQuery标签学习总结(二)

目录能够使用jQuery为标签添加属性或者样式能够为制定标签添加子标签或兄弟标签学会个标签绑定事件一案例1:省市联动1.1 相关函数本案例需要对标签的value属性值，标签体内容进行操作，并需要遍历所有的市1.1.1 属性操作：val / text / htmlval() 获得value属性的值val(...) 给value属性设置值html()
复制链接

扫一扫