• 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>
  • 相关阅读:
    2021.01.28 Rating赛 解题/补题报告
    2021.01.23 Rating赛 补题&解题报告
    ACM 实验室2020.11.08天梯赛练习*5
    6. Python 基础 dict 字典 查找方法 set() 集合 公共方法
    5. python 基础 list [] 列表 tuple () 元组
    4. python 操作字符串 字符串的一些方法
    3. python基础 转化字符类型 循环
    2. python 数据类型 格式化
    1. Python是编译性语言解释性语言 pyCharm 配置
    科二 教育教学知识与能力4
  • 原文地址:https://www.cnblogs.com/hechunfeng/p/15258300.html
Copyright © 2020-2023  润新知