Wab开发——jQuery进阶

最新推荐文章于 2023-06-15 10:25:57 发布

不辞树

最新推荐文章于 2023-06-15 10:25:57 发布

阅读量219

点赞数 3

分类专栏：笔记 java Java ee 文章标签： js 列表 javascript html jquery

本文链接：https://blog.csdn.net/weixin_44051191/article/details/114839078

版权

笔记同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

java

9 篇文章 0 订阅

订阅专栏

Java ee

8 篇文章 0 订阅

订阅专栏

jQuery进阶

动画效果
事件
Jquery的文档操作
validate插件
正则表达式

动画效果

基本效果

show(speed,fn);显示
speed:速度，“slow”,“normal”,"fast"或者毫秒数
fn:回调函数,动画执行完毕后，自动执行该函数
hide(speed,fn);隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					$("img").show(5000,function(){
						alert("轻轻的我来了...");
					});
				});
				
				$("#btn1").click(function(){
					$("img").hide(5000,function(){
						alert("轻轻的我走了,不带走一片云彩...不要想我...");
					});
				});
			});
		</script>
	</head>
	<body>
		<img src="../img/VCG41560336195.jpg" style="display:none" />
		<input type="button" id="btn" value="显示">
		<input type="button" id="btn1" value="隐藏">
	</body>
</html>

滑动效果

通过改变元素的高度来实现显示与隐藏
1.slideDown(speed,fn); 显示
2.slideUp(speed,fn);隐藏

淡入淡出

通过改变元素的不透明度实现显示与隐藏
1.fadeIn(speed,fn);显示
2.fadeOut(speed,fn);隐藏

事件

bind(type,fn):给标签添加一个或者多个事件。
type:添加事件的类型,比如 "click"，"blur"...
fn：执行对应事件的函数，操作
-------------------------------------
给标签添加事件方式：
$obj.事件名(function(){

});
事件名:
click
change
focus
blur
mouseover
mouseout
keyup
keydown
submit

Jquery的文档操作

添加

内部插入：
append();将标签添加到父标签内容的最后位置
prepend();将标签添加到父标签内容的最前边的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				border: 1px solid blue;
			}
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#append").click(function(){
					$("ul").append("<a href='#'>百度一下1</a>");
				})
				$("#prepend").click(function(){
					$("ul").prepend("<a href='#'>百度一下2</a>");
				})
			});
		</script>
	</head>
	<body>
		<ul style="border: 1px solid red;">
			<li>第一个列表项</li>
			<li>第二个列表项</li>
			<li>第三个列表项</li>
			<li>第四个列表项</li>
		</ul>
		<input type="button" value="append" id="append"/>
		<input type="button" value="prepend" id="prepend"/>
	</body>
</html>

after()添加到指定标签的后边
before()添加到指定标签的前边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				border: 1px solid blue;
			}
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//第二个列表项前添加一个超链接
				$("#before").click(function(){
					$("ul li:eq(1)").before("<a href='#'>百度一下</a>");
				})
				//第二个列表项后添加一个超链接
				$("#after").click(function(){
					$("ul li:eq(1)").after("<a href='#'>百度一下</a>");
				})
			});
		</script>
	</head>
	<body>
		<ul style="border: 1px solid red;">
			<li>第一个列表项</li>
			<li>第二个列表项</li>
			<li>第三个列表项</li>
			<li>第四个列表项</li>
		</ul>
		<input type="button" value="after" id="after"/>
		<input type="button" value="before" id="before"/>
	</body>
</html>

删除

empty():清空所有子标签
remove();移除指定标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					$("ul").empty();
				})
				$("#btn2").click(function(){
					$("ul li:eq(1)").remove();
				})
			});
		</script>
	</head>
	<body>
		<ul style="border: 1px solid red;">
			<li>第一个列表项</li>
			<li>第二个列表项</li>
			<li>第三个列表项</li>
			<li>第四个列表项</li>
		</ul>
		<input type="button" value="清空empty" id="btn"/>
		<input type="button" value="删除第二个列表项" id="btn2"/>
	</body>
</html>

修改

1.修改标签内容
html()
text()
val()
2.修改标签属性
attr();获取或者设置属性值,能够获取或者设置所有属性的值(包含自定义属性)
prop();获取或者设置属性,只能够获取或者设置自带的属性
3.修改标签样式
addClass(classes)给匹配的标签添加class属性与值
classes:可以是一个或者多个值，当是多个值的时候，以空格隔开就可以了
removeClass():删除指定的类或者所有的类
toggleClass()：如果存在（不存在）就删除（添加）一个类。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$("#provice").change(function(){
					var arr = new Array();
					arr[0]=["海淀区","朝阳区","东城区","大兴区","西城区","通州区","顺义区","昌平区"];
					arr[1]=["郑州市","安阳市","周口市","洛阳市","濮阳市","驻马店","漯河市"];
					arr[2]=["石家庄","唐山市","保定市","邯郸市","廊坊市","邢台市","张家口","衡水市"]
					//获取当前选中项的value值
					var index = $(this).val();
					//console.log(index);
					var citys = arr[index];
					//将对应市区的数组中的值显示到第二个下拉选列表中
					$obj = $("#city");
					//将列表项清空
					$obj.empty();
					$obj.append("<option>请选择</option>");
					$(citys).each(function(i,dom){
						$obj.append("<option>"+dom+"</option>");
					});
				});
			});
		</script>
	</head>
	<body>
		<select  id="provice">
			<option value="-1">请选择</option>
			<option value="0">北京</option>
			<option value="1">河南</option>
			<option value="2">河北</option>
		</select>省/市
		<select  id="city">
			<option value="">请选择</option>
		</select>
		市/区
	</body>
</html>

样式添加与修改案例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 1px solid red;
				height: 300px;
			}
			.c1{
				background: #0000FF;
			}
			.c2{
				background: #FF0000;
			}
			.c3{
				width: 300px;
			}
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#div").hover(function(){//鼠标移入
					$(this).removeClass("c2");
					$(this).addClass("c1 c3");
				},function(){//鼠标移出
					$(this).addClass("c2");
				});
			})
		</script>
	</head>
	<body>
		<div id="div">
			
		</div>
	</body>
</html>

validate插件

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
特点：
（1）内置验证规则。拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则。。
（2）自定义验证规则。可以很方便地自定义验证规则。
（3）简单，强大的信息提示。默认了验证信息提示，并提供自定义覆盖默认的提示信息的功能。
（4）实时验证：通过keyup 或是blur事件来触发校验，而不仅仅是提交的时候进行校验。
不辞树

引入
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
注意引入顺序

正则表达式

正则表达式创建：
var reg =/正则/;
比如:
var reg=/^ad$/;

不辞树

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
			 $(d1).blur(function(){
				var a=/^[A-z0-9]{2,5}_$/;
				if (a.test($(this).val())) {
					alert("匹配");
				} else{
					ale rt("不匹配");
				}
			  });
			});
		</script>
	</head>
	<body>
		<input type="text" name="" id="d1" value="" />
	</body>
</html>

不辞树

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
Wab开发——jQuery进阶

jQuery进阶动画效果基本效果滑动效果淡入淡出事件Jquery的文档操作添加删除修改validate插件正则表达式动画效果基本效果show(speed,fn);显示speed:速度，“slow”,“normal”,"fast"或者毫秒数fn:回调函数,动画执行完毕后，自动执行该函数hide(speed,fn);隐藏<!DOCTYPE html><html> <head> <meta charset="utf-8"> <titl
复制链接

扫一扫

专栏目录