jQuery(练习)
隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01__表格隔行变色</title> <style> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } #data { width: 600px; } #data, td, th { border-collapse: collapse; border: 1px solid #aaaaaa; } th, td { height: 28px; } #data thead { background-color: #333399; color: #ffffff; } .odd { background-color: #ccccff; } </style> </head> <body> <table id="data"> <thead> <tr> <th>姓名</th> <th>工资</th> <th>入职时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>$3500</td> <td>2010-10-25</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>Mary</td> <td>$3400</td> <td>2010-12-1</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>King</td> <td>$5900</td> <td>2009-08-17</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>Scott</td> <td>$3800</td> <td>2012-11-17</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>Smith</td> <td>$3100</td> <td>2014-01-27</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>Allen</td> <td>$3700</td> <td>2011-12-05</td> <td><a href="javascript:void(0)">删除</a></td> </tr> </tbody> </table> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> $(\'#data>tbody>tr:odd\').css(\'background\', \'#ccccff\') // $(\'#data>tbody>tr:odd\').addClass(\'odd\') //$(\'#data>tbody>tr:odd\').attr(\'class\', \'odd\') </script> </body> </html>
多Tab点击切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02_多Tab点击切换</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 #tab li { 13 float: left; 14 list-style: none; 15 width: 80px; 16 height: 40px; 17 line-height: 40px; 18 cursor: pointer; 19 text-align: center; 20 } 21 22 #container { 23 position: relative; 24 } 25 26 #content1, #content2, #content3 { 27 width: 300px; 28 height: 100px; 29 padding: 30px; 30 position: absolute; 31 top: 40px; 32 left: 0; 33 } 34 35 #tab1, #content1 { 36 background-color: #ffcc00; 37 } 38 39 #tab2, #content2 { 40 background-color: #ff00cc; 41 } 42 43 #tab3, #content3 { 44 background-color: #00ccff; 45 } 46 </style> 47 </head> 48 <body> 49 <h2>多Tab点击切换</h2> 50 51 <ul id="tab"> 52 <li id="tab1" value="1">10元套餐</li> 53 <li id="tab2" value="2">30元套餐</li> 54 <li id="tab3" value="3">50元包月</li> 55 </ul> 56 57 <div id="container"> 58 <div id="content1"> 59 10元套餐详情：<br/> 每月套餐内拨打100分钟，超出部分2毛/分钟 60 </div> 61 <div id="content2" style="display: none"> 62 30元套餐详情：<br/> 每月套餐内拨打300分钟，超出部分1.5毛/分钟 63 </div> 64 <div id="content3" style="display: none"> 65 50元包月详情：<br/> 每月无限量随心打 66 </div> 67 </div> 68 69 70 <script type="text/javascript" src="jquery-1.10.1.js"></script> 71 <script type="text/javascript"> 72 73 var $contents = $(\'#container>div\') //包装成jQuery对象 74 // 给3个li加监听 75 /*$(\'#tab>li\').click(function () { // 隐式遍历,相当于给每个li绑定了点击事件，但是还是个伪数组 76 //alert(\'----\') 77 // 隐隐藏所有内容div 78 $contents.css(\'display\', \'none\') 79 // 显示对应的内容div 80 // 得到当前点击的li在兄弟中下标 81 var index = $(this).index() 82 // console.log( $(this).index()) 83 // 找到对应的内容div, 并显示 84 $contents[index].style.display = \'block\' // 原生获取css样式 85 // $($contents[index]).css(\'display\', \'block\') //$contents[index]不是js原生对象，需要在外套一个$,变成jQuery对象 86 })*/ 87 88 89 // 第二种方法，不需要全部隐藏$contents 90 var currIndex = 0 //当前显示的内容div的下标 91 $(\'#tab>li\').click(function () { // 隐式遍历 92 //alert(\'----\') 93 // 隐藏当前已经显示的内容div 94 $contents[currIndex].style.display = \'none\' 95 // 显示对应的内容div 96 // 得到当前点击的li在兄弟中下标 97 var index = $(this).index() 98 // 找到对应的内容div, 并显示 99 $contents[index].style.display = \'block\' 100 101 // 更新下标 102 currIndex = index 103 }) 104 105 106 </script> 107 </body> 108 </html>
回到顶部
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>03_回到顶部</title> 7 <style> 8 #to_top { 9 width: 30px; 10 height: 40px; 11 font: 14px/20px arial; 12 text-align: center; 13 background: #06c; 14 position: fixed; 15 cursor: pointer; 16 color: #fff; 17 left: 1050px; 18 top: 500px; 19 } 20 </style> 21 </head> 22 <body style="height: 2000px;"> 23 24 <div id="to_top">返回顶部</div> 25 26 <script type="text/javascript" src="jquery-1.10.1.js"></script> 27 <script type="text/javascript"> 28 $(\'#to_top\').click(function () { 29 // 瞬间滚到顶部 30 //$(\'html,body\').scrollTop(0) 31 32 // 平滑滚到顶部 33 // 总距离 34 var $page = $(\'html,body\') 35 var distance = $(\'html\').scrollTop() + $(\'body\').scrollTop() 36 // 总时间 37 var time = 500 38 // 间隔时间 39 var intervalTime = 50 40 //每次滑动的距离 41 var itemDistance = distance/(time/intervalTime) 42 // 使用循环定时器不断滚动 43 var intervalId = setInterval(function () { 44 //当前top 45 distance -= itemDistance 46 // 到达顶部, 停止定时器 47 if(distance<=0) { 48 distance = 0 //修正 49 clearInterval(intervalId) 50 } 51 $page.scrollTop(distance) 52 }, intervalTime) 53 54 }) 55 </script> 56 </body> 57 58 </html>
爱好选择器
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>全选练习</title> 6 </head> 7 <body> 8 <form method="post" action=""> 9 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 10 <br/> 11 <input type="checkbox" name="items" value="足球"/>足球 12 <input type="checkbox" name="items" value="篮球"/>篮球 13 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 14 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 15 <br/> 16 <input type="button" id="checkedAllBtn" value="全 选"/> 17 <input type="button" id="checkedNoBtn" value="全不选"/> 18 <input type="button" id="checkedRevBtn" value="反 选"/> 19 <input type="button" id="sendBtn" value="提 交"/> 20 </form> 21 <script type="text/javascript"> 22 /* 23 功能说明: 24 1. 点击\'全选\': 选中所有爱好 25 2. 点击\'全不选\': 所有爱好都不勾选 26 3. 点击\'反选\': 改变所有爱好的勾选状态 27 4. 点击\'提交\': 提示所有勾选的爱好 28 5. 点击\'全选/全不选\': 选中所有爱好, 或者全不选中 29 6. 点击某个爱好时, 必要时更新\'全选/全不选\'的选中状态 30 技术点： 31 1.DOM查询 32 2.事件回调函数绑定 33 3.checkbox操作 34 4.事件回调函数中的this 35 5.逻辑思维能力 36 */ 37 38 window.onload = function () { 39 40 var items = document.getElementsByName("items"); 41 42 //1.#checkedAllBtn 43 var checkedAllBtn = document.getElementById("checkedAllBtn"); 44 checkedAllBtn.onclick = function () { 45 setItemsChecked(true); 46 checkedAllBox.checked = true; 47 }; 48 49 //2.#checkedNoBtn 50 var checkedNoBtn = document.getElementById("checkedNoBtn"); 51 checkedNoBtn.onclick = function () { 52 setItemsChecked(false); 53 checkedAllBox.checked = false; 54 }; 55 //3.#checkedRevBtn 56 var checkedRevBtn = document.getElementById("checkedRevBtn"); 57 checkedRevBtn.onclick = function () { 58 setItemsChecked(); 59 //点满时将checkedAllBox.checked设置为true 60 //统计当前items中被选中的个数 61 checkedAllBox.checked = isAllChecked(); 62 }; 63 64 //4.#checkedAllBox 65 var checkedAllBox = document.getElementById("checkedAllBox"); 66 checkedAllBox.onclick = function () { 67 setItemsChecked(this.checked); 68 }; 69 70 //5.#sendBtn 71 var sendBtn = document.getElementById("sendBtn"); 72 sendBtn.onclick = function () { 73 for (var i = 0; i < items.length; i++) { 74 if (items[i].checked) { 75 alert(items[i].value); 76 } 77 } 78 }; 79 //6.items 80 for (var i = 0; i < items.length; i++) { 81 items[i].onclick = function () { 82 //点满时将checkedAllBox.checked设置为true 83 //统计当前items中被选中的个数 84 checkedAllBox.checked = isAllChecked(); 85 } 86 } 87 88 function isAllChecked() { 89 for (var j = 0; j < items.length; j++) { 90 if (!items[j].checked) 91 return false; 92 } 93 return true; 94 } 95 96 function setItemsChecked(checked) { 97 for (var i = 0; i < items.length; i++) { 98 items[i].checked = (checked == undefined) ? (!items[i].checked) : checked; 99 } 100 } 101 } 102 </script> 103 </body> 104 </html>
待续。。。
版权声明：本文为fsg6原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。