Nearth===>WEB前端--第22课/JQuery/获取兄弟元素的方法1（next(),prev(),siblings()理论学习）

最新推荐文章于 2021-06-28 16:14:15 发布

码字界陈冠希

最新推荐文章于 2021-06-28 16:14:15 发布

阅读量212

点赞数

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

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

版权

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">
	    	
	    </style>
		<script type="text/javascript">
			$(function(){
				//要求:获取ul 中所有的li,为每个li 注册鼠标进入的事件,
				//当前元素获取到,当前元素的兄弟元素进行操作
				$("#u>li").mouseover(function(){
					//.next();获取的是当前元素的下一个兄弟元素
					/* $(this).next().css("backgroundColor","green"); */
					//.nextAll();获取的是当前元素的后面所有的兄弟元素
					/* $(this).nextAll().css("backgroundColor","green"); */
					//.prev();获取的是当前元素的前一个兄弟元素;
					/* $(this).prev().css("backgroundColor","green"); */
					//.prevAll();获取的当前元素的前面的所有兄弟元素;
					/* $(this).prevAll().css("backgroundColor","green"); */
					//.sibings();获取的是当前元素的所有的兄弟元素(自己除外)
                    $(this).siblings().css("backgroundColor","green");					
				})
				
			})
		</script>
	</head>
	<body>
		<h1>获取兄弟元素的方法</h1>
		<hr >
		<ul id="u">
			<li>红烧土豆</li>
			<li>清蒸豆腐</li>
			<li>油炸菠菜</li>
			<li>宫保鸡丁</li>
			<li>干爆青蛙</li>
			<li>火烧赤壁</li>
		</ul>
	</body>
</html>

注意：我写的代码里有理论知识的注释，可以认真看看·················