Nearth===>WEB前端--第22课/JQuery/获取兄弟元素的方法2（链式编程以及断链解决方法:end()）

最新推荐文章于 2023-08-15 22:16:10 发布

码字界陈冠希

最新推荐文章于 2023-08-15 22:16:10 发布

阅读量115

点赞数

分类专栏： WEB前端第三季/JQuery

本文链接：https://blog.csdn.net/ly1716/article/details/103057358

版权

WEB前端第三季/JQuery 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

代码学习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nearth</title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	    <style type="text/css">
	    	ul{
				list-style-type: none;//去点
				width:200px;
				position: absolute;
				left:500px;
			}
			ul li{
				margin-top: 10px;
				cursor: pointer;
				text-align: center;
				font-size: 20px;
			}
	    </style>
		<script type="text/javascript">
			//要求：获取ul 中所有的li,有鼠标进入事件,鼠标离开事件,点击事件
			$(function(){
				$("ul>li").mouseover(function(){
					$(this).css("backgroundColor","red").siblings().css("backgroundColor","");
				}).mouseleave(function(){
					$(this).css("backgroundColor","").siblings().css("backgroundColor","");
				}).click(function(){
					//当前元素后面的所有兄弟元素背景颜色为黄色
					/* $(this).prevAll().css("backgroundColor","yellow"); */
					//当前元素后面的所有兄弟元素背景颜色为蓝色
					/* $(this).nextAll().css("backgroundColor","blue"); */
					//链式编程代码
					//断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了
					//解决断链-->恢复到断链之前的一个效果-->修复断链
					//.end()方法可以恢复到断链之前的效果
					$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
				});
			})
		</script>
	</head>
	<body>
		<h1>获取兄弟元素的方法练习1</h1>
		<hr >
		<ul>
			<li>红烧土豆</li>
			<li>清蒸豆腐</li>
			<li>油炸菠菜</li>
			<li>宫保鸡丁</li>
			<li>干爆青蛙</li>
			<li>火烧赤壁</li>
			<li>可口可乐</li>
			<li>加多宝茶</li>
			<li>啥几把玩意儿</li>
		</ul>
	</body>
</html>

想办法让自己的每一天过的有意义····································

码字界陈冠希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nearth===>WEB前端--第22课/JQuery/获取兄弟元素的方法2（链式编程以及断链解决方法:end()）

代码学习：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-...
复制链接

扫一扫