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实现自定义模态框
版权声明：本文为guodengjian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。