第三章

最新推荐文章于 2022-06-24 15:11:23 发布

小小萌新倪

最新推荐文章于 2022-06-24 15:11:23 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/qq_43366068/article/details/102781017

版权

在jQuery中，执行完mouse事件和mouseout事件后，都将返回当前的对象，所以可以进行链式操作
下列实例中就应用了链式操作为元素绑定事件：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript"  src="js/jquery-1.11.1.min.js"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="../jsp/1.jpg" width="1357" height="570" />
		<div style="float: right;text-align: right;">
			<a href="index.html">首页</a>
			&nbsp;| &nbsp;<a href="index.html"  class="main">登陆</a>
			&nbsp;| &nbsp;<a href="index.html"  class="main">注册</a>
			&nbsp;| &nbsp;<a href="index.html"  class="main">找回密码</a>
		</div>
		<script type="text/javascript">
		$(document).ready(function(){
			$("a.main").mouseover(function(){
				widow.status="http://www.mrbccd.com";return true;
			}).mouseout(function(){
				window.status="完成";return true;
			});
		});	
			</script>
	</body>
</html>

prev＋next选择器小小例子如下

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

<script type="text/javascript"src="jquery-1.11.1.min.js"></script></head>
	
	<table width="98%"border="0"align="center"cellpadding="0"cellspacing="1"bgcolor="#CCEEFF">
    <tr>
		<td width="11%"height="27">编号</td>
		<td width="14%">祝福对象</td>
		<td width="12%">祝福着</td>
		<td witdh="33%">字条内容</td>
		<td width="30%">发送时间</td>
	</tr>
	<tr>
		<td height="27">1</td>
        <td>齐齐</td>
         <td>妈妈</td>
		 <td>愿你健康快乐成长</td>
		 <td>2011001-220</td>
		 </tr>
	</table>
	<style type="text/css">
		td{
			font-size: 12px;
			padding: 3px;
		}
		.th{
			background-color: aqua;
			font-weight: bold;
			text-align: center;
		}
		.even{
			background-color: blueviolet;
		}
		.odd{
			background-color: #F9FCEF;
		}
	</style>
	<script type<body>
	</body>
</html>

完善监测机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div>检测这个页面</div>
		<script type="text/javascript">
			alert(document.getElementById("mr").value);
		</script>
	</head>
	<body>
	</body>
</html>

复合选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
		<p class ="default">P 元素</p>
		<div class="default">div 元素</div>
		<span class="default" id="span"> ID 为span元素</span>
		<input type="button" value="为div元素和ID为span的元素互换"/>
		<script type="text/javascript">
			$(document).ready(function(){
				$("input[type=button]")..click(function(){
					$("div,#span").addClass("change");
				});
			});
		</script>
	</head>
	<body>
	</body>
</html>

fuziling

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

	
	</head>
<from id="forml" name="forml" method="post" action="">
	姓&nbsp;&nbsp;名：<input type="text" name="name" id="name"/>
	<br/>
	籍&nbsp;&nbsp;贯:<input name="native" type="text" id="native" />
	<br/>
	生&nbsp;&nbsp;日:<input type="text"name="birthday" id="birthday" />
	<br/>
	E-mail:<input type="text"name ="email"id="email"/>
	<br/>
	<span>
		<input type="button" name="change"id="change" value="换肤"/>
		
	</span>
	<input type="button"name="default" id="default" value="恢复默认"/>
	<br/>
	
</from>
<style type="text/css">
	input{
		margin:5px;
		
	}
	.input{
		font-size;12pt;
		color:#333333;
		background-color: #cef;
		border:1px solid #000000;
		
	}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		$("#change").click(function(){
			$("form>input").addClass("input");
			
		});
		$("#default").click(function(){
			$("from>input").removeClass("input");
		});
		
	});
</script>
	<body>
	</body>
</html>

层次选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript"src="jquery-1.11.1.min.js"></script>
		<div id="buttom">
			<ul>
				<li>技术服务热线：400-6451-44411 传真：0431-8972266 企业邮箱：mingrisofr@mingesido.com</li>
				<li>Copyright&copy;www.mrbccd.com All Right Reserved!</li>
				
			</ul>
		</div>
		<ul>
			<li>技术服务热线：400-675-1066 传真：0431-84972266 企业邮箱：mingrisoft@mingrisoft.com</li>
			<li>Copyright&copy;www.mrbccd.com All Right Reserved</li>
		</ul>
		<style type="text/css">
			#buttom{
				background-image;url(images/bg_bottom.jps);
				width:800px;
				height:58px;
				clear: both;
				text-align: center;
				padding-top: 10px;
				font-size: 9pt;
			}
			.copyright{
				color: #00FFFF;
			list-style: none;
			line-height: 30px;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				$("div ul").addClass("copyright");
			});
		</script>
	</head>
	<body>
	</body>
</html>

第三章知识点整理

jQuery选择器的优势：
代码更简单，支持css1到css3选择器，完善的监测机制
基本选择器：
ID选择器（#id），
在这里插入图片描述
元素选择器（element），

类名选择器（.class），

复合选择器（selector1，selector2.selectorN），

通配符选择器（*），使用选择器隐藏超链接地址

层次选择器：
ancestor descenda选择器，parent>child选择器，prev＋next选择器，prev~siblings选择器
过滤选择器：
简单过滤器，

在这里插入图片描述内容过滤器，

可见性过滤器，

表单对象的属性过滤器，
在这里插入图片描述
子元素过滤器

属性选择器

在这里插入图片描述

表单选择器
在这里插入图片描述

小小萌新倪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三章

在jQuery中，执行完mouse事件和mouseout事件后，都将返回当前的对象，所以可以进行链式操作下列实例中就应用了链式操作为元素绑定事件：<!DOCTYPE html><html> <head> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></...
复制链接

扫一扫