Python JQuery 错题集。。

1.表单验证

  绑定的事件还没触发,就已经执行过了,  按钮还没按下,就已经显示span内容了
  问题原因:绑定错事件了,把所有的 Input 都绑定了事件...
  

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .item{
 8             width: 250px;
 9             height: 60px;
10             position: relative;
11         }
12         .item input{
13             width: 200px;
14         }
15         .item span{
16             position: absolute;
17             top: 20px;
18             left: 20px;
19             font-size: 8px;
20             opacity: 0.8;
21         }
22     </style>
23 </head>
24 <body>
25     <div>
26         <form>
27             <div class="item">
28                 <input type="text" name="username" label="用户名">
29 <!--                <span>用户名不能为空</span>-->
30             </div>
31             <div class="item">
32                 <input type="password" name="pwd" label="密码">
33 <!--                <span>密码不能为空</span>-->
34             </div>
35             <input type="submit" value="提交" >
36         </form>
37     </div>
38     <script src="jquery-3.5.0.js"></script>
39 <script>
40     $(function () {
41         BindCheck();
42     });
43     function BindCheck() {
44         $('form input').click(function () {
45             $('form .item span').remove();
46             var flag=true;
47             $('form .item input[type="text"],.item input[type="password"]').each(function () {
48                 // ($(this).parent().find('span')).remove();
49                 var val=$(this).val();
50 
51                 if(val.length<=0){
52                     var label = $(this).attr('label');
53                     var tag=document.createElement('span');
54                     tag.innerText=label+'不能为空';
55                     $(this).after(tag);
56                     flag=false;
57                                    }
58             });
59             return flag;
60         });
61 
62     }
63 
64 
65 </script>
66 </body>
67 </html>
View Code

 2.滚动菜单

  出错的问题和要点

  1.如果要在某个class 里再加个样式就要具体到这个class的名称,然后再加样式
    如:把menu加fix样式就要.pg-body .menu.fix
    或想给menu里的某个menu-item加active样式就要.pg-body .menu .menu-item.active
  2.滑动的时候每次都把所有项目拿出来循环,即使已经有符合的项目
    可以在判断的后面加return false
  3.滑动的时候,第三章显示不了,不够高度来判断

    页面前面有<!DOCTYPE html> $(window).height() 也不能获取窗口高度,所以窗口高度用的是document.documentElement.clientHeight;

    但是进行判断是总是差一点,所以只能用整个HTML的高度-1

    scroll(滚动高度)+winheight(窗口高度)>=docheight(文档高度)-1

    ps:滚动的高度,加窗口的高度,就是整个HTML的高度

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         body{
  8             margin: 0;
  9         }
 10         .pg-header{
 11             background-color: #2e6ab1;
 12             color: black;
 13             height: 60px;
 14             width: 100%;
 15         }
 16         .pg-body{
 17         }
 18         .pg-body .menu{
 19             background-color: #6ce26c;
 20             position: absolute;
 21             top:60px;
 22             bottom: 0;
 23             left:30px;
 24             width: 80px;
 25         }
 26         .pg-body .content{
 27             background-color:yellow;
 28             position: absolute;
 29             top:60px;
 30             right: 30px;
 31             left:120px;
 32         }
 33         .pg-body .content .content-item{
 34             height: 500px;
 35         }
 36         .pg-body .menu.fix{
 37             position: fixed;
 38             top:10px;
 39 
 40         }
 41         .pg-body .menu .menu-item.active{
 42             color: red;
 43 
 44         }
 45     </style>
 46 </head>
 47 <body>
 48     <div class="pg-header">内容</div>
 49 
 50     <div class="pg-body">
 51         <div class="menu">
 52             <div class="menu-item" menu="i1">第一章</div>
 53             <div class="menu-item" menu="i2">第二章</div>
 54             <div class="menu-item" menu="i3">第三章</div>
 55         </div>
 56 
 57         <div class="content">
 58             <div class="content-item" name="i1">第一章内容</div>
 59             <div class="content-item" name="i2">第二章内容</div>
 60             <div class="content-item" name="i3">第三章内容</div>
 61         </div>
 62     </div>
 63     <script type="text/javascript" src="jquery-3.5.0.js"></script>
 64     <script>
 65         $(function () {
 66                 Init();
 67         });
 68         function Init() {
 69             $(window).scroll(function () {
 70                 var scroll = $(window).scrollTop();
 71                 if(scroll>60){
 72                     $('.menu').addClass('fix');
 73                 }else {
 74                     $('.menu').removeClass('fix');
 75                     $('.menu').children().removeClass('active');
 76                 };
 77                 $('.content').children().each(function () {
 78                     //当前标签距离顶部的高度 offset有 offset.top和offset.left
 79                     var offset = $(this).offset();
 80                     //用来判断是否滚动到标签顶部
 81                     var pd =scroll-offset.top;
 82                     //自身高度
 83                     var height = $(this).height();
 84                         var docheight = $(document).height();
 85                         var winheight =document.documentElement.clientHeight;
 86                         console.log(docheight);
 87                         console.log(winheight);
 88                         console.log(scroll);
 89                     if (pd>=0&&pd<height+offset.top){
 90 
 91 
 92                         if(scroll+winheight>=docheight-1){$('.menu').find('div[menu=i3]').addClass('active').siblings().removeClass('active');}
 93                         else{
 94                             var name=$(this).attr('name');
 95                             $('.menu').find('div[menu="'+name+'"]').addClass('active').siblings().removeClass('active');
 96                         }
 97                     };
 98                 });
 99             })
100         }
101     </script>
102 </body>
103 </html>
View Code

 

posted @ 2020-04-13 18:13  otome  阅读(156)  评论(0编辑  收藏  举报