版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Haidaiya/article/details/82928014
1 js绑定按钮和jq绑定按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
window.onload = function(){
var btn1 = document.getElementById("btn1")
btn1.onclick = function(){
//alert("nhap")
var div = document.getElementById("div")
div.innerHTML = "js修改成功"
}
}
$(function(){
$("#btn2").click(function(){
$("#div").html("jq修改成功")
})
})
</script>
<body>
<input type="button" value="js修改" id="btn1"/>
<input type="button" value="jq修改" id="btn2"/>
<div id="div">
这里的代码过会会被改变
</div>
</body>
</html>
2 定时弹出图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
//alert("nihao")
setTimeout("showPic()",3000)
})
function showPic(){
$("#img1").slideDown(2000)
setTimeout("hiddenPic()",3000)
}
function hiddenPic(){
$("#img1").slideUp(2000)
}
</script>
</head>
<body>
<img src="img/正式选课单.png" id="img1" style="display: none;" width="100%"/>
</body>
</html>
3 表格隔行换色
4 全选和不全选
方式1 属性选择器
方式2 层级选择器
5 省市联动
（1）JQuery遍历数组的两种方式
（2）省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
/*
* var cities = ["合肥市","铜陵市","芜湖市","六安市","阜阳市","宣城市","黄山市","安庆市","宿州市"]
//方式一JQ对象的遍历
$(cities).each(function(i,val){
alert(val)
})
//方式二JQ遍历函数
$.each(cities,function(i,val){
alert(val)
})
*/
var provinces = [
["合肥市","铜陵市","芜湖市","六安市","阜阳市","宣城市","黄山市","安庆市","宿州市"],
["杭州市","金华市","宁波市","绍兴市","金华市","湖州市","台州市","丽水市","温州市"],
["南京市","苏州市","常州市","徐州市","连云港市","南通市","无锡市","镇江市","扬州市"]
]
//alert("hello")
$(function(){
//alert("hello")
$("#province").change(function(){
//alert("hello")
//1.根据省查找城市
var cities = provinces[this.value]
//alert(cities)
//2.清空城市下拉选
$("#city").empty()
//3.遍历城市添加至下拉选
$(cities).each(function(i,n){
//alert(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>
涉及到的主要知识点是遍历对象和添加子节点等，这个案例还是不错的，可以多看一看
6 左右商品互选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
//alert("hello")
$("#a1").click(function(){
$("#rightSelect").append($("#leftSelect option:selected"))
})
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"))
})
$("#a3").click(function(){
$("#leftSelect").append($("#rightSelect option:selected"))
})
$("#a4").click(function(){
$("#leftSelect").append($("#rightSelect 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>
<!--左边 select中的multiple表示下拉框不再折叠
-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect">
<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="#" id="a3"> << </a> <br />
<a href="#" id="a4"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>