• 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>
  • 相关阅读:
    mysql索引创建和使用细节(二)
    mysql索引创建和使用细节(一)
    PHP7.2.6安装sodium扩展
    passwd修改密码失败,报鉴定令牌操作错误
    centos6升级python版本至python3.5
    centos6升级gcc版本
    elasticsearch中文手册
    MySQL主从仅同步指定库
    适用于Centos6/7,vsftp自动安装脚本
    Redis内存模型
  • 原文地址:https://www.cnblogs.com/hechunfeng/p/15258300.html
Copyright © 2020-2023  润新知