jQuery实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.hid {
display: none;
}
.nav-content {
width: 180px;
margin: 100px 100px;
background-color: #dadac8;
}
.nav-title {
padding: 5px 0px 5px 10px;
background-color: cornflowerblue;
border: 1px solid darkgreen;
}
.small-nav li {
margin-left: 30px;
}
</style>
<title>菜单练习</title>
</head>
<body>
<div class="nav">
<div class="nav-content">
<div class="nav-title">Python</div>
<div class="small-nav hid">
<ul>
<li>数据类型</li>
<li>函数</li>
<li>面向对象</li>
</ul>
</div>
<div class="nav-title">MySQL</div>
<div class="small-nav hid">
<ul>
<li>基础</li>
<li>单表查询</li>
<li>多表查询</li>
</ul>
</div>
<div class="nav-title">JavaScript</div>
<div class="small-nav hid">
<ul>
<li>BOM</li>
<li>DOM</li>
<li>jQuery</li>
</ul>
</div>
</div>
</div>
<script>
$('.nav-title').click(function () {
if ($(this).next().hasClass('hid')){
$('.small-nav').addClass('hid');
$(this).next().removeClass('hid')
}else{
$('.small-nav').addClass('hid')
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框示例</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
.test .btn {
height: 50px;
width: 150px;
position: absolute;
left: 300px;
top: 300px;
border: 1px dashed red;
font-size: 18px;
}
.hid {
display: none;
}
.hid-box {
width: 300px;
height: 200px;
background-color: rgba(255,50,99,0.3);
color: white;
text-align: center;
padding-top: 50px;
margin: 200px 0px 0px 500px;
position: fixed;
z-index: 1000;
}
.bg {
width: auto;
height: 800px;
background-color: rgba(10,250,10,0.2);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
}
</style>
</head>
<body>
<div class="bg hid"></div>
<div class="test">
<input type="button" class="btn" value="点我打开模态框">
<div class="hid-box hid">
你站在这里不要动
<p></p>
我去给你买两个橘子
<p></p>
<input type="button" value="嗯嗯" class="close">
</div>
<script>
$('.btn').click(function () {
$('.hid-box').removeClass('hid');
$('.bg').removeClass('hid')
});
$('.close').click(function () {
$('.hid-box').addClass('hid');
$('.bg').addClass('hid')
})
</script>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选框示例</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.download {
border: 1px dashed grey;
background-color: #dadccc;
padding: 5px 0px;
width: 600px;
height: auto;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -150px;
}
.jishuhang {
background-color: #b9b9aa;
}
.oushuhang {
background-color: #dadccc;
}
</style>
<body>
<table class="download">
<thead>
<tr class="title">
<th>选择</th>
<th>歌曲名</th>
<th>演唱者</th>
<th>大小</th>
</tr>
</thead>
<tbody>
<tr class="jishuhang">
<td><input type="checkbox" value="歌曲1"> </td>
<td>《瞎几把乱写的歌》</td>
<td>付勇</td>
<td>8.88M</td>
</tr>
<tr class="oushuhang">
<td><input type="checkbox" value="歌曲2"> </td>
<td>《自己都不会唱的歌》</td>
<td>付勇</td>
<td>8.88M</td>
</tr>
<tr class="jishuhang">
<td><input type="checkbox" value="歌曲3"> </td>
<td>《一句歌词都没有的歌》</td>
<td>付勇</td>
<td>8.88M</td>
</tr>
<tr class="oushuhang">
<td><input type="checkbox" value="歌曲4"> </td>
<td>《怎么都学不会的歌》</td>
<td>付勇</td>
<td>8.88M</td>
</tr>
<tr>
<td colspan="3">
<input class="quanxuan" type="button" value="全选">
<input class="fanxuan" type="button" value="反选">
<input class="quxiao" type="button" value="取消">
</td>
</tr>
</tbody>
<script>
$('.quanxuan').click(function () {
$(':checkbox').prop('checked',true)
});
$('.quxiao').click(function () {
$(':checkbox').prop('checked',false)
});
$('.fanxuan').click(function () {
var $checkboxEles = $(':checkbox')
for (var i= 0;i<$checkboxEles.length;i++){
if ($($checkboxEles[i]).prop('checked')){
$($checkboxEles[i]).prop('checked',false)
}else{
$($checkboxEles[i]).prop('checked',true)
}
}
})
</script>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部示例</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
.main{
height: 2000px;
}
.hide{
display: none;
}
.fanhui{
background-color: #6a686d;
position: fixed;
right: 100px;
bottom: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="main">
请将你的鼠标滚轮往上滚！！！！！！！！！！
</div>
<div class="fanhui hide">
返回顶部
</div>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 100){
$('.fanhui').removeClass('hide')
}else{
$('.fanhui').addClass('hide')
}
});
$('.fanhui').click(function () {
$(window).scrollTop(0)
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框验证示例</title>
<style>
.jinggao{
color: red;
}
.hide{
display: none;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<form>
<input type="text">
<span class="jinggao hide">输入内容不能为空</span>
<script>
$(':text').blur(function () {
if($(this).val() == ''){
$('.jinggao').removeClass('hide')
}
});
$(':text').focus(function () {
$('.jinggao').addClass('hide')
})
</script>
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选操作</title>
</head>
<body>
<table border="1" style="margin: 200px 0px 0px 300px">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" value="0"></td>
<td>小明</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" value="0"></td>
<td>小花</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" value="0"></td>
<td>小虎</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
var key_flag = false;
var $bodyEle = $('body');
$bodyEle.on('keydown',function (evt) {
if (evt.keyCode === 17){
key_flag = true;
}
});
$bodyEle.on('keyup',function () {
key_flag = false;
});
$('select').on('change',function () {
var value = $(this).val();
var checkedEles = $(':checkbox');
for (var i=0;i<checkedEles.length;i++){
if (key_flag && $(checkedEles[i]).prop('checked')){
$(checkedEles[i]).parent().siblings().last().find('select').val(value);
}
}
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-03-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云数据库 MySQL
腾讯云数据库 MySQL（TencentDB for MySQL）为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。其具备6大企业级特性，包括企业级定制内核、企业级高可用、企业级高可靠、企业级安全、企业级扩展以及企业级智能运维。通过使用腾讯云数据库 MySQL，可实现分钟级别的数据库部署、弹性扩展以及全自动化的运维管理，不仅经济实惠，而且稳定可靠，易于运维。