jquery案例
案例一: 简单计时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<input type="text" class="c1">
<input type="button" value="开始" class="c2">
<input type="button" value="结束" class="c3">
</body>
<script src="jquery.js"></script>
<script>
var t;
function set_time(){
tm = new Date().toLocaleString();
$('.c1').val(tm);
}
$('.c2').click(function(){
set_time();
if (t === undefined){
t = setInterval(set_time,1000)
}})
$('.c3').click(function(){
clearInterval(t);
t = undefined;
})
</script>
</html>
案例二: 省市级联动效果
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>select联动</title> </head> <body> <select id="province"> <option>请选择省:</option> </select> <select id="city"> <option>请选择市:</option> </select> <script> data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}; // 1 找到省份下拉框和城市下拉框 var proEle = document.getElementById('province'); var cityEle = document.getElementById('city'); // 2 将省份数据添加到省份下拉框里面 // 2.1 循环创建option标签 for (var pro in data){ var optionEle = document.createElement('option'); // 2.2 给option标签添加文本内容 optionEle.innerText = pro; // 2.3 将option标签添加到省份下拉框标签中 proEle.appendChild(optionEle); } // 3 选择省份之后，将省份对应的城市数据添加到城市下拉框里面 // 3.1 用户选择，意味着用户有行为，捕获用户这个行为，通过我们的事件，此时最好的事件就是我们change事件，给省份下拉框绑定该事件 proEle.onchange = function () { //先将城市下拉框中的数据清除，然后再添加 // cityEle.innerText = ''; cityEle.innerHTML = '<option>请选择市:</option>'; var proText = this.options[this.selectedIndex].innerText; // 3.2 用户选择了对应省份之后，我们应该获取省份数据，然后去data里面找到该省份对应的城市 var cityData = data[proText]; // 3.3 循环城市数据，添加到城市下拉框里面 for (var i in cityData){ //3.4 创建option标签，添加文本内容 var optionEle2 = document.createElement('option'); optionEle2.innerText = cityData[i]; // 3.5 放到city下拉框里面 cityEle.appendChild(optionEle2); } } </script> </body> </html>
案例三: 菜单闭合的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.c1 {
cursor: pointer;
width: 200px;
line-weight: 700px;
line-height: 20px;
background-color: #f555;
}
a {
height: 30px;
width: 180px;
display: block;
line-height: 20px;
text-decoration: none;
padding-left: 20px;
}
.hide {
display: none;
</style>
</head>
<body>
<div class="c1" id="d1">菜单一
<div class="menu hide">
<a href="#" class="a1">111</a>
<a href="#" class="a1">222</a>
<a href="#" class="a1">333</a>
</div>
</div>
<div class="c1" id="d2">菜单二
<div class="menu hide">
<a href="#" class="a1">4444</a>
<a href="#" class="a1">5555</a>
<a href="#" class="a1">6666</a>
</div>
</div>
<div class="c1" id="d3">菜单三
<div class="menu hide">
<a href="#" class="a1">77777</a>
<a href="#" class="a1">8888888</a>
<a href="#" class="a1">99999</a>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script>
$('.c1').click(function(){
$('.menu').addClass('hide');
$(this).children().removeClass('hide')
})
</script>
</html>
案例四: 全选, 反选按钮效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" class="all">
<input type="button" value="反选" class="oppo">
<input type="button" value="取消" class="cancel">
<br>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" value="1" name="choose" class="choose">
</td>
<td>bob</td>
<td>running,walking</td>
</tr>
<tr>
<td>
<input type="checkbox" value="2" name="choose" class="choose">
</td>
<td>jack</td>
<td>shopping,swimming</td>
</tr>
<tr>
<td>
<input type="checkbox" value="3" name="choose" class="choose">
</td>
<td>lisa</td>
<td>reading,music</td>
</tr>
</tbody>
</table>
</body>
<script src="jquery.js"></script>
<script>
$('.all').on('click',function(){
$('.choose').prop('checked',true)
})
$('.oppo').on('click',function(){
var d = $(':checked');
$('.choose').prop('checked',true);
d.val([]);
})
$('.cancel').on('click',function(){
$('.choose').prop('checked',false)
})
</script>
</html>
案例五: 模态对话框效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增 删除</title>
<style>
.shadow {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
position: fixed;
z-index: 60;
display: none;
}
.frame {
width: 400px;
height: 600px;
background-color: white;
position: fixed;
top: 100px;
left: 450px;
z-index: 90;
display: none;
}
.span1,.span2 {
color: red;
font-size: 12px;
font-family: '楷体';
}
</style>
</head>
<body>
<input type="button" value="新增" class="add_val">
<br>
<table border="1" class="t">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody class="cont">
<tr class="">
<td><input type="checkbox" name="choose"></td>
<td>bob</td>
<td>walking</td>
<td><input type="button" value="删除" class="btn"></td>
</tr>
<tr class="">
<td><input type="checkbox" name="choose"></td>
<td>jack</td>
<td>running</td>
<td><input type="button" value="删除" class="btn"></td>
</tr>
<tr class="">
<td><input type="checkbox" name="choose"></td>
<td>lisa</td>
<td>shopping</td>
<td><input type="button" value="删除" class="btn"></td>
</tr>
</tbody>
</table>
<div class="shadow">
</div>
<div class="frame">
<label class="">
姓名:
<input type="text" class="uname">
</label>
<span class="span1"></span>
<br>
<label class="">
毕生追求:
<input type="text" class="goal">
</label>
<span class="span2"></span>
<br>
<input type="button" value="保存" class="sure_key">
<input type="button" value="取消" class="cancel">
</div>
</body>
<script src="jquery.js"></script>
<script>
// 删除按钮的功能
$('.btn').click(function () {
var d = $(this).parents('tr');
d.remove();
})
//新增按钮的功能
$('.add_val').click(function(){
$('.shadow').css({'display':'block'});
$('.frame').css({'display':'block'});
})
//点击取消按钮取消新增
$('.cancel').click(function(){
$('.shadow').css({'display':'none'});
$('.frame').css({'display':'none'});
})
//点击确定按钮新增数据
$('.sure_key').click(function(){
//获取内容
var name_str = $('.uname').val();
var goal_str = $('.goal').val();
if (name_str == ''){
$('.span1').text('不能为空哦');
return false;
}
if (goal_str == ''){
$('.span2').text('不能为空哦');
return false;
}
//增加内容
$('.cont').append(`<tr><td><input type="checkbox" name="choose"></td><td>${name_str}</td><td>${goal_str}</td><td><input type="button" value="删除" class="btn"></td></tr>`)
$('.shadow').css({'display':'none'});
$('.frame').css({'display':'none'});
$('.uname').val('');
$('.goal').val('');
})
//委托事件删除
$('.cont').on('click','.btn',function(){
var d = $(this).parents('tr');
d.remove();
})
</script>
</html>
