<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 下拉菜单
$(function(){
$(".menu-title").click(
function(){
$(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
}
);
})
// 删除多行
$(function(){
$("#del").click(function(){
var $arr = $("input:checked");
// for (var index=0;index<$arr.length;index++) {
// var $parentEl = $arr[index].parentNode.parentNode;
// $parentEl.remove();
// }
$arr.parent().parent().remove();
});
})
// 全选
$(function(){
$("#checkAll").click(function(){
var value = $(this).prop("checked");
var $arr = $(".check-item");
$arr.prop("checked",value);
// $(".check-item").prop("checked",value);
})
})
// 省市联动
$(function(){
var arr = new Array();
arr[0] = ["重庆市","梁平县","铜梁区"];
arr[1] = ["成都市","绵阳市","德阳市"];
$("#province").change(function(){
var cityIndex = this.value;
$("#city").empty();
$.each(arr, function(i,n) {
if(cityIndex==i){
//5.遍历该省份下的所有城市
$.each(arr[i], function(j,m) {
//alert(m);
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
})
})
</script>
<style type="text/css">
/*突出显示*/
img{
opacity: 0.5;
}
img:hover{
opacity: 1;
}
li{
list-style: none;
}
.menu-content{
display: none;
height: 40px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<!--突出显示-->
<h2>突出显示</h2>
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
<img src="img/05.jpg" alt="" />
<img src="img/06.jpg" alt="" />
<!--下拉菜单-->
<h2>下拉菜单</h2>
<ul>
<li>
<span class="menu-title">
菜单一
</span>
<div class="menu-content">
这是菜单的内容
</div>
</li>
<li>
<span class="menu-title">
菜单二
</span>
<div class="menu-content">
这是菜单的内容
</div>
</li>
</ul>
<!--批量删除-->
<h2>批量删除</h2>
<table>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<td>3</td>
</tr>
</table>
<button id="del">删除所选行</button>
<!--全选-->
<h2>全选</h2>
<table>
<tr>
<td><input type="checkbox" name="" id="checkAll" value="" /></td>
<td>全选</td>
</tr>
<tr>
<td><input type="checkbox" class="check-item" id="" value="" /></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" class="check-item" name="" id="" value="" /></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" class="check-item" name="" id="" value="" /></td>
<td>3</td>
</tr>
</table>
<!--省市联动-->
<h2>省市联动</h2>
<select name="" id="province">
<option value="0">重庆</option>
<option value="1">四川</option>
</select>
<select name="" id="city">
<option value="">请先选择省份</option>
</select>
</body>
</html>
JQuery练习丨多选、手风琴、省市联动、突出显示、删除表格
猜你喜欢
转载自blog.csdn.net/qq_36134369/article/details/82850103
今日推荐
周排行