JQuery_案例
JQuery_案例
隔行换色
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-3.3.1.min.js"></script> <script> //需求：将数据行的奇数行背景色设置为pink 偶数行背景色设置为yellow $(function(){ //1.获取数据行的奇数的tr 设置背景色为pink $("tr:gt(1):odd").css("backgroundColor","pink"); //2.获取数据行的偶数行的tr 设置背景色为yellow $("tr:gt(1):even").css("backgroundColor","yellow"); }); </script> </head> <body> <table id="tab1" border="1" width="800" align="center" > <tr> <td colspan="5"><input type="button" value="删除"></td> </tr> <tr style="background-color: #999999;"> <th><input type="checkbox"></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox"></td> <td>0</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>1</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>3</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </table> </body> </html>
运行结果
全选全不选
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选全不选</title> <script src="../js/jquery-3.3.1.min.js"></script> <script> //分析:需要保证下边的选中状态和第一个复选框的选中状态一致即可 function selectAll(obj){ //获取下边的复选框 $(".itemSelect").prop("checked",obj.checked); } </script> </head> <body> <table id="tab1" border="1" width="800" align="center"> <tr> <td colspan="5"><input type="button" value="删除"></td> </tr> <tr> <th><input type="checkbox" onclick="selectAll(this)"></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </table> </body> </html>
运行结果
qq表情选择
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>qq表情选择</title> <script src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> *{margin:0;padding:0;list-style:none} .emoji{margin:50px;} ul{overflow:hidden;} li{float:left; width:48px; height:48px; cursor:pointer;} .emoji img{cursor:pointer;} </style> <script > //需求：点击qq标签 将其追加到发言框中 $(function(){ //1.给img图片添加onclick事件 $("ul img").click(function(){ //2.追加到p标签中即可 $(".word").append($(this).clone()); }); }); </script> </head> <body> <div class="emoji"> <ul> <li><img src="../img/01.gif" height="22" width="22" alt=""/></li> <li><img src="../img/02.gif" height="22" width="22" alt=""/></li> <li><img src="../img/03.gif" height="22" width="22" alt=""/></li> <li><img src="../img/04.gif" height="22" width="22" alt=""/></li> <li><img src="../img/05.gif" height="22" width="22" alt=""/></li> <li><img src="../img/06.gif" height="22" width="22" alt=""/></li> <li><img src="../img/07.gif" height="22" width="22" alt=""/></li> <li><img src="../img/08.gif" height="22" width="22" alt=""/></li> <li><img src="../img/09.gif" height="22" width="22" alt=""/></li> <li><img src="../img/10.gif" height="22" width="22" alt=""/></li> <li><img src="../img/11.gif" height="22" width="22" alt=""/></li> <li><img src="../img/12.gif" height="22" width="22" alt=""/></li> </ul> <p class="word"> <strong>请发言:</strong> <img src="../img/12.gif" height="22" width="22" alt="" /> </p> </div> </body> </html>
运行结果
左右移动
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-3.3.1.min.js"></script> <style> #leftName , #btn,#rightName{ float: left; width: 100px; height: 300px; } #toRight,#toLeft{ margin-top:100px ; margin-left:30px; width: 50px; } .border{ height: 500px; padding: 100px; } </style> <script> //需求：实现下拉列表选中条目左右选择功能 $(function () { //toRight $("#toRight").click(function () { //获取右边的下拉列表对象，append(左边下拉列表选中的option) $("#rightName").append($("#leftName > option:selected")); }); //toLeft $("#toLeft").click(function () { //appendTo 获取右边选中的option，将其移动到左边下拉列表中 $("#rightName > option:selected").appendTo($("#leftName")); }); }); </script> </head> <body> <div class="border"> <select id="leftName" multiple="multiple"> <option>张三</option> <option>李四</option> <option>王五</option> <option>赵六</option> </select> <div id="btn"> <input type="button" id="toRight" value="-->"><br> <input type="button" id="toLeft" value="<--"> </div> <select id="rightName" multiple="multiple"> <option>钱七</option> </select> </div> </body> </html>
版权声明：本文为aimz01原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。