版权声明:转载请注明出处 https://blog.csdn.net/hawk_2016/article/details/82887713
Jquery项目实操练习
项目练习网址
在网络上搜集到的一个好网址:里边有39个实例,适合新手实操练习来掌握Jquery知识点。模仿操作,但不局限于照着敲代码,主要是属性里边的逻辑构架。
如果操作中与例子有差异的,我也会备注。
http://www.bluestep.cc/39个web经典常用jquery实例/
1、项目一:tab选项卡
html语句:
备注说明:在chrome浏览器中,不能用click事件来修改disabled属性值。要不在浏览器中不能呈现效果。
<!DOCTYPE html>
<lang="en">
<head>
<script src="jquery-3.3.1.js"></script>
<script src="test.js"></script>
<link type="text/css" rel="styleSheet" href="test.css" </head> <body>
<div class="tab">
<ul>
<li class="active">国内新闻</li>
<li>国际新闻</li>
<li>经济新闻</li>
</ul>
<div class="tab-content">
<div class="local-new" style="display:block">
<fieldset>
<legend>登录</legend>
姓名:<input type="text"><br><br>
性别:<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
<input type="radio" name="sex" id="secrect"><label for="secrect">保密</label><br><br>
<input type="checkbox" name="" id="agree"><label for="agree">我同意以上协议</label><br><br>
<input type="button" id="prestep" value="上一步">
<input type="button" id="nextstep" value="下一步" disabled>
</fieldset>
</div>
<div class="international-new" style="display:block">国际新闻</div>
<div class="ecology-new" style="display:block">经济新闻</div>
</div>
</div>
</body>
</html>
css语句:
* {
margin: 0px;
padding: 0px
}
.tab {
width: 99%;
margin: 20px auto;
border: 5px solid #cccccc;
}
.tab ul {
height: 40px;
line-height: 40px;
}
.tab ul li{
list-style: none;
float: left;
height: 40px;
line-height: 40px;
width: 33%;
text-align: center;
background-color: dodgerblue;
margin-right: 2px;
cursor: pointer;
font-family: 华文琥珀;
font: bold;
}
.tab ul li.active{
background-color: aqua;
}
.tab ul li:first-child{
margin-left: 5px;
}
.tab ul li:last-child{
margin-right: 0px;
}
.tab-content div{
display: none;
height: 500px;
}
.local-new{
padding: 20px;
}
fieldset{
margin: 50px;
padding: 20px;
}
input[type='text']:focus{
background-color: lightyellow;
}
input[type='radio']:checked+label{
font-weight: bold;
}
#nextstep :disabled{
background-color: #ccc;
}
#nextstep :enabled{
font-weight: bold;
font-style: italic;
}
p:lang(zh-cn){
font-family: 微软雅黑;
}
p:lang(us-en){
font-family: Arial, Helvetica, sans-serif;
}
html语句:
$(function () {
$('.tab ul li').mouseover(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.tab-content>div:eq(' + $(this).index() + ')').css('display', 'block').siblings().css('display', 'none');
});
$('#agree').change(function () {
// console.log(!$(this).attr('ch?ecked'));
$('#nextstep').prop('disabled',!$(this).prop('checked'));//说明在chrome浏览器中,不能用click事件来修改disabled属性值,要不在浏览器中不能呈现效果。
});
})
2、项目二:百度风云榜
html语句:
<html>
<head>
<script src="jquery-3.3.1.js"></script>
<script src="list.js"></script>
<link type="text/css" rel="stylesheet" href="list.css">
</head>
<body>
<div>
<ul id="bang">
<li>
<span>事件</span>
<ul>
<li>最近</li>
<li>上周</li>
<li>上月</li>
</ul>
</li>
<li>
<span>娱乐</span>
<ul>
<li>游戏</li>
<li>电影</li>
<li>电视</li>
</ul>
</li>
<li>
<span>人物</span>
<ul>
<li>美女</li>
<li>帅哥</li>
<li>明星</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
js语句:
$(function(){
$('#bang span').click(function () {
$(this).parent().toggleClass('on').siblings().removeClass('on');
});
})
css语句:
*{
margin: 0px;
padding:0px;
}
#bang{
width: 150px;
border: solid #ccc;
padding: 5px;
margin: 50px;
background-color: darkolivegreen;
display: block;
color: white;
}
#bang li{
list-style-type: none;
line-height: 24px;
}
#bang li.on span{
background-image: url(close.png);
}
#bang li.on ul{
display: block;
padding-left:50px;
}
#bang li span{
background: url(open.png) no-repeat left center;
padding-left:50px;
cursor: pointer;
}
#bang li ul{
display: none;
margin-left: 20px;
}