Jquery项目实操练习 - 好文

Jquery项目实操练习

* 项目练习网址 <https://blog.csdn.net/hawk_2016/article/details/82887713#_2>
* 1、项目一：tab选项卡
<https://blog.csdn.net/hawk_2016/article/details/82887713#1tab_7>
* html语句： <https://blog.csdn.net/hawk_2016/article/details/82887713#html_8>
* css语句： <https://blog.csdn.net/hawk_2016/article/details/82887713#css_45>
* html语句： <https://blog.csdn.net/hawk_2016/article/details/82887713#html_126>
* 2、项目二：百度风云榜 <https://blog.csdn.net/hawk_2016/article/details/82887713#2_140>
* html语句： <https://blog.csdn.net/hawk_2016/article/details/82887713#html_141>
* js语句： <https://blog.csdn.net/hawk_2016/article/details/82887713#js_183>
* css语句： <https://blog.csdn.net/hawk_2016/article/details/82887713#css_192>

<>项目练习网址

在网络上搜集到的一个好网址：里边有39个实例，适合新手实操练习来掌握Jquery知识点。模仿操作，但不局限于照着敲代码，主要是属性里边的逻辑构架。
如果操作中与例子有差异的，我也会备注。
http://www.bluestep.cc/39个web经典常用jquery实例/
<http://www.bluestep.cc/39%E4%B8%AAweb%E7%BB%8F%E5%85%B8%E5%B8%B8%E7%94%A8jquery%E5%AE%9E%E4%BE%8B/>

<>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; }

热门工具换一换