jQuery小案例
左侧菜单
点击其中一个，只显示该菜单下的标签，隐藏其他菜单下的标签
- 思路：为所有菜单子标签添加隐藏属性，为，为菜单标签注册click事件；点击后，this的子标签添加hide属性，菜单标签的所有兄弟标签下的子标签添加hide属性
<body>
<div id="left">
<div id="menu">
<div>菜单1
<div class="items">11</div>
<div class="items">22</div>
<div class="items">33</div>
</div>
<div>菜单2
<div class="items">11</div>
<div class="items">22</div>
<div class="items">33</div>
</div>
<div>菜单3
<div class="items">11</div>
<div class="items">22</div>
<div class="items">33</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
//js
$('#menu>div').click(function () {
$(this).find('.items').removeClass('hide').parent().siblings().find('.items').addClass('hide')
//当前点击的元素
//找到元素下items类的所有标签，移除所有隐藏属性
//显示的item的父标签的兄弟div标签
//兄弟div标签下所有的items类标签，添加隐藏属性
})
/*css*/
body,html{
margin: 0;
padding: 0;
}
#left{
width: 20%;
background-color: darkgrey;
}
#menu{
text-align: center;
width: 100%;
}
.hide {display: none;}
.items{
height: 40px;
background-color: wheat;
line-height: 40px;
}
.left{
width: 40%;
}
回到顶部
右下角的小按钮，页面下拉到一定位置后才出现，点击就返回顶部
- 思路：window对象的scroll事件，只要滚动就会触发，设置事件函数，当距离顶部距离大于300，显示一个按钮
<body>
<div style="height: 2000px;width: 100%;">内容</div>
<div id="gotop">回到顶部</div>
<script src="index.js"></script>
</body>
//js
$(window).scroll(function () {
if($(window).scrollTop()>300){
$('#gotop').removeClass('hide')
}else{
$('#gotop').addClass('hide')
}
});
$('#gotop').click(function () {
$(window).scrollTop(0)
})
/*css*/
#gotop {
position: fixed;
right: 20px;
bottom: 20px;
height: 50px;
line-height: 50px;
width: 80px;
text-align: center;
background-color: greenyellow;
}
.hide{
display: none;
}
模态框
网页上的登陆，页面变暗无法点击，弹出一个小窗，可以输入账号密码
- 思路：固定定位写一个div，占全屏大小，黑色半透明，z-index设置在普通页面上方，display设置none。写一个输入账号密码的小div，z-index设置在透明背景的上面。登陆按钮绑定点击事件，点击的时候移除两层div的display：none属性
<body>
<div>底层界面
<button id="btnLogin">登陆</button>
</div>
<div id="bkd" class="hide">模态框</div>
<div id="loginDiv" class="hide">登陆界面
<button id="btnClose">关闭</button>
</div>
<script src="index.js"></script>
</body>
//js
$('#btnLogin').click(function () {
$('#bkd').removeClass('hide');
$('#loginDiv').removeClass('hide');
})
$('#btnClose').click(function () {
$('#bkd').addClass('hide');
$('#loginDiv').addClass('hide');
})
/*css*/
body,html{
margin: 0;
padding: 0;
}
.hide {
display: none;
}
#bkd {
left: 0;
top: 0;
position: fixed;
z-index: 20;
background-color: black;
opacity: 0.5;
height: 100%;
width: 100%;
}
#loginDiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 30;
width: 300px;
height: 300px;
background-color: white;
}
登陆验证
在网站登陆的时候，如果输入错误或着输入为空会弹出提示
-
思路：在输入框下面或右边藏一个没有内容的span标签，添加红色字体样式，设置登陆按钮点击事件或输入框失去焦点事件，修改$(‘span’).text(‘输入不能为空’)
设置一个div，移除隐藏属性也可以
<body>
<form action="">
<div class="loginDiv">
<div>
<label for="username">用户名</label>
<input type="text" on id="username" name="username">
<span class="error" id="errorU"></span>
</div>
<div>
<label for="username">密 码</label>
<input type="password" on id="password" name="password">
<span class="error" id="errorP"></span>
</div>
<button>login</button>
</div>
</form>
<script src="index.js"></script>
</body>
//js
$('#username').blur(function () {
let username = $("#username").val();
if (!username){
$('#errorU').text("用户名不能为空")
}else {
$('#errorU').text("").focus()//获取焦点并清空文本
}
});
$('#password').blur(function () {
let password = $("#password").val();
if (!password){
$('#errorP').text("密码不能为空")
}else {
$('#errorP').text("").focus()
}
});
.error {
color: red;
font-size: 12px;
display: block;
}