JQuery(学习笔记六)JQuery常用实例
几个简单例子的实现
(一)表格隔行变色
<!DOCTYPE html> #data, td, th { th, td { #data thead { |
效果:
(2)多Tab点击切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多Tab点击切换</title> <script src="jquery-1.10.1.js"></script> <style> * { margin: 0; padding: 0; } #tab li { float: left; list-style: none; width: 80px; height: 40px; line-height: 40px; cursor: pointer; text-align: center; } #container { position: relative; } #content1, #content2, #content3 { width: 300px; height: 100px; padding: 30px; position: absolute; top: 40px; left: 0; } #tab1, #content1 { background-color: #ffcc00; } #tab2, #content2 { background-color: #ff00cc; } #tab3, #content3 { background-color: #00ccff; } </style> </head> <body> <h2>多Tab点击切换</h2> <ul id="tab"> <li id="tab1" value="1">10元套餐</li> <li id="tab2" value="2">30元套餐</li> <li id="tab3" value="3">50元包月</li> </ul> <div id="container"> <div id="content1"> 10元套餐详情:<br/> 每月套餐内拨打100分钟,超出部分2毛/分钟 </div> <div id="content2" style="display: none"> 30元套餐详情:<br/> 每月套餐内拨打300分钟,超出部分1.5毛/分钟 </div> <div id="content3" style="display: none"> 50元包月详情:<br/> 每月无限量随心打 </div> </div> <script> $(function () { var index = 0 var $contents = $('#container>div') $("#tab>li").click(function () { var clickIndex = $(this).index() if (clickIndex != index) { $contents[index].style.display = 'none' $contents[clickIndex].style.display = 'block' index = clickIndex } }) }) </script> </body> </html> |
效果:
三、导航动态显示效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航动态显示效果</title> <script src="jquery-1.10.1.js"></script> <style rel="stylesheet"> * { margin: 0; padding: 0; word-wrap: break-word; word-break: break-all; } body { background: #FFF; color: #333; font: 12px/1.6em Helvetica, Arial, sans-serif; } a { color: #0287CA; text-decoration: none; } a:hover { text-decoration: underline; } ul, li { list-style: none; } img { border: none; } h1, h2, h3, h4, h5, h6 { font-size: 1em; } html { overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/ } #navigation { width: 784px; padding: 8px; margin: 8px auto; background: #3B5998; height: 18px; } #navigation ul li { float: left; margin-right: 14px; position: relative; z-index: 100; } #navigation ul li a { display: block; padding: 0 8px; background: #EEEEEE; font-weight: 700; } #navigation ul li a:hover { background: none; color: #fff; } #navigation ul li ul { background-color: #88C366; position: absolute; width: 80px; overflow: hidden; display: none; } #navigation ul li ul li { border-bottom: 1px solid #BBB; text-align: left; width: 100%; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">首 页</a></li> <li> <a href="#">衬 衫</a> <ul> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">无袖衬衫</a></li> </ul> </li> <li> <a href="#">卫 衣</a> <ul> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> </ul> </li> <li> <a href="#">裤 子</a> <ul> <li><a href="#">休闲裤</a></li> <li><a href="#">卡其裤</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">短裤</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div> <script> $("#navigation>ul>li:has(ul)").hover(function () { $(this).children("ul").stop().slideDown(400) }, function () { $(this).children("ul").stop().slideUp("fast") }) </script> </body> </html> |
效果:
四、爱好选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全选</title> </head> <body> <form> 你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 <br/> <input type="button" id="checkedAllBtn" value="全 选"/> <input type="button" id="checkedNoBtn" value="全不选"/> <input type="button" id="checkedRevBtn" value="反 选"/> <input type="button" id="sendBtn" value="提 交"/> </form> <script src="jquery-1.10.1.js"></script> <script type="text/javascript"> /* 功能说明: 1. 点击'全选': 选中所有爱好 2. 点击'全不选': 所有爱好都不勾选 3. 点击'反选': 改变所有爱好的勾选状态 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态 6. 点击'提交': 提示所有勾选的爱好 */ $(function () { var $Items = $(':checkbox[name=items]') var $checkedAllBox = $('#checkedAllBox') // 1. 点击'全选': 选中所有爱好 $('#checkedAllBtn').click(function () { $Items.prop('checked', true) $checkedAllBox.prop('checked', true) }) // 2. 点击'全不选': 所有爱好都不勾选 $('#checkedNoBtn').click(function () { $Items.prop('checked', false) $checkedAllBox.prop('checked', false) }) // 3. 点击'反选': 改变所有爱好的勾选状态 $('#checkedRevBtn').click(function () { $Items.each(function () { this.checked = !this.checked }) $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0) }) // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中 $checkedAllBox.click(function () { $Items.prop('checked', this.checked) }) // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态 $Items.click(function () { $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0) }) // 6. 点击'提交': 提示所有勾选的爱好 $('#sendBtn').click(function () { $Items.filter(':checked').each(function () { alert(this.value) }) }) }) </script> </body> </html> |
效果:
五、添加删除记录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录</title> <link rel="stylesheet" type="text/css" href="css.css"/> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>[email protected]</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>[email protected]</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>[email protected]</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="empName" id="empName"/> </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email"/> </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary"/> </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> <script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 功能说明: 1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息 2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息 技术要点: 1. DOM查询 2. 绑定事件监听 3. DOM增删改 4. 取消事件的默认行为 */ $(function () { $('#addEmpButton').click(function () { var $empName = $('#empName') var $email = $('#email') var $salary = $('#salary') var empName = $empName.val() var email = $empName.val() var salary = $empName.val() var id = Date.now() /* <tr> <td>Bob</td> <td>[email protected]</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> */ $('<tr></tr>') .append('<td>'+empName+'</td>') .append('<td>'+email+'</td>') .append('<td>'+salary+'</td>') .append('<td><a href="deleteEmp?id="'+id+'>Delete</a></td>') .appendTo('#employeeTable') .find('a') .click(clickA) $empName.val('') $email.val('') $salary.val('') }) $('a').click(clickA) function clickA (event) { event.preventDefault() var $tr = $(this).parent().parent() var name = $tr.children('td:first').html() if(confirm('确定删除'+name+'吗?')) { $tr.remove() } } }) </script> </body> </html> |
六、焦点轮播图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>焦点轮播图</title> <style type="text/css"> /*去除内边距,没有链接下划线*/ * { margin: 0; padding: 0; text-decoration: none; } /*让<body有20px的内边距*/ body { padding: 20px; } /*最外围的div*/ #container { width: 600px; height: 400px; overflow: hidden; position: relative; /*相对定位*/ margin: 0 auto; } /*包含所有图片的<div>*/ #list { width: 4200px; /*7张图片的宽: 7*600 */ height: 400px; position: absolute; /*绝对定位*/ z-index: 1; } /*所有的图片<img>*/ #list img { float: left; /*浮在左侧*/ } /*包含所有圆点按钮的<div>*/ #pointsDiv { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px; } /*所有的圆点<span>*/ #pointsDiv span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; } /*第一个<span>*/ #pointsDiv .on { background: orangered; } /*切换图标<a>*/ .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0, 0, 0, 0.3); color: #fff; } /*鼠标移到切换图标上时*/ .arrow:hover { background-color: RGBA(0, 0, 0, 0.7); } /*鼠标移到整个div区域时*/ #container:hover .arrow { display: block; /*显示*/ } /*上一个切换图标的左外边距*/ #prev { left: 20px; } /*下一个切换图标的右外边距*/ #next { right: 20px; } </style> </head> <body> <div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> <img src="img/2.jpg" alt="2"/> <img src="img/3.jpg" alt="3"/> <img src="img/4.jpg" alt="4"/> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> </div> <div id="pointsDiv"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> <script src="./js/jquery.1.10.2.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html> |
效果: