<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.2.1.min.js"></script> <style> * { margin: 0px; padding: 0px; } li { list-style: none; } .hid { display: none; } .nav-content { 180px; margin: 100px 100px; background-color: #dadac8; } .nav-title { padding: 5px 0px 5px 10px; background-color: cornflowerblue; border: 1px solid darkgreen; } .small-nav li { margin-left: 30px; } </style> <title>菜单练习</title> </head> <body> <div class="nav"> <div class="nav-content"> <div class="nav-title">Python</div> <div class="small-nav hid"> <ul> <li>数据类型</li> <li>函数</li> <li>面向对象</li> </ul> </div> <div class="nav-title">MySQL</div> <div class="small-nav hid"> <ul> <li>基础</li> <li>单表查询</li> <li>多表查询</li> </ul> </div> <div class="nav-title">JavaScript</div> <div class="small-nav hid"> <ul> <li>BOM</li> <li>DOM</li> <li>jQuery</li> </ul> </div> </div> </div> <script> $('.nav-title').click(function () { if ($(this).next().hasClass('hid')){ $('.small-nav').addClass('hid'); $(this).next().removeClass('hid') }else{ $('.small-nav').addClass('hid') } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框示例</title> <script src="jquery-3.2.1.min.js"></script> <style> .test .btn { height: 50px; 150px; position: absolute; left: 300px; top: 300px; border: 1px dashed red; font-size: 18px; } .hid { display: none; } .hid-box { 300px; height: 200px; background-color: rgba(255,50,99,0.3); color: white; text-align: center; padding-top: 50px; margin: 200px 0px 0px 500px; position: fixed; z-index: 1000; } .bg { auto; height: 800px; background-color: rgba(10,250,10,0.2); position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; } </style> </head> <body> <div class="bg hid"></div> <div class="test"> <input type="button" class="btn" value="点我打开模态框"> <div class="hid-box hid"> 你站在这里不要动 <p></p> 我去给你买两个橘子 <p></p> <input type="button" value="嗯嗯" class="close"> </div> <script> $('.btn').click(function () { $('.hid-box').removeClass('hid'); $('.bg').removeClass('hid') }); $('.close').click(function () { $('.hid-box').addClass('hid'); $('.bg').addClass('hid') }) </script> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选框示例</title> <script src="jquery-3.2.1.min.js"></script> </head> <style> * { margin: 0; padding: 0; } .download { border: 1px dashed grey; background-color: #dadccc; padding: 5px 0px; 600px; height: auto; position: fixed; left: 50%; top: 50%; margin-left: -300px; margin-top: -150px; } .jishuhang { background-color: #b9b9aa; } .oushuhang { background-color: #dadccc; } </style> <body> <table class="download"> <thead> <tr class="title"> <th>选择</th> <th>歌曲名</th> <th>演唱者</th> <th>大小</th> </tr> </thead> <tbody> <tr class="jishuhang"> <td><input type="checkbox" value="歌曲1"> </td> <td>《瞎几把乱写的歌》</td> <td>付勇</td> <td>8.88M</td> </tr> <tr class="oushuhang"> <td><input type="checkbox" value="歌曲2"> </td> <td>《自己都不会唱的歌》</td> <td>付勇</td> <td>8.88M</td> </tr> <tr class="jishuhang"> <td><input type="checkbox" value="歌曲3"> </td> <td>《一句歌词都没有的歌》</td> <td>付勇</td> <td>8.88M</td> </tr> <tr class="oushuhang"> <td><input type="checkbox" value="歌曲4"> </td> <td>《怎么都学不会的歌》</td> <td>付勇</td> <td>8.88M</td> </tr> <tr> <td colspan="3"> <input class="quanxuan" type="button" value="全选"> <input class="fanxuan" type="button" value="反选"> <input class="quxiao" type="button" value="取消"> </td> </tr> </tbody> <script> $('.quanxuan').click(function () { $(':checkbox').prop('checked',true) }); $('.quxiao').click(function () { $(':checkbox').prop('checked',false) }); $('.fanxuan').click(function () { var $checkboxEles = $(':checkbox') for (var i= 0;i<$checkboxEles.length;i++){ if ($($checkboxEles[i]).prop('checked')){ $($checkboxEles[i]).prop('checked',false) }else{ $($checkboxEles[i]).prop('checked',true) } } }) </script> </table> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部示例</title> <script src="jquery-3.2.1.min.js"></script> <style> .main{ height: 2000px; } .hide{ display: none; } .fanhui{ background-color: #6a686d; position: fixed; right: 100px; bottom: 100px; border: 1px solid black; } </style> </head> <body> <div class="main"> 请将你的鼠标滚轮往上滚！！！！！！！！！！ </div> <div class="fanhui hide"> 返回顶部 </div> <script> $(window).scroll(function () { if ($(window).scrollTop() > 100){ $('.fanhui').removeClass('hide') }else{ $('.fanhui').addClass('hide') } }); $('.fanhui').click(function () { $(window).scrollTop(0) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>输入框验证示例</title> <style> .jinggao{ color: red; } .hide{ display: none; } </style> <script src="jquery-3.2.1.min.js"></script> </head> <body> <form> <input type="text"> <span class="jinggao hide">输入内容不能为空</span> <script> $(':text').blur(function () { if($(this).val() == ''){ $('.jinggao').removeClass('hide') } }); $(':text').focus(function () { $('.jinggao').addClass('hide') }) </script> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选操作</title> </head> <body> <table border="1" style="margin: 200px 0px 0px 300px"> <thead> <tr> <th>选择</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" value="0"></td> <td>小明</td> <td> <select> <option value="0">上线</option> <option value="1">下线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox" value="0"></td> <td>小花</td> <td> <select> <option value="0">上线</option> <option value="1">下线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox" value="0"></td> <td>小虎</td> <td> <select> <option value="0">上线</option> <option value="1">下线</option> <option value="2">离线</option> </select> </td> </tr> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script> var key_flag = false; var $bodyEle = $('body'); $bodyEle.on('keydown',function (evt) { if (evt.keyCode === 17){ key_flag = true; } }); $bodyEle.on('keyup',function () { key_flag = false; }); $('select').on('change',function () { var value = $(this).val(); var checkedEles = $(':checkbox'); for (var i=0;i<checkedEles.length;i++){ if (key_flag && $(checkedEles[i]).prop('checked')){ $(checkedEles[i]).parent().siblings().last().find('select').val(value); } } }) </script> </body> </html>