1.表格的隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("tr:even:gt(0)").css("background-color","#CCCCCC");
$("tr:odd").css("background-color","#FFF38F");
});
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</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>海尔，TCL，康佳</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>笔记本特卖</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条，麻花，黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>床上用品/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 type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
function init()
{
//得到表格
var tab=document.getElementById("tab");
//得到表格中每一行
var rows=tab.rows;
for(var i=1;i<rows.length;i++)
{
var row=rows[i];
if(i%2==0)
{
row.bgColor="yellow";
}
else
{
row.bgColor="red";
}
}
}
$(function(){
//绑定点击事件
//this代表的是当前函数的所有者
$("#checkAll").click(function(){
//获取当前选中状态
//alert(this.checked);
//获取所有分类项的checkbox
//选择器[属性名称='属性值']
$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
//使用层级选择器来实现 tbody > tr > td > input
//$("tbody > tr > td > input").prop("checked",this.checked);
});
});
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" id="checkAll"/>
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>1</td>
<td>手机数码</td>
<td>华为，小米，尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>2</td>
<td>冰箱彩电</td>
<td>海尔，TCL，康佳</td>
<td>支持</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想，小米</td>
<td>笔记本特卖</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条，麻花，黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>5</td>
<td>床上用品/td>
<td>床单，被套</td>
<td>都是被单</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
3.使用JQ完成省市联动效果
1.准备工作：城市信息的数据
2.添加节点：
append：添加子元素
appendTo：给自己找一个父亲，将自己添加到里面
prepend：在子元素前面添加
after：在自己的后面添加一个兄弟
3.遍历的操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
var cities=["深圳市","东莞市","惠州市","广州市"];
//如何遍历
//JQ对象调用遍历
$(cities).each(function(i,n){
console.log(i+"==="+n);
});
//JQ的函数调用
$.each(cities,function(i,n){
console.log(i+">>>"+n);
});
</script>
</head>
<body>
</body>
</html>
省市联动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
$(function(){
$("#province").change(function(){
//alert(this.value);
//得到城市信息
var cities=provinces[this.value];
//清空城市select中的option
/*
var $city = $("#city");
//将JQ对象转成JS对象
var citySelect = $city.get(0);
citySelect.options.length = 0;
*/
$("#city").empty();//采用JQ的方式清空
//遍历城市数据
$(cities).each(function(i,n){
$("#city").append("<option>"+n+"</option>");
});
});
});
</script>
</head>
<body>
<!--
选择省份
-->
<select id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>
</body>
</html>
4.JQ商品的左右选择：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#a1").click(function(){
//找到被选中的那一项
//将被选中项添加到右边
$("#rightSelect").append($("#leftSelect option:selected"));
});
//将左边所有商品移动到右边
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" id="a1"> >> </a><br />
<a href="#" id="a2"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
已有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>苹果7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a><br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" />
</td>
</tr>
</table>
</body>
</html>