本文介绍了四个JQuery简单小案例，包括如何实现表格的隔行换色、复选框的全选与全不选功能、QQ表情的选择以及多选下拉列表的左右移动。通过实例代码展示了JQuery在实际操作中的应用。
JQuery的几个简单小案例
- 实现表格的的隔行换色
- 实现复选框的全选与全不选
- QQ表情的选择
- 多选下拉列表的左右移动
实现表格的的隔行换色
需求：事先制作一个如图所示的table表格，将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
- 分析
用过滤选择器获取数据行tr标签，选择奇偶数行，分别设置背景
预先编写的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script>
//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
// 入口函数
$(function () {
// 分析
// 用过滤选择器获取数据行tr标签，选择奇数行，设置背景色为pink
$("tr:gt(1):odd").css("background","pink");
// 获取数据行tr标签，选择偶数行，设置背景色为yellow
$("tr:gt(1):even").css("background","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>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>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
实现隔行换色的表格
实现复选框的全选与全不选
需求：对上述编写之前的表格进行处理，使点击表格最上面的复选框，完成全选与全不选功能
- 分析
- 已经设置了首行复选框，为其添加了点击事件，
- 要设置下面的复选框状态与第一行的复选框状态一致；可以设置该点击事件函数，使下面的复选框状态与此状态相同
- 用类选择器获取下面的复选框，用prop操作选中属性值checked
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script>
// 需求：点击上面的复选框，完成全选与全不选功能
// 分析
// 已经设置了首行复选框，为其添加了点击事件，
// 要设置下面的复选框状态与第一行的复选框状态一致；可以设置该点击事件函数，使下面的复选框状态与此状态相同
// 用类选择器获取下面的复选框，用prop操作选中属性值checked
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表情的选择
需求：点击qq表情，将其追加到发言框中
- 分析
- 表情位于ul标签下，是一些img图片；需要为这些对象添加点击事件
- 可以用层级选择器获取表情对象
- 发言框是一些p标签，要追加，则可以用CRUD操作中的append方法
- 追加后原位置也不希望消失，所以需要使用clone方法，但是js与JQuery不能通用，所以需要将js先转为JQuery对象才能调用clone方法
预先编写的qq表情选择页面
<!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表情，将其追加到发言框中
// 分析：表情位于ul标签下，是一些img图片；需要为这些对象添加点击事件
// 可以用层级选择器获取表情对象
// 发言框是一些p标签，要追加，则可以用CRUD操作中的append方法
// 追加后原位置也不希望消失，所以需要使用clone方法，但是js与JQuery不能通用，所以需要将js先转为JQuery对象才能调用clone方法
// 入口函数
$(function () {
$("ul img").click(function () {
$("p").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>
实现QQ表情选择的界面
多选下拉列表的左右移动
需求：实现下拉列表选择条目左右选择功能
- 分析
- 分别为两个按钮添加单击事件
- –>按钮中，需要获取左边菜单中选中的条目option，追加到右边select标签的末尾
- <–按钮中，需要获取右边菜单中选中的条目option，追加到左边select标签的末尾
- 获取选中的option；可以使用其固有的selected属性进行过滤，需使用层级选择器辨别左右下拉框
- 使用表单过滤选择器辨别是否选中该项
预先编写的两个下拉列表页面
<!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>
//需求：实现下拉列表选择条目左右选择功能
// 分析：分别为两个按钮添加单击事件
// -->按钮中，需要获取左边菜单中选中的条目option，追加到右边select标签的末尾
// <--按钮中，需要获取右边菜单中选中的条目option，追加到左边select标签的末尾
// 获取选中的option；可以使用其固有的selected属性进行过滤，需使用层级选择器辨别左右下拉框
// 使用表单过滤选择器辨别是否选中该项
// 入口函数
$(function () {
// -->按钮的单击事件
$("#toRight").click(function () {
// 使用appendTo将左边菜单中选中的条目option，追加到右边select标签的末尾
$("#leftName option:selected").appendTo($("#rightName"));
});
// <--按钮的单击事件
$("#toLeft").click(function () {
// 使用append像左边select标签末尾追加右边菜单中选中的条目option
$("#leftName").append($("#rightName option:selected"));
});
});
</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>
实现左右移动的下拉列表
扫一扫
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
