JQuery基礎案例
阿新 • • 發佈：2021-07-10
基礎案例
1.隔行換色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-3.3.1.min.js"></script> <script> $(function () { //需求：將資料行的奇數行背景色設定為 pink，偶數行背景色設定為 yellow $("tr:gt(1):odd").css("backgroundColor","pink"); $("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>
2.全選全不選
<!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>
3.表情選擇
<!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 () { $("ul img").click(function () { $(".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>
4.左右移動
<!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").click(function () {
//獲取右邊的下拉列表物件，append(左邊下拉列表選中的option)
$("#rightName").append($("#leftName>option:selected"));
})
$("#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>