Dom1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<style type="text/css">
ul{
background: pink;
}
ul li{
color: blueviolet;
list-style-type: none;
}
ul li.specail{
background: #23527C;
}
</style>
</head>
<body>
<ul class="list">
<li>one</li>
<li class="specail">two</li>
<li>three</li>
<li>
<ul class="sublist">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>

<script type="text/javascript">
$(function(){
$('li').on('click',function(e){
//阻止冒泡事件
e.stopPropagation()
//删除所有被点击按钮的兄弟元素
// $(this).siblings().remove();
//点击当前元素,就会将上一个元素隐藏
// $(this).prev().hide()


//删除某个类样式
// $(this).removeClass('specail');
//兄弟元素增加样式
// $(this).siblings().addClass('specail');
// $(this).removeClass('specail');
//
// $('ul').find('.specail').remove();
// $('ul').find('li').filter('.specail').hide()
})

})
</script>
<script type="text/javascript">
$(function(){
$('li').on('click',function(e){
e.stopPropagation()
//点击某个li,判断当前li是否拥有某种样式
if ($(this).is('.specail')) {
alert("有这个样式")
}else if($(this).not('.specail')){
alert('没有这个样式')
}

if($(this).parent().is('.sublist')){
$(this).hide()
}

})
})
</script>
</body>
</html>

posted @ 2020-06-03 08:11  Smile*^  阅读(165)  评论(0编辑  收藏  举报