jqDOM操作（二）

最新推荐文章于 2024-02-28 16:51:01 发布

家里有蜘蛛

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量245

点赞数 2

分类专栏： # jQuery

本文链接：https://blog.csdn.net/qq_44983621/article/details/100568934

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jqueryDOM操作（二）

获取子元素

$('li').first()
$('li').first().hide()// 隐藏......
$('li').eq(0)//下标找
$('li:first').show()//通过伪类获取

获取父节点

$('li').parent()

获取兄弟节点

$('li').eq(0).siblings()

下面还有一些具体的DOM操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<style type="text/css">
			ul{
				background-color: red;
				list-style: none;
			}
			.special{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<ul class="list">
			<li>one</li>
			<li class="special">two</li>
			<li>three</li>
			<li>
				<ul class="sublist">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>
		</ul>
	</body>
	<script type="text/javascript">
		$(function(){
			$('li').on('click',function(event){
				event.stopPropagation();
				// 删除兄弟节点
				//$(this).siblings().remove();
				//删除某个类的样式
				//$('li').removeClass('special');
				//隐藏下一个 和前一个
				// $(this).next().hide();
				// $(this).prev().hide();
				//给兄弟元素添加样式
				// $(this).removeClass('special');
				// $(this).siblings().addClass('special');
				//从类名find 找到对应的元素 find需要的父级 filter 下面两种写法一样
				$('ul').find('li').filter('.special').hide();
				$('li').filter('.special').hide(); 
			})
			
		})
	</script>
</html>