jQuery的几个小练习 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cover{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: darkgray;
            z-index: 999;
        }

        .modal{
            width: 600px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }

        .hide{
            display: none;
        }

    </style>
</head>
<body>
<input type="button" value="弹" id = 'i0'>

<div class="cover hide"></div>
<div class="modal hide">
    <label for="i1">姓名</label>
    <input type="text" id="i1">
    <label for="i2">爱好</label>
    <input type="text" id="i2">
    <input type="button" id="i3" value="关闭">

</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    var tbutton = $('#i0')[0];
    tbutton.onclick=function () {
        var coverEle = $('.cover')[0];
        var modalEle = $('.modal')[0];
        $(coverEle).removeClass('hide');
        $(modalEle).removeClass('hide');
    };

    var cbutton = $('#i3')[0];
    cbutton.onclick=function () {
        var coverEle = $('.cover')[0];
        var modalEle = $('.modal')[0];

        $(coverEle).addClass('hide');
        $(modalEle).addClass('hide');
    };

 </script>

</body>
</html>
自定义模态框
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left{
            position: fixed;
            left: 0;
            top: 0;
            width: 20%;
            height: 100%;
            background-color: rgb(47,53,61);
        }
        .right {
            width: 80%;
            height: 100%;
        }
        .menu {
            color: white;
        }
        .title {
            text-align: center;
            padding: 10px 15px;
            border-bottom: 1px solid #23283e;
        }
        .item {
            padding: 5px 10px;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="left">
    <div class="menu">
        <div class="title">菜单一</div>
        <div class="items hide">
            <dic class="item">111</dic>
            <dic class="item">222</dic>
            <dic class="item">333</dic>
        </div>
        <div class="title">菜单二</div>
        <div class="items hide">
            <dic class="item">111</dic>
            <dic class="item">222</dic>
            <dic class="item">333</dic>
        </div>
        <div class="title">菜单三</div>
        <div class="items hide">
            <dic class="item">111</dic>
            <dic class="item">222</dic>
            <dic class="item">333</dic>
        </div>
    </div>
</div>
<div class="right"></div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('.title').click(function () {
        //jquery绑定事件  鼠标点击
        //隐藏class里有.items的标签
        $('.items').addClass('hide')
        $(this).next().removeClass('hide');
    });
</script>

</body>
</html>
左侧菜单
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .c1 {
            width: 100px;
            height: 200px;
            background-color: red;
        }

        .c2 {
            height: 50px;
            width: 50px;
            position: fixed;
            bottom: 15px;
            right: 15px;
            background-color: #2b669a;
        }
        .hide {
            display: none;
        }

        .c3 {
            height: 100px;
        }
    </style>
</head>

<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jQuery.js"></script>
<script>
    $('#b1').on('click',function () {
        $('.c1').offset({left:200,top:200});
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() >100) {
            $('#b2').removeClass('hide');
        }else {
            $('#b2').addClass('hide');
        }
    });

    $('#b2').on('click', function () {
        $(window).scrollTop(0);
    })
</script>
</body>
</html>
返回顶部
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<label for="s1"> 城市</label>
<select id="s1">
    <option value="beijing">北京市</option>
    <option value="shanghai">上海市</option>
    <option selected value="guangzhou">广州市</option>
    <option value="shenzhen">深圳市</option>
</select>
<hr>
<label for="s2">爱好</label>
<select id="s2" multiple="multiple">
  <option value="basketball" selected>篮球</option>
  <option value="football">足球</option>
  <option value="doublecolorball" selected>双色球</option>
</select>

<script src="jQuery.js"></script>
<script>
    $('#s1').val('shanghai');
    $('#s2').val(['basketball','football']);
</script>
</body>
</html>
val赋值示例
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .error {
11             color: red;
12         }
13     </style>
14 </head>
15 <body>
16 <form action="">
17     <div>
18         <label for="input-name">用户名</label>
19         <input type="text" id="input-name" name="name">
20         <span class="error"></span>
21     </div>
22     <div>
23         <label for="input-password">密码</label>
24         <input type="password" id="input-password" name="password">
25         <span class="error"></span>
26     </div>
27     <div>
28         <input type="button" id="btn" value="提交">
29     </div>
30 </form>
31 
32 <script src="jQuery.js"></script>
33 <script>
34     $('#btn').click(function () {
35         var usernmae = $('#input-name').val();
36         var password = $('#input-password').val();
37 
38         if (usernmae.length === 0 ) {
39             $('#input-name').siblings('.error').text('用户名不能为空')
40         }
41         if (password.length === 0) {
42             $('#input-password').siblings('.error').text('密码不能为空')
43         }
44     })
45 </script>
46 </body>
47 </html>
自定义登录验证
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cover {
            background-color: #3c3d3e;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
        }
        .modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
        }

        .hide {
            display: none;
        }


    </style>
</head>
<body>

<div>
    <p>自定义模态框</p>
    <input type="button" id="m1" value="点我">
</div>

<div class="cover hide"></div>
<div class="modal hide">
    <label>yonghuming
        <input type="text">
    </label>
    <label>mima
        <input type="text">
    </label>
    <input type="button" id="m2" value="tijiao">
</div>


<script src="jQuery.js"></script>
<script>
    $('#m1').on('click',function () {
        $('.cover,.modal').removeClass('hide');
    });
    $('#m2').on('click',function () {
         $('.cover,.modal').addClass('hide');
    })
</script>

</body>
使用jquery实现自定义模态框

 

posted @ 2018-06-02 17:58  木夂口  阅读(158)  评论(0)  编辑  收藏  举报
levels of contents