10.25 JQ继续 案例（选择器和 DOM操作）
1、隔行换色
需求：将数据行的奇数行背景色设为Pink，偶数行背景色设为yellow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<script>
//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
$(function(){
//数据行奇数行为粉红色
$("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>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>
此例子中主要是对选择器的练习，用到了过滤选择器
tr:gt(1)是选择是从大于等于1的tr开始选择（从0开始），因为要求是数据行换色，所以要除去表头行。
:odd：是接着前面的条件选出奇数行
:even:是接着前面的条件选出偶数行
2、全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<script>
//需求：全选全不选，不用写入口函数
function selectAll(obj){
$(".itemSelect").prop("checked",obj.checked);
}
//通过js来获取checked的值，因为源代码中含有了onclick="selectAll(this)事件，this相当于input这个标签，所以用obj来接受
//不需要入口函数，因为点击就会触发该函数
/*function selectAll(obj){
alert(obj.ckecked);
}*/
</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>
关键函数：
<script>
//需求：全选全不选，不用写入口函数
function selectAll(obj){
$(".itemSelect").prop("checked",obj.checked);
}
//通过js来获取checked的值，因为源代码中含有了onclick="selectAll(this)事件，this相当于input这个标签，所以用obj来接受
//不需要入口函数，因为点击就会触发该函数
/*function selectAll(obj){
alert(obj.ckecked);
}*/
</script>
注：
主要练习的是对属性进行修改
3.QQ表情选择
需求：点击qq表情，将其追加到发言框中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QQ表情选择</title>
<script src="js/jquery.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图片添加click事假
$("ul img").click(function(){
//2.追加到p标签即可
//谁点击谁就是this,但this是js的对象
/*如果直接把this加到后面$(".word").append(this)，则之前的这个Img标签就没了，
所以需要的是复制该img标签，可以用jq中的clone()方法，
js对象用jq对象的方法，需要先将js对象转换成jq对象
*/
$(".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>
关键代码：
如果直接把this加到后面$(".word").append(this)，则之前的这个Img标签就没了，所以需要的是复制该img标签，可以用jq中的clone()方法，js对象用jq对象的方法，需要先将js对象转换成jq对象
<script>
//需求：点击qq表情，将其追加到发言框中
$(function(){
//1.给img图片添加click事假
$("ul img").click(function(){
//2.追加到p标签即可
//谁点击谁就是this,但this是js的对象
/*如果直接把this加到后面$(".word").append(this)，则之前的这个Img标签就没了，
所以需要的是复制该img标签，可以用jq中的clone()方法，
js对象用jq对象的方法，需要先将js对象转换成jq对象
*/
$(".word").append($(this).clone());
})
})
</script>
注：
1.主要用到append()
2.还用到jq中的clone()方法
4.下拉列表选中条目左右移动选择功能
需求：实现下拉列表选择条目左右选择功能 在select中加了multiple属性，可以实现多选功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.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>
//需求：实现下拉列表选择条目左右选择功能 在select中加了multiple属性，可以实现多选功能
//1.需要为两个按钮绑定单击事件
$(function(){
//取左边选中的option，将其追加到右边下拉列表中
$("#toRight").click(function(){
$("#rightName").append($("#leftName option:selected"));
});
//取右边选中的option，将其追加到左边下拉列表中
$("#toLeft").click(function(){
$("#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>
关键代码：
<script>
//需求：实现下拉列表选择条目左右选择功能 在select中加了multiple属性，可以实现多选功能
//1.需要为两个按钮绑定单击事件
$(function(){
//取左边选中的option，将其追加到右边下拉列表中
$("#toRight").click(function(){
$("#rightName").append($("#leftName option:selected"));
});
//取右边选中的option，将其追加到左边下拉列表中
$("#toLeft").click(function(){
$("#leftName").append($("#rightName option:selected"));
});
});
</script>
注：
1.用到$("#leftName option:selected")，":"后面的是过滤选择器，选被选中的元素
2.还用append();
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
