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>