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();