jqDOM操作(二)

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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章