自學部落格: 5月 2019

—唯有自己整理過的東西，才是自己的—

系列文章目錄
HOME
HTML
CSS
JS
VUE
UTILITIES
OTHER
Search

FACEBOOK
GOOGLEPLUS
LINKEDIN
YOUTUBE
GITHUB

[教學] jQuery學習筆記第三堂（建立閱覽畫面：顯示show、隱藏hide、切換toggle）
in 馬老師雲端研究室, 網頁設計學習筆記, CSS, HTML, JavaScript, jQuery with 沒有留言

第三堂課要建立閱覽畫面，也就是我們可以透過按鍵來顯示、隱藏或切換文章內容。

讓我們先來看看完成的結果

這一堂課會學到的語法包含：

hide( ) / show( ) / toggle ( )

建立閱覽畫面首先，我們利用div這個HTML標籤，來建立一個如同下圖的網頁。div的意思是division，也就是區塊的意思。

接下來我們想在不同的區塊內，輸入不同的內容，我找了一篇我喜歡的何權峰醫師所寫的文章（原文轉自：天下雜誌）。

等等就要學著在上方的區塊中，分別建立「顯示」、「隱藏」和「切換」這三個之後會使用到的功能列；下方的區塊則放入剛剛我所找的文章。

上方區塊文字建立

一種寫法是直接將我們想要的格式（style）寫在區塊（div）中，如下圖：

另一種寫法是建立id的方式，先把id建立好，接著只要在div的地方引入id就可以了（id的建立方式是使用#，還記得嗎？），如下圖：

下方區塊文字建立

下方的區塊，我們就貼入在網路上找到的文章，貼上文章後，記得要用先前所提的 br 或 p 來整理一下文章的段落。這兩個和前面提的 div 一樣，都是HTML標籤。其中， br 是換行的意思
接著， p 則是段落的意思。也就是說，如果你想要在同一段落<p>裡面，換行的話，就會需要用到<br>。

另外一提的是，大部分的HTML標籤都會有一個開頭，和一個結束，像<p>就是表示段落開始，最後的</p>則表示段落結束。但是<br>比較特別，它就是一個單純的換行符號，所以不需要開頭或結束，在想換行的地方放上去就是了。

我們一樣要用id的方式建立內文的格式，建立好的格式如下圖：

建立假超連結

建立好文字後，我們要讓上方區塊的文字有功能，但又不是要真的進行超連結，這時候，就要來寫假的超連結，寫法就是讓超連結的網址，連到的是「#」：

在style的地方，我們同樣也可以做一些調整，來更改文字的顏色，還有各種不同功能情況下的文字型態，像是文字原本的樣子（link）、拜訪過（visited）、滑鼠移過（hover）、滑鼠按下（active）：

利用jQuery讓內文根據指令改變

接下來我們就要利用jQuery來讓內文根據上面的指令動作。
一樣要先完成我們的起手勢，上面那一行是引入jQuery，下面那行是jQuery的基本語法：

第二步，記得上一堂課中我們提到，要先讓HTML裡面的元素都讀取完之後再來進行元素的操作嗎？所以我們同樣需要 $(document).ready(function( ){ } ) 這段作為開頭。

接著要轉換一下，先把每個按鍵加上id

再來就要在jQuery中，根據不同的id做不同的動作，我們使用到的是隱藏（hide）、顯示（show）、切換（toggle）這三種語法（參考jQuery API）。

還記得我們上一堂課有提到，jQuery的基本用法是 $( ).( )，第一個括號裡放的是對象，句點後放的是動作，第二個括號內裡放的是設定。

所以這裡我可以先寫 $("#a1").click(function( ){ }) 意思是，當我#a1被點擊的時候，要做什麼...。

在function( ){ }我們就可以放要做什麼的內容，因為我希望當#a1被點擊的時候，我們的內容（#content）可以隱藏起來，所以就寫 $("#content").hide() 如果沒有特別的設定，hide後面的括號內就可以不用放任何東西。

其他的部分以此類推，完成後的語法如下，點a1的按鍵時隱藏內容；a2時顯示內容；a3時切換內容：

我還做了一些簡單的排版，看看完成的結果吧！

程式範例<!doctype html> <html> <head> <meta charset="UTF-8"> <title>閱覽頁面</title> <style> #menu{font-weight:bold; font-family:微軟正黑體; text-align:center; font-size:20px} #content{width:50%; margin:auto; line-height:20px} a:link{text-decoration:none; color:black}/*原本的樣子*/ a:visited{color:purple}/*拜訪過的樣子*/ a:hover{color:purple}/*滑鼠移過*/ a:active{text-decoration:underline}/*滑鼠按下時*/ </style> <script src="jquery-1.11.2.min.js"></script> <script> $(document).ready(function(){ $("#a1").click(function(){ $("#content").hide() }) $("#a2").click(function(){ $("#content").show() }) $("#a3").click(function(){ $("#content").toggle() }) }) </script> </head> <body> <h1 style="font-size:24px; font-family:微軟正黑體; text-align:center">很多時候事情就是這麼簡單，一次只做一件事</h1> <h2 style="width:50%; margin:auto; font-size:12px; font-family:微軟正黑體; text-align:right; color:gray">作者：何權峰，文章引用自：<a href="http://www.cw.com.tw/article/article.action?id=5065263" target=_blank>天下雜誌</a></h2> <div> <div id="menu"> <a id="a1" href="#">隱藏</a> <a id="a2" href="#">顯示</a> <a id="a3" href="#">切換</a></div> <div id="content"> <p>你是否覺得自己就如雜要的演員那般，終日勞碌不停？比如邊看電視、邊聊天，同時在滑手機？一邊說電話，同時整理手上郵件，並且把晚餐放進微波爐？ <br> 是否老是神魂遊走，魂不守舍。常因為恍神而打破東西、灑翻水、東西丟三忘四。經常還沒嚐食物的滋味，就已經吞下肚？ <br> 是否總是在想：什麼事要做？接下來還要做什麼事？卻沒注意到，自己現在在做什麼？ </p> <p> 要讓失焦的生活變專注，最簡單的生活方式就是──「一次只做一件事。」如果讀書，就專心讀書，如果睡覺，就好好睡覺……不要再去想別的事。 <br> 當身體在做一件事時，如果我們的心不在，身心沒有真正整合，往往顧此失彼。當那件事做完時，又會在下一刻想著上一刻有哪些事沒做好，連帶我們下一件事也受影響，結果沒一件事做好。例如：今天我們花了好幾個鐘頭，擔心明天學校裡一場很重要的考試，就沒辦法專心念書。如果我們躺在床上整晚睡不著覺，煩惱那些沒讀懂或是沒念完的東西，到了明天考試我們一定精疲力竭，結果考試又沒考好。 </p> <p> 我每天都要寫作，除了報紙與雜誌的固定專欄外，還有一些臨時加進來的稿約和回讀者信。比如我這星期必須寫完三篇，在第一天我就開始想，要寫哪三篇，想到最後，可能一篇都寫不出來，因為三篇的主題、對象不同。後來，我開始一次只思考一個主題，專心寫好了，再去想第二個主題。這樣不但能如期完成，也不再陷入莫名焦慮。 </p> <p> 想像你參加比賽，必須將兩隻豬抱到一百公尺遠的地方，如果你先抱起一隻，接著又抱起另一隻，那就永遠沒完沒了，因為老是有一隻會從你的臂彎裡溜走。 </p> <p> 托斯卡尼尼是舉世聞名的指揮家。人生的閱歷豐富，他到過很多地方，指揮過無數的樂團，也見過無數的達官顯要。當他八十歲時，有一天兒子好奇地問他：「在您一生中，一定有過很多重大的事，您覺得自己做過最重要的事是什麼？」托斯卡尼尼回答說：「我現在正在做的事，就是我一生中最重大的事，不管是在指揮一個交響樂團，或是在剝一顆橘子。」 <br> 他說得對，如果你無法專心地剝橘子，如果你只想儘快剝來吃的話，你還是無法專心地吃橘子。當你一邊吃著橘子，你還是會一邊想著下一刻要做什麼，對橘子的味道無法細細地品嚐，也失去吃的樂趣。如果你不能專注在此刻，那你任何時刻都不可能專注，你將永遠被下一件事拖著走。 </p> <p> 你可以隨時用「此刻」這兩個字提醒自己，專注在現在所做的事，「此刻，我正在讀書……，此刻，我正在散步……，此刻，我正在睡覺……，此刻，我正在和朋友聊天……，此刻，我正在品嚐甜點……。」 </p> <p> 記住，回到此刻，專注在每個當下所做的事，其他的都不重要。很多時候事情就是這麼簡單，一次只做一件事。當你全神貫注於手上的事，就不會想著下一步的計畫，或掛念剛才做得好不好；也不會耽擱或擔心還沒做的事，你就可以從繁雜的事物中解脫出來。當你全然地投入當下所做的事情，結果自會完美呈現。</div> </div> </body> </html>

以上內容均為本人在馬老師雲端研究室學習所整理之筆記
Share:

Related Posts: