jQuery 练习：取出数组字典的值, 静态对话框, clone方法应用
程序员文章站
2023-01-21 17:30:48
jQuery 中文API文档 http://jquery.cuishifeng.cn/ jQuery 取出数组字典的值 jQuery 实现全选，取消，反选功能 jQuery 实现静态对话框 jQuery clone方法应用 ......
jquery 中文api文档
jquery 取出数组字典的值
<head>
<meta charset="utf-8">
<title>title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
li = [1, 2, 3, 4, 5]
$.each(li, function(i, x){
console.log(i, x) // i 为索引，x为 value
})
dic={name:"yuan", sex:"male"}
$.each(dic, function(i, x){
console.log(i,x) // i 为 key，x为value
})
</script>
</body>
jquery 实现全选，取消，反选功能
<head>
<meta charset="utf-8">
<title>title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
<script>
function selectall(){
$("table :checkbox").each(function(){
$(this).prop("checked", true)
})
}
function cancel(){
$("table :checkbox").each(function(){
$(this).prop("checked", false)
})
}
function reverse(){
$("table :checkbox").each(function(){
if($(this).prop("checked")){
$(this).prop("checked", false);
}else {
$(this).prop("checked", true);
}
})
}
</script>
</body>
jquery 实现静态对话框
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: gold;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="back">
<input id="id1" type="button" value="click" onclick="action1(this)">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="id2" type="button" value="cancel" onclick="action2(this)">
</div>
<script>
function action1(self){
$(self).parent().siblings().removeclass("hide");
}
function action2(self){
$(self).parent().parent().children(".shade, .models").addclass("hide");
}
</script>
</body>
jquery clone方法应用
<head>
<meta charset="utf-8">
<title>title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="outer">
<div class="item">
<input type="button" value="+" onclick="fun1(this)">
<input type="text">
</div>
</div>
<script>
function fun1(self){
var clone=$(self).parent().clone();
clone.children(":button").val("-").attr("onclick", "func2(this)");
$("#outer").append(clone);
}
function func2(self){
$(self).parent().remove()
}
</script>
</body>