20190715-jQuery实例
——Javee
案例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
width: 200px;
list-style-type: none;
border: 1px solid #0000FF;
}
li:nth-of-type(1){
cursor: pointer;
user-select:none;
}
li:nth-of-type(2){
border-top: none;
}
</style>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<ul>
<li>点击演示动画</li>
<li>点击演示动画点击演示动画点击演示动画点击演示动画点击演示动画点击演示动画点击演示动画</li>
</ul>
<script>
$("li:first").click(function(){
//$(this).next("li").slideToggle(); //自动显示或者隐藏
//$(this).next("li").fadeToggle(); //自动淡入或者淡出
//$(this).next("li").toggle(1000); //1s内自动消失或出现
$(this).next("li").fadeTo(1000,0.5); //1s内透明度改为0.5
});
</script>
</body>
</html>案例二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 310px;
margin: auto;
}
select{
float: left;
width: 150px;
height: 200px;
margin-left: 5px;
}
</style>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<select id="menu1" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
<option value="7">选项8</option>
</select>
<select id="menu2" multiple>
</select><br />
<button id="right" style="margin-left: 40px;">></button>
<button id="rightAll">>>></button>
<button id="left" style="margin-left: 80px;"><</button>
<button id="leftAll"><<<</button>
</div>
<script>
function sortSelected(obj1, obj2){
return $(obj1).val() - $(obj2).val();
}
$("#right").click(function(){
$("#menu2").append($("#menu1>option:selected"));
var menuSort = $("#menu2>option").sort(sortSelected);
$("#menu2").empty().append(menuSort);
});
$("#rightAll").click(function(){
$("#menu2").append($("#menu1>option"));
var menuSort = $("#menu2>option").sort(sortSelected);
$("#menu2").empty().append(menuSort);
});
$("#left").click(function(){
$("#menu1").append($("#menu2>option:selected"));
var menuSort = $("#menu1>option").sort(sortSelected);
$("#menu1").empty().append(menuSort);
});
$("#leftAll").click(function(){
$("#menu1").append($("#menu2>option"));
var menuSort = $("#menu1>option").sort(sortSelected);
$("#menu1").empty().append(menuSort);
});
</script>
</body>
</html>
案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#win{
width: 700px;
text-align: center;
margin: auto;
line-height: 50px;
}
#win>div{
width: 500px;
margin: auto;
}
#win>div>table{
margin: auto;
}
#win>div>table th{
width: 100px;
}
</style>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#submit").click(function(){
var nameVal = $("#name").val();
var emailVal = $("#email").val();
var salaryVal = $("#salary").val();
var arr = new Array();
arr.push("<tr>");
arr.push("<td>" + nameVal + "</td>");
arr.push("<td>" + emailVal + "</td>");
arr.push("<td>" + salaryVal + "</td>");
arr.push("<td><a href='javascript:;'>del</a></td>");
arr.push("</tr>");
if($.trim(nameVal) && $.trim(emailVal) && $.trim(salaryVal)){
$("table").append(arr.join(""));
}
$("#name").val("");
$("#email").val("");
$("#salary").val("");
});
$('table').on("click","a", function(){
$(this).parent().parent().remove();
//$(this).parents("tr").remove();
});
});
</script>
</head>
<body>
<div id="win">
name<input type="text" id="name" />
email<input type="text" id="email" />
salary<input type="text" id="salary" /><br />
<input type="button" value="submit" id="submit" />
<hr />
<div>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<th>name</th>
<th>email</th>
<th>salary</th>
<th></th>
</thead>
</table>
</div>
</div>
</body>
</html>
on()可以为后面js加载的节点动态绑定事件：例如上例标黄的部分
$(selector).on(event,childSelector,data,function)
| event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值，也可以是数组。必须是有效的事件。 |
| childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 可选。规定当事件发生时运行的函数。 |
案例3：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
省<select id="province">
<option>--请选择--</option>
</select>
市<select id="city">
<option>--请选择--</option>
</select>
<script>
var provinces = [
{"省":"陕西","provinceId":1},
{"省":"江西","provinceId":2},
{"省":"江苏","provinceId":3}
];
var citys = [
{"城市":"西安","cityId":1,"provinceId":1},
{"城市":"咸阳","cityId":2,"provinceId":1},
{"城市":"宝鸡","cityId":3,"provinceId":1},
{"城市":"延安","cityId":4,"provinceId":1},
{"城市":"渭南","cityId":5,"provinceId":1},
{"城市":"汉中","cityId":6,"provinceId":1},
{"城市":"南昌","cityId":7,"provinceId":2},
{"城市":"九江","cityId":8,"provinceId":2},
{"城市":"赣州","cityId":9,"provinceId":2},
{"城市":"鹰潭","cityId":10,"provinceId":2},
{"城市":"南京","cityId":11,"provinceId":3},
{"城市":"苏州","cityId":12,"provinceId":3},
{"城市":"南通","cityId":13,"provinceId":3},
{"城市":"徐州","cityId":4,"provinceId":3}
];
for (var i = 0; i < provinces.length; i++) {
var province = provinces[i].省;
var provinceId = provinces[i].provinceId;
var str = "<option value=" + provinceId + ">" + province + "/option>";
$("#province").append(str);
}
$("#province").change(function(){
$("#city>option:gt(0)").remove();
var province = $(this).find("option:selected");
var provinceId = province.val();
for (var i = 0; i < citys.length; i++) {
if(citys[i].provinceId == provinceId){
var str = "<option value=" + citys[i].cityId + ">" + citys[i].城市 + "</option>";
$("#city").append(str);
}
}
});
</script>
</body>
</html>
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
