# jQuery JavsScript函式庫 ###### tags:`jQuery` `JavaScript` --- #### JS jQuery函式庫寫法 ```javascript= <script> //簡化寫法 $(function () { alert("嗨~!jQuery!"); }); //原始寫法 document.ready(function () { alert("嗨~!jQuery!"); }); </script> ``` ### jQuery 選擇器 ![](https://i.imgur.com/hRFrFAL.png) ![](https://i.imgur.com/jXqANDY.png) ![](https://i.imgur.com/cAi6WND.png) ==練習程式碼如下== :::spoiler ```javascript= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- <script src="js/jquery-3.4.1.js"></script> --> <script src="js/jquery-3.4.1.min.js"></script> <title>Document</title> <style> body { font-family: '微軟正黑體'; font-size: 11pt; } div { padding: 5px; float: left; height: 150px; width: 200px; margin-right: 5px; } h2 { font-size: 14pt; } .fontRed {color: #F00;} .listURL {list-style-type: circle;} </style> <script> $(function(){ $("div").css("border","1px solid #000"); $("#part1").css("background-color","#ccc"); $(".fontRed").css("font-weight","bolder"); }); $(function(){ $('tr:even').css('background-color','#FF9'); $('tr:odd').css('background-color','#CFF'); $('tr:first').css('background-color','#FCF'); }); </script> </head> <body> <div id="part1"> <h2>認識jQuery</h2> <p><span class="fontRed">jQuery</span>是目前最受歡迎的JavaScript 函式庫</p> </div> <div id="part2"> <h2>相關網址</h2> <ul class="listURL"> <li><a href="http://jquery.com/">jQuery官方網站</a></li> <li><a href="http://jquery.com/download">jQuery下載</a></li> <li><a href="http://learn.jquery.com/">jQuery學習中心</a></li> <li><a href="http://blog.jquery.com/">jQuery部落格</a></li> </ul> </div> <table width="400" border="1"> <tr> <td>相關網址</td> </tr> <tr> <td><a href="http://jquery.com/">jQuery官方網站</a></td> </tr> <tr> <td><a href="http://jquery.com/download">jQuery下載</td> </tr> <tr> <td><a href="http://learn.jquery.com/">jQuery學習中心</a></td> </tr> <tr> <td><a href="http://blog.jquery.com/">jQuery部落格</a></td> </tr> <tr> <td><a href="http://jquery.com/">jQuery官方網站</a></td> </tr> </table> </div> </body> </html> ``` ::: 顯示樣式如下: ![](https://i.imgur.com/FoIF7oK.png) ### 新增&去除CSS樣式 #### addClass() * 新增樣式 <span class="code1">$('h2').addClass('fondRed');</span> #### removeClass() * 移除樣式 <span class="code1">$('h2').removeClass();</span> 移除所有樣式 <span class="code1">$('h2').removeClass('fondRed');</span> 移除套用樣式 --- ### 開關CSS的樣式套用 #### toggleClass() * 開關樣式 它的使用類似像一個套用CSS 的開關，使用一次就套用，再使用一次就移除 <span class="code">$('h2').toggleClass('fondRed');</span> 開關樣式 ```javascript= $(function(){ $('#btn').click(function(){ $('#box').toggleClass('highlight'); }); }); ``` 練習:按下Change color會變換顏色 <iframe height="265" style="width: 100%;" scrolling="no" title="toooleClass 應用" src="https://codepen.io/rorobioao/embed/KKwZYvx?height=265&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/rorobioao/pen/KKwZYvx'>toooleClass 應用</a> by Tina (<a href='https://codepen.io/rorobioao'>@rorobioao</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> --- ## jQuery與DOM互動 >檔案物件模型（Document Object Model，簡稱DOM） * 將文字內容新增為DOM的內容 |方法|說明| |---|---| |html()|與JS中的innerHTML屬性相同，可取代DOM元素內容。| |text()|與JS中的innerText屬性相同，可取代DOM元素內容。(只有純文字)| ```javascript= 範例: $(document).ready(function(){ $('#box1').html('<h3>這是HTML文字</h3>'); $('#box2').text('<h3>這是純文字</h3>'); }); ``` * 在元素的前後新增元素及子元素 |方法|說明| |---|---| |prepend()|將含有HTML標籤的內容插入到指定元素**前**成為子元素| |append()|將含有HTML標籤的內容插入到指定元素**後**成為子元素| |before()|將含有HTML標籤的內容插入到指定元素**前**<span class="code1"> $('ul').before('&lt;h1&gt;標題&lt;/h1&gt;');</span>| |after()|將含有HTML標籤的內容插入到指定元素**後**| * 刪除或清空不需要的元素 |方法|說明| |---|---| |remove()|將指定的元素整個刪除，消失在整個頁面中<span class="code1"> $('div').remove();</span>| |empty()|將指定的元素中所有子元素整個清空，但是元素還是存在。<span class="code1"> $('div').empty();</span>| * 取代元素 |取代方法|說明| |---|---| |replaceWith()|將指定的元素取代為HTML 字串或是jQuery 物件<span class="code1"> $('div').replaceWith('hello,JS!');</span>| |replaceAll()|將 div 整個標籤取代為指定內容：<span class="code1"> $('Hello,JS!').replaceAll('div');</span>| --- ## jQuery的事件 ### 與CSS互動 * 滑鼠事件 ![](https://i.imgur.com/df3pSEu.png) * 網頁視窗事件 ![](https://i.imgur.com/V1R7xup.png) * 表單事件 ![](https://i.imgur.com/9Ik5QJf.png) * 鍵盤事件 ![](https://i.imgur.com/bVROTWA.png) 範例: ![](https://i.imgur.com/ttTyZ8q.png) ### 使用bind()方法建立事件處理 ```javascript= $(document).ready(function(){ $('#bnt1').bind('click',sayOK); $('#bnt2').bind('click',sayOK); }); function sayOK(){ alert('你按到'+$(this).attr('value')+'了!'); } ``` :::info * attr('value') 是呼叫 值 的函式 ::: ### 關於this關鍵字的使用 ### event.target的使用 * 可以取得觸發事件的元素 * 利用 event.target 來判斷是哪個按鈕觸發的，並進行相關的處理： ## jQuery 特效 ==$(選擇器).特效方法(持續時間,移動方式,完成函式)== * 持續時間：必填，時間數字單位毫秒。也可以填入文字「slow」與「fast」來代表。 * 移動方式與完成函式：這二個參數並不是必填的 移動方式預設是「easing」 完成函式可以填入當特效完成後要執行的函式或是程式內容。 ### 基本特效 |名稱|說明| |---|---| |show()|顯示元素| |hide()|隱藏元素| |toggle()|切換顯示或隱藏元素| 練習: ```javascript= $(document).ready(function(){ $('#btnShow').click(function (){ $('#box').show(500); }); $('#btnHide').click(function () { $('#box').hide(500); }); $('#btnToggle').click(function () { $('#box').toggle(500); }); }); ``` ### 滑動特效 |名稱|說明| |---|---| |slideDown()|元素向下滑動| |slideUp()|元素向上滑動| |slideToggle()|切換向上或向下滑動元素| 實際練習: <iframe height="265" style="width: 100%;" scrolling="no" title="jQuery效果-顯示隱藏" src="https://codepen.io/rorobioao/embed/bGNayQX?height=265&theme-id=default&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/rorobioao/pen/bGNayQX'>jQuery效果-顯示隱藏</a> by Tina (<a href='https://codepen.io/rorobioao'>@rorobioao</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> ### 淡入淡出特效 |名稱|說明| |---|---| |fadeIn()|元素淡入顯示| |fadeOut()|元素淡出| |fadeToggle()|切換淡入或淡出元素| |fadeTo()|淡化透明度| 實作: <iframe height="265" style="width: 100%;" scrolling="no" title="jQuery 特效" src="https://codepen.io/rorobioao/embed/gOboyqo?height=265&theme-id=default&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/rorobioao/pen/gOboyqo'>jQuery 特效</a> by Tina (<a href='https://codepen.io/rorobioao'>@rorobioao</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> --- <style> h2 { color: #2383F8; } h3 { color: #1AA340; } h4 { color: white; background-color: #2383F8; padding:8px; } .code1 { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; font-family:'Fira Code'; } .code { padding: 2px 4px; font-size: 90%; font-family:'Fira Code'; } </style>