05.jquery

最新推荐文章于 2024-05-20 11:40:56 发布

故园风雨前丶

最新推荐文章于 2024-05-20 11:40:56 发布

阅读量99

点赞数

分类专栏： html 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_54066105/article/details/124953714

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、jquery事件

jquery事件没有前缀on

二、jquery中的动画

2.1显示与隐藏动画

隐藏 hide（参数一，参数二）

显示 show（参数一，参数二）

显示或隐藏 toggle（参数一，参数二）

参数一是显示或者隐藏的速度，参数二是显示或者隐藏后的执行的函数名称

2.2淡入淡出动画

淡入 fadein（参数一，参数二）

淡出 fadeout（参数一，参数二）

淡入或者淡出 fadeToggle（参数一，参数二）

参数一是淡入淡出效果时间，参数二是完成淡入淡出后执行函数的名称

2.3滑动动画

向下滑（显示）slideDown（）

向上滑（隐藏）slideUp（）

向下向上滑（显示隐藏）slideToggle（）

2.4自定义动画

注意点：自定义动画需要加上定位

语法：

$(选择器名称).animate({

属性：属性值，

属性：属性值

}）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<img style="width: 200px;height: 200px;position: absolute;" src="img/QQ图片20210419113833.jpg" /> 
		<script>
			$("img").mouseover(function(){
				$("img").animate({
					left:'200px',
					width:'400px',
					height:'400px',
				});
				
			});
			$("img").mouseleave(function(){
				$("img").animate({
					left:'150px',
					width:'200px',
					height:'200px',
				});
				
			});
		</script>
	</body>
</html>

三、jquery-DOM

和js中的innerText和innerHtml,value相像，

注意prop（）可以设置与获取标签属性值

四、追加元素

在被选中元素结尾插入内容 append（）

在被选定的元素开头插入内容 prepend（）

在被选定的元素之后插入内容（在上面） after（）

在被选定的元素之前插入内容（在下面） before（）

区别之处

append是在标签内对元素内容进行追加

after是在标签下面对元素进行追加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<style>
			#tv_1{
				border: red solid 1px;
			}
		</style>
	</head>
	<body>
		<p id="tv_1">hello</p>
		<p><input type="button" value="点击1" /> </p>
		<script>
			$("p input").click(function(){
				/*$("#tv_1").append("<p>???</p>")*/
				$("#tv_1").after("<p>???</p>")
			})
		</script>
	</body>
</html>

五、删除元素

六、jquery操作类样式

被选元素添加一个或多个类 addClass（）

被选元素删除一个类或多个类 removeClass（）

添加或删除 toggleClass（）

七、jquery操作css样式

语法：

$("选择器").css({"属性名":"属性值"，“属性名”：“属性值”}）

八、validate前端验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.js" ></script>
		<script type="text/javascript" src="js/messages_zh.js" ></script>
		<style>
			label{
				color:deeppink;
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<form id="f1" method="get" action="增加样式.html">
			<table border="1" width="100%" cellpadding="0" cellspacing="0">
				<tr>
					<td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td>
				</tr>
				<tr>
					<td>用户名（必填字段，长度范围6~10）</td>
					<td colspan="2">
						<input type="text" name="username"  />
					</td>
				</tr>
				<tr>
					<td>Email（符合邮件格式）</td>
					<td colspan="2">
						<input type="text" name="email" />
					</td>
				</tr>
				<tr>
					<td>出生日期（日期格式）</td>
					<td colspan="2">
						<input type="text" name="birthday" />
					</td>
				</tr>
				<tr>
					<td>薪资（数字）</td>
					<td colspan="2">
						<input type="text" name="sal" />
					</td>
				</tr>
				<tr>
					<td>一天工作时长（值范围6~16）</td>
					<td colspan="2">
						<input type="text" name="workForday" />
					</td>
				</tr>
				<tr>
					<td>密码（必须填写）</td>
					<td colspan="2">
						<input type="text" name="pwd" id="pwd"/>
					</td>
				</tr>
				<tr>
					<td>确认密码（必须填写，且与密码值要相同）</td>
					<td colspan="2">
						<input type="text" name="repwd" />
					</td>
				</tr>
				<tr>
					<td></td>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
		<script>
			$(function(){
				$("#f1").validate({
					rules:{
						username:{
							required:true,
							rangelength:[6,10]
						},
						email:{
							email:true
						},
						birthday:{
							dateISO:true
						},
						sal:{
							number:true
						},
						workForday:{
							range:[6,16]
						},
						pwd:{
							required:true
							
						},
						repwd:{
							required:true,
							equalTo:pwd
						}
					},
					messages:{
						repwd:{
							required:"密码要填哦",
							equalTo:"密码要一样啊！到底懂不懂啊！"
						},
						workForday:{
							rangelength:"时间不够，继续加班！"
						},
						username:{
							required:"用户名要填的呀！"
						}
					}
					
				});
			});
		</script>
	</body>
</html>

九、过滤选择器

十、层级选择器

十一、属性选择器

故园风雨前丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05.jquery

一、jquery事件jquery事件没有前缀on二、jquery中的动画2.1显示与隐藏动画隐藏 hide（参数一，参数二）显示 show（参数一，参数二）显示或隐藏 toggle（参数一，参数二）参数一是显示或者隐藏的速度，参数二是显示或者隐藏后的执行的函数名称2.2淡入淡出动画淡入 fadein（参数一，参数二）淡出 fadeout（参数一，参数二）淡入或者淡出 fadeToggle（参数一，参数二）参数一是淡入淡出效果时间，参数二是完成淡入淡出后执行
复制链接

扫一扫