Jquery闪耀的地方，dom遍历，过滤查找的例子 

+Tenus One <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">
     .special{
        color: blue;
    }

  </style>

    <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
  </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>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- <script src="js/bootstrap.min.js"> -->
<script type="text/javascript">
    

    $(function(){
        
            //section one
        $('li').on('click',function(){
            // 例子1
            // $(this).next().hide();//点击下一个隐藏
            
            //例子2
            // $(this).next().remove();
            
            //例子3
            // $(this).siblings().remove();//相邻的函数
            
            //例子4
            // $(this).siblings().addClass('special');
            
            //例子5
            // $(this).removeClass('special');
            // $(this).siblings().addClass('special');
            
            //例子6
            // $(this).parent().addClass('special');
            
            //例子7
            // $(this).closest('.list').addClass('special');//向上找list
            
        })
        
        
        
        
            //过滤  section two
            $('.list').on('click',function(){
                //例子1
                // $(this).find('li').addClass('special');
                
                //例子2
                // $(this).find('li').filter(':first').addClass('special');
                
                //例子3
                 // $(this).find('li').filter('.special').remove();
                 // 或者
                 // $(this).find('.special').remove();
                 // find是非常good
            })
        
        
        
        
        
        
            //section three
            // 第一块
            $('li').on('click',function(){
                //例子1
                // $(this).hide();
                // if($(this).is('.special')){
                //     alert('special');
                // }
                
                //例子2
                // $(this).hide();
                // if($(this).not('.special')){
                //     alert('not special');
                // }     
            })
            
            
            
            //section four
            // 第二块
            //例子3 只想在子元素点击隐藏一个li
            $('li').on('click',function(){
                console.log('clicked li');
                if($(this).parent().is('.sublist')){
                    $(this).hide();
                }
            })
            
        
    })
</script>
    

  
  </body>
</html>

 

posted @ 2021-09-12 15:40  漫漫长路</>  阅读(42)  评论(0)    收藏  举报