當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

开发“抽屉新热榜”

發布時間：2023/12/20 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了开发“抽屉新热榜” 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　2018.11.27，終于完成了這個項目，可以說到現在，也就是今天，我把這篇博客補充完了，我把這個項目寫完了，真的對自己來說是一個值得慶祝的日子，記錄以此！

　　如果需要查看最終代碼，請移步小編的GitHub

一? 項目題目：開發“抽屜新熱榜”

　　網址如下：https://dig.chouti.com/

二? 2018.2 第一次接觸做的結果

　　（此處的寫法，都是自己剛開始編程說的，轉眼間6個月過去了，再回頭看看，感慨良多，自己打算再寫一遍，實現更多的功能）

　　這里上傳一個自己做的抽屜新熱榜的小項目，這個主要是前端知識的應用，做的和原樣還有點差距，但是一定會更新的，希望自己從這個項目中學到知識，并對css和html的相關應用更加熟練。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link type="text/css" rel="stylesheet" href="chouti.css"><div class="head-box"><div class="head-content"><a href="#" class="logo"></a><div class="action-menu"><a href="#" class="tb active">全部</a><a href="#" class="tb">42區</a><a href="#" class="tb">段子</a><a href="#" class="tb">圖片</a><a href="#" class="tb">挨踢1024</a><a href="#" class="tb">你問我答</a></div><div class="key-search"><form action="/" method="post"><input type="text" class="search-text" autocomplete="off"><a href="#" class="i"><span class="ico"></span></a></form></div><div class="action-nav"><a href="#" class="register-btn">注冊</a><a href="#" class="login-btn">登錄</a></div><div class="footer-band"></div></div></div><div class="main-content-box"><div class="main-content"><div class="content-L"><div class="top-area"><div class="child-nav"><a href="#" class="hotbtn active icons" >最新</a><a href="#" class="newbtn" >最新</a><a href="#" class="personbtn" >人類發布</a></div><div class="sort-nav"><a href="#" class="sortbtn active">即時排序</a><a href="#" class="newbtn">24小時</a><a href="#" class="newbtn">3天</a></div><a href="#" class="publish-btn"><span class="n2">發布</span></a></div><div class="content-list"><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見俄冰球運動員【環球時報-環球網報道記者趙覺珵】"原諒我們沒能保護你們免受(興奮劑丑聞的)傷害",俄羅斯總統普京31日對即將前往平昌參加冬奧會的俄羅斯運動員說出了這樣一句令人動容的話。國際奧委會此前以“系統性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網" href="#"></a></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見俄冰球運動員【環球時報-環球網報道記者趙覺珵】"原諒我們沒能保護你們免受(興奮劑丑聞的)傷害",俄羅斯總統普京31日對即將前往平昌參加冬奧會的俄羅斯運動員說出了這樣一句令人動容的話。國際奧委會此前以“系統性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網" href="#"></a></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見俄冰球運動員【環球時報-環球網報道記者趙覺珵】"原諒我們沒能保護你們免受(興奮劑丑聞的)傷害",俄羅斯總統普京31日對即將前往平昌參加冬奧會的俄羅斯運動員說出了這樣一句令人動容的話。國際奧委會此前以“系統性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網" href="#"></a></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見俄冰球運動員【環球時報-環球網報道記者趙覺珵】"原諒我們沒能保護你們免受(興奮劑丑聞的)傷害",俄羅斯總統普京31日對即將前往平昌參加冬奧會的俄羅斯運動員說出了這樣一句令人動容的話。國際奧委會此前以“系統性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網" href="#"></a></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見俄冰球運動員【環球時報-環球網報道記者趙覺珵】"原諒我們沒能保護你們免受(興奮劑丑聞的)傷害",俄羅斯總統普京31日對即將前往平昌參加冬奧會的俄羅斯運動員說出了這樣一句令人動容的話。國際奧委會此前以“系統性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網" href="#"></a></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見俄冰球運動員【環球時報-環球網報道記者趙覺珵】"原諒我們沒能保護你們免受(興奮劑丑聞的)傷害",俄羅斯總統普京31日對即將前往平昌參加冬奧會的俄羅斯運動員說出了這樣一句令人動容的話。國際奧委會此前以“系統性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網" href="#"></a></span></span></a></div></div></div></div><div id="page-area" class="page-area"><div id="dig_lcpage"><ul><li><span class="ct_pagepw">1</span></li><li><a href="#" class="ct_pagepa">2</a></li><li><a href="#" class="ct_pagepa">3</a></li><li><a href="#" class="ct_pagepa">4</a></li><li><a href="#" class="ct_pagepa">5</a></li><li><a href="#" class="ct_pagepa">6</a></li><li><a href="#" class="ct_pagepa">7</a></li><li><a href="#" class="ct_pagepa">8</a></li><li><a href="#" class="ct_pagepa">9</a></li><li><a href="#" class="ct_pagepa">10</a></li><li><a href="#" class="ct_page_edge">下一頁</a></li></ul></div></div></div><div class="footer-box"><div class="foot-nav"><a href="#" target="_blank">關于我們</a><span>|</span><a href="#" target="_blank">聯系我們</a><span>|</span><a href="#" target="_blank">服務條款</a><span>|</span><a href="#" target="_blank">隱私政策</a><span>|</span><a href="#" target="_blank">抽屜新熱榜工具</a><span>|</span><a href="#" target="_blank">下載客戶端</a><span>|</span><a href="#" target="_blank">意見與反饋</a><span>|</span><a href="#" target="_blank">友情鏈接</a><span>|</span><a href="#" target="_blank">公告</a><span>|</span></div><div class="foot-nav2"><a target="_blank" href="#"><img class="foot_e" src="footer1.gif" width="36" height="14"></a><span class="foot_d">旗下站點</span><span class="food_a">@2018chouti.com</span><a target="_blank" href="#" class="foot_b">京ICP備09053974號-3 京公安網備 110102145</a><div style="margin-top: 6px;">版權所有：北京科技有限公司</div></div></div></div></div></div></head> <body></body> </html> *{margin: 0;padding: 0; }body,button,input,select,td,textarea{font: 12px Tahoma,Verdana,Arial,Helvetica,"\5b8b\4f53,sans-serif";color: #333; }a{text-decoration: none; }body{font-size: 12px; }.head-box{background-color: #2459a2;height: 44px;width: 100%;position: fixed;top: 0px;left: 0px; } .head-content{margin: 0 auto;width :1016px;height: 44px;background-color: #2459a2;line-height: 44px;position: relative; } .logo{background: url("logo.png") no-repeat 0 0;height: 23px;width: 121px;float: left;margin-top: 11px;/*display: inline-block;*/ }.action-menu{float: left;margin-left: 20px; } .action-menu a.tb{color: #c0cddf;margin-left: -8px;padding: 0 13px 0 13px;display: inline-block;}.action-menu a.tb:hover{color: #fff;background-color: #c0cddf; }.action-menu a.active,.action-menu a.active:hover{color: #fff;background-color:#204982;} .key-search{float: right;margin-top: 5px; } .key-search .search-txt,.key-search a.i{float: left; }.key-search .search-txt{width: 91px;height: 25px;padding: 2px 2px 2px 5px; }.key-search .ico{background: url("icon.png") no-repeat 0 -197px;height: 12px;width: 15px;display: inline-block;margin-top: 6px;margin-left: 10px;}.key-search a.i{height: 32px;width: 30px;background-color: #f4f4f4;display: inline-block;border-left: none;}.action-nav{position: absolute;right:191px ;}.action-nav a{color: #fff;padding: 0 20px;display: inline-block; }.action-nav a:hover{background-color: #c0cddf; } /*------------------------------head end-------------*/.main-content-box{background-color: #ededed;width: 100%;padding-top: 44px;}.main-content{margin: 0 auto;background-color: #fff;overflow: hidden;width: 960px;height: auto!important;min-height: 700px;padding: 6px 28px 60px 28px ; } .content-L{float: left;width: 630px; } .child-nav,.sort-nav,.publish-btn{float:left; } .child-nav,.sort-nav{float: left;padding: 10px; }.publish-btn{float: right;padding: 10px;}.top-area{overflow: hidden;border-bottom: 1px solid red; }.child-nav .active{background: url("tip.png") no-repeat 0 -299px;display: inline-block;width: 60px;height: 26px;text-align: center;color: black;}.child-nav .a{display: inline-block;width: 60px;height: 26px;line-height: 26px;text-align: center;color: #369;font-weight: 700;margin-top: 30px;}.sort-nav{margin-left: 144px;margin-top: 10px; }.sort-nav .active{color: #b4b4b4; }.sort-nav a{margin-left: 10px;color: darkgreen; }.publish-btn{display: inline-block;width:80px ;height: 18px;color: #fff;background-color: #84a42b;line-height: 18px;text-align: center; }/*-------------------end top_area------- --------*/.content-list .item{border-bottom: 1px solid red;margin-top:10px }.item .new-pic{float: right;margin-top: 5px;margin-left: 15px; }.part2{padding-top:6px ;color: #ccc;margin-bottom: 12px; }.hand-icon{background:url("icon_18_118.png") no-repeat 0 0 ;width: 18px;height: 18px;display: inline-block;vertical-align: -4px;}.icon-recommend{/*background: url("icon_18_118.png");*/background-position: 0 -40px; }.icon-discuss{/*background: url("icon_18_118.png");*/background-position: 0 -100px; }.icon-collect{/*background: url("icon_18_118.png");*/background-position: 0 -140px; }.part2 .user-a span{vertical-align: -4px; }.part1 .content-kend,.part1 .content-source{color: #d4d4d4; }.part1 .content-kend{text-decoration: underline; } .part1 .show-content{color: #369;font-size: 14px;font-weight: 700; }.part b,.time-into i{color: #d4d4d4; }.share-icon a{background: url("share_icon.png");height: 14px;width: 17px;display: inline-block;vertical-align: center; }.share-site-to .share-icon a.icon-sina{background-position: 0 -90px; }.share-site-to .share-icon a.icon-douban{background-position: 0 -105px; }.share-site-to .share-icon a.icon-qqzone{background-position: 0 -120px;width: 16px;height: 14px; }.share-site-to .share-icon a.icon-tenxun{background-position: 0 -136px; }.share-site-to .share-icon a.icon-renren{background-position: 0 -151px; }.share-site-to{float: right; }.share-icon a:hover{opacity: 1; }.page-area ul li,.ct_page_edge{display: inline-block;float: left;color: #369;height: 34px;line-height: 34px;text-align: center;width: 37px;border: 1px solid #e1e1e1;border-radius:20%;margin-left: 3px; }.dig_lcpage{margin-left: 10px; }.ct_page_edge{width: 70px;}.page-area ul li:hover,.ct_page_edge:hover{color: #fff!important;background-color: #204982; }.footer-box .foot-nav{paddi }

　　下面這兩個圖，使我自己做出來的效果圖，于2018.1.26做成，先記錄于此，很多不完善的地方，但是我學到了許多東西，因為js還沒有學，所以，這個項目我肯定會修改，繼續完善。

　　這個兩個圖才是源地，也就是抽屜新熱榜的界面，我自己第一次做的與這個還有一些差距，我知道，上傳到這里的目的，其一，讓看到的盆友繼續完善，其二，也鞭策一下自己，下次完善的時候，也有個對比。

　　做完這個項目的總結：1，一定要一步步的認真思考，認真研究網頁的構架

　　　　　　　　　　　　2，對于內容，一步步的填充，不能著急，心急吃不了熱豆腐

　　　　　　　　　　　　3，命名一定要規范，代碼不止是自己看，還要其他人

　　　　　　　　　　　　4，路徑一定不要寫死，要不然修改的空間都沒有

?三? 重新開始，新的項目需求

3.1 項目需求

1.實現與抽屜新熱榜一樣的布局2.允許點贊、評論3.開發登錄、注冊頁面4.開發發貼功能

3.2 項目簡介

bootstrap框架，完成抽屜新熱榜官網頁面。導航欄，固定在頂部。注冊登錄，彈出的模態窗口。發布，彈出的模態窗口。點贊，私藏，評論的追加列表。回到頂部。

?

四，2018.11完成的結果

（此處的結果，都是自己學習一段時間編程后，實現更多的功能的結果）

　　下面這兩個圖，使我自己做出來的效果圖，于2018.11.25做成，記錄于此，這是靜態頁面圖

?　　（下面的js完成的效果圖）

五，學習中遇到的問題及其解決方法

5.1 link標簽rel屬性為search是怎么使用的？

　　通過rel="search"，把你的搜索功能放到瀏覽器的快捷搜索工具上

　　用firefox打開taobao時，看一下地址欄邊上的快捷搜索時，可以填加一個“淘寶搜索”，完成后，以后就可以直接在那里搜索東西了！

實現方法：

　　在首頁的head標簽里加上

?5.2<meta property="qc:admins" content="70003766576320416375" />是什么意思？具體功能是什么？

　　這個是讓網站加入QQ登錄接口，這段代碼可放在<head></head>之間。
　　申請騰訊接口后，會得到這樣的代碼，加入接口之后，你的網站上面的注冊登錄功能，別人可以直接用QQ登錄，省去注冊的麻煩。

5.3 <input value="1" type="hidden" class="isBan">

　　隱藏域 ?input 元素的一個屬性值type =“text” 文本框button ?按鈕radio ? ?單選框hidden ?隱藏域。

　　<input type="hidden" name="參數名" value="這里填你的參數值">
　　其實hidden只是將輸入框隱藏了，里面的值可以默認賦值或通過js賦值。
　　提交form的時候跟其他的都是一樣的。

5.4? CSS中提升優先級屬性！important的用法總結

　　語法：選擇器{樣式：值！important；}

　　說明：提升指定樣式規則的應用優先權，即!important為開發者提供了一個增加樣式權重的方法，讓瀏覽器首選執行這個語句。

例如下面語法：

div{margin-left:20px!important;margin-left:40px; }

?　　如果是在除了IE6的瀏覽器中，這些瀏覽器支持!important屬性，也就是說他們會默認讓margin-left:20px!important; 這條語句生效，下面的不帶!important聲明的樣式將不會覆蓋它，換句話說就是他的級別最高，下面的人都不能取代我！

在IE6及以下瀏覽器有個比較顯式的支持問題存在，!important在同一條規則集里不生效。請看下述代碼： div {margin-left:20px!important; } div {margin-left:40px; }

　　在上述代碼中，IE6及以下瀏覽器中div的margin-left與其它瀏覽器一致，都為20px;

　　注意： 1、IE6及更早瀏覽器下，!important在同一條規則集內不生效。
　　2、如果!important被用于一個簡寫的樣式屬性，那么這條簡寫的樣式屬性所代表的子屬性都會被作用上!important。
　　3、關鍵字!important必須放在一行樣式的末尾并且要放在該行分號前，否則就沒有效果。

?5.4? <link rel="icon" href="./images/chouti.ico"> 是什么意思？

　　這個是為了用于瀏覽器地址欄里顯示的圖片。

　　這樣寫了后，在瀏覽器的地址欄里，圖片會顯示成現在給的路徑的這個圖片，不過這個路徑好像不能改，只能是網址根目錄下的chouti.ico文件，不過現在好像不用寫這個，只要根目錄下有這個文件，瀏覽器會自動服務出來并顯示。

5.5 CSS z-index 屬性

　　z-index屬性設置元素的堆疊順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面

　　注釋：元素可擁有負的z-index屬性值

　　注釋：z-index僅能在定位元素上奏效（例如：position:absolute;）

　　簡單說，當你定義的CSS中有position屬性值為absolute，relative或者fixed，用z-index然后取值方可生效。

　　才屬性參數值越大，被層疊在最上面。

5.6 HTML中a標簽屬性的target=“_blank"是什么意思

　　<a> 標簽的 target 屬性規定在何處打開鏈接文檔。

_blank -- 在新窗口中打開鏈接 _parent -- 在父窗體中打開鏈接 _self -- 在當前窗體打開鏈接,此為默認值 _top -- 在當前窗體打開鏈接，并替換當前的整個窗體(框架頁) 一個對應的框架頁的名稱 -- 在對應框架頁中打開

5.7 CSS中font-weight屬性

　　設置文本的粗細。

　　該屬性用于設置顯示元素的文本中所用的字體加粗。數字值 400 相當于關鍵字 normal，700 等價于 bold。每個數字值對應的字體加粗必須至少與下一個最小數字一樣細，而且至少與下一個最大數字一樣粗。

值描述

normal	默認值。定義標準的字符。
bold	定義粗體字符。
bolder	定義更粗的字符。
lighter	定義更細的字符。
100 200 300 400 500 600 700 800 900	定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。
inherit	規定應該從父元素繼承字體的粗細。

5.8? href = "javascript:login()"是什么意思？

　　表示調用js的函數login，但是首先頁面內有定義好的一個login()函數。

5.9 在js開發中遇到如下問題Uncaught ReferenceError: $ is not defined

　　百度出現了下面四個原因：

1.出現這個錯誤，最可能的是引用的各個js的調用順序有誤，重新調整其引用順序看看能否解決？2.還有一個原因就是在你引用js時，路徑出錯，不是你項目中正確的文件路徑。3.還有一個原因是你的js中有某些值是不存在的。4.除了以上這個具體的錯誤，還可能遇到類似的Uncaught ReferenceError: XXXX is not defined錯誤，這類錯誤就要多檢查傳值錯誤，或者某些值不存在。

　　而我就犯了第二個錯，沒有導入路徑，當導入js的路徑就好了。

5.10，preventDefault()方法

定義：

　　取消事件的默認動作，因為瀏覽器的一些行為，是代碼不能控制的。

語法：

event.preventDefault()

說明：

?　　該方法將通知Web瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）。例如，如果type的屬性是“submit”，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。注意，如果Event對象的cancelable 屬性是 fasle，那么就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調用該方法都沒有作用。

5.11，$(this).addClass('active').siblings('li').removeClass('active')

　　意思是該元素增加一個類active，同時讓他的兄弟li去掉active類。

5.12? style="display: block"

　　display屬性設置元素如何顯示

值描述

none	此元素不會被顯示。
block	此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline	默認。此元素會被顯示為內聯元素，元素前后沒有換行符。
list-item	此元素會作為列表顯示。
run-in	此元素會根據上下文作為塊級元素或內聯元素顯示。
compact	此元素會根據上下文作為塊級元素或內聯元素顯示。
marker	?
table	此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。
inline-table	此元素會作為內聯表格來顯示（類似 <table>），表格前后沒有換行符。
table-row-group	此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group	此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group	此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
table-row	此元素會作為一個表格行顯示（類似 <tr>）。
table-column-group	此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
table-column	此元素會作為一個單元格列顯示（類似 <col>）
table-cell	此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
table-caption	此元素會作為一個表格標題顯示（類似 <caption>）

轉載于:https://www.cnblogs.com/wj-1314/p/8384638.html

總結

以上是生活随笔為你收集整理的开发“抽屉新热榜”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【短视频运营】短视频剪辑 ④ ( 将文字
下一篇： Pupil dynamics for i