JS0基础学习笔记(1)
阅读原文时间:2023年07月11日阅读:2

为了须要,最近開始学习JS相关知识。基本的方式是通过看视频以及查阅相关手冊。并动手实践,亲手写出每一个小案例,以下是相关代码(每一个案例用分隔线隔开)。


设置一个元素是否可见

从前有座山,山上有座庙。庙里有个帅哥写代码



鼠标移入移出事件



二级菜单



改变物体外观



JS为元素加入事件



全选反选按钮



选项卡

从前有座山1
从前有座山2
从前有座山3
从前有座山4



             innerHTML练习                                                       

            从前有座山         
         




             月历选项卡                       
             

            
                123                 456                 789                 101112             
            
                             
        
    
    



             数组遍历                             



             属性用变量取代                                     

                  



             依据參数个数实现对应功能                            

         




             获取非行间样式                       
             

    
    

 




             数组的基本操作              
         
    




             定时器的使用              
                           
    




             数字时钟。须要相关图片辅助                       
             

                             :                              :                      
    
    



             字符串查找、系统时间                             



             孩子节点                                     

                
  •             
  •         
    



             父节点                                              

                
  • 从前有座山                 隐藏             
  •             
  • 山上有座庙                 隐藏             
  •             
  • 庙里有个老和尚                 隐藏             
  •             
  • 老和尚对着小和尚说                 隐藏             
  •             
  • 我们这里有座山                 隐藏             
  •             
  • 里面有个老和尚                 隐藏             
  •         
    



             父级的元素中                                     

                
  • 从前有座山
  •             
  • 山上有座庙
  •             
  • 庙里有个老和尚
  •             
  • 老和尚对着小和尚说
  •             
  • 我们这里有座山
  •             
  • 里面有个老和尚
  •         
    




    
        孩子节点
        
        
        
    
               

                
  • 从前有座山
  •             
  • 山上有座庙
  •             
  • 庙里有个老和尚
  •             
  • 老和尚对着小和尚说    
  •             
  • 我们这里有座山
  •             
  • 里面有个老和尚
  •         
    




    
        代码块封装思想
        
        
    
               

                
  • 从前有座山
  •             
  • 山上有座庙
  •             
  • 庙里有个老和尚
  •             
  • 老和尚对着小和尚说    
  •             
  • 我们这里有座山
  •             
  • 里面有个老和尚
  •         
    



             DOM 方式操作元素属性                                     我非常帅     




    
        加入节点
        
        
    
                               

            
    



             删除节点                                     

                
  • 111删除
  •             
  • 222删除
  •             
  • 333删除
  •             
  • 444删除
  •             
  • 555删除
  •             
  • 666删除
  •             
  • 777删除
  •         
    



             节点碎片                                     

            
    




    
        表格基本属性
        
        
    
             

                                                                                                                                                                                                                                                                                                                                                                                                                       
ID姓名年龄
1李俊18
2李白96
3小明17
4李俊18
5 李白96
6小明17
    




    
        表格自己主动添加行数
        
        
    
             姓名:         年龄:                  

                                                                                                                                                                                                                                                  
ID姓名年龄
1李俊18
2李白96
3小明17
    




    
        表格自己主动删除单元格
        
        
    
             

                                                                                                                                                                                                                                                  
ID姓名年龄编辑
1李俊18删除
2李白96删除
3小明17删除
    




    
        表格搜索
        
        
    
             姓名:                  

                                                                                                                                                                                                                                                  
ID姓名年龄
1李俊18
2李白96
3小明17
    



             字符串查找                                 




    
        加入孩子节点,会先删除原来所在的位置
        
        
        
    
             

                
  • 1
  • 2
  • 3
  •             
  • 4
  • 5
  • 6
  •             
  • 7
  • 8
  • 9
  •         
        
                 




        
            列表排序
            
            
            
        
                          

                  
    • 99
    •             
    • 48
    •             
    • 25
    •             
    • 97
    •             
    • 3
    •             
    • 38
    •             
    • 26
    •             
    • 49
    •         
        




        
            表格排序
            
            
        
                          

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
    ID姓名年龄
    1李俊18
    7张三16
    3王五25
    6马云17
    2小三9
    5小芳36
    4君君14
        



                 定时器的使用                                              

        



                 物体的运动                                                           

        




        
            无缝滚动 -By小小俊
            
            
            
        
                                   

                
                      
    •                 
    •                 
    •                 
    •             
            
             




        
            分享按钮
            
            
            
        
                 

                分享到         
        



                 淡入淡出                                              

                         
        



                 缓冲运动                                              

            

        



                 第一个孩子节点                                     

                  
    • 从前有座山
    •             
    • 山上有座庙
    •             
    • 庙里有个老和尚
    •             
    • 老和尚对着小和尚说    
    •             
    • 我们这里有座山
    •             
    • 里面有个老和尚
    •         
        



                 运动停止边界问题                                              

            

        



                 对联效果                                              

        




        
            多物体运动(卡住现象)
            
            
            
        
                 

            
            
        




        
            多物体运动(解决卡住现象)
            
            
            
        
                          

            
            
        




        
            多物体渐变(属性不能公有)
            
            
            
        
                 

            
            
            
        



                 offset问题                                              

        



                 offset问题(修复)                                              

        




        
            多物体运动框架(不能实现渐变)
            
            
            
        
                 

    从前有一座山
        




        
            多物体运动框架(实现渐变)
            
            
            
        
                 

    从前有一座山
        



                 浮点数误差                                          




                 链式运动                                
                 

        
        




                 运动框架小问题(不能多个属性同一时候运动)                                
                 

        
        




                 解决运动框架小问题(多个属性同一时候运动)                                
                 

        
        




        
            留言板案例
            
            
            
        
                                   

          
          

      手机扫一扫

      移动阅读更方便

      阿里云服务器
      腾讯云服务器
      七牛云服务器

      你可能感兴趣的文章