###### tags: `六角筆記王` `jQuery` # jQuery入門 **JavaScript 與 jQuery差別** - JavaScript要兼容各種瀏覽器比較麻煩 - jQuery是已經幫你寫好兼容性了 - JQuery還是依附在JavaScript 底層 - [jQuery字典](https://oscarotero.com/jquery/) ## :dart:常用語法 ```jsx $('a').hide() /*隱藏a連結*/ $('a').show() /*顯示a連結*/ $('a').attr('href','http://www.yahoo.com.tw') /*arre是增加屬性的意思*/ $('a').slideUp()/*讓a連結被刪除*/ $('a').slideUp(5500)/*讓a連結經過5500(5.5秒)毫秒被刪除*/ $('a').slideDown()/*讓a連結被新增*/ $('a').fadeOut(8000)/*讓a連結經過8000毫秒(8秒)淡出*/ $('button').click(function (e) { /*讓按鈕可以有點擊效果*/ $('a').hide()/*按完按鈕後隱藏*a連結*/; }; $('button').click(function (e) { /*讓按鈕可以有點擊效果*/ $('a').toggle() /*自動幫你切換開關，搭配按鈕可以做出消失出現切換*/; }; $('a').slideToggle() /*在toggle的基礎上加上slideup和slidedown效果*/; $('a').fadeToggle() /*在toggle的基礎上加上fadein和fadeout效果*/; $('h1').click(function (e) { $('p').addClass('red'); /*動態增加css*/ }); $('h1').click(function (e) { $('p').toggleClass('red'); /*用toggle方式增加css*/ }); $('a').attr('href','http://www.yahoo.com.tw'); /*attr是更改屬性,更改了'href'屬性的內容'網址'*/ ``` --- **小小比較`slideDown`和`fadeOut`差別:** 終點都是display:none ，但`slideDown` 是高度減少;而`fadeOut` 是透明度減少，最後一瞬間跳none <br> ## :dart:載入 jQuery 1.到官網下載[.min.js](https://code.jquery.com/jquery-3.6.0.min.js)檔，另存在桌面 2.開啟一個新資料夾把.min.js檔丟入 3.開啟vscode並創立一個新html檔 4.透過`script:src` 載入.min.js檔 ```html <head> <script src="jquery-3.6.0.min.js"></script> </head> ``` <br> ## :dart:jQuery環境設定 寫環境的起手式: 為了確保 jQuery已被瀏覽器執行成功，再來執行 jQuery內的程式碼 ```jsx $(document).ready(function(){ /*$('h1').fadeOut(5800) 想寫的指令*/; }); ``` $(' ') 代表的意思：選擇器的概念 $('. content ') 類別選擇器的寫法 <br> ## :dart:jQuery 在codepen的環境設定 1.在 JS 面板，關鍵字尋找 jQuery ，並點擊加入 ![](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fdb147063-39f7-4658-bc54-81a7245791ae%2F_2021-07-02_9.22.26.png?table=block&id=d47eea55-7a15-4829-bd66-b485b714245d&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=770&userId=&cache=v2) 2.將 HTML 寫在 HTML 面板，jQuery 程式碼寫在 JS 面板 記得一定要寫起手式再開始打程式碼 ```jsx $(document).ready(function(){ }); ``` <br> ## :dart:VS Code 上使用的擴充套件：jQuery Code Snippets 下載完[jQuery Code Snippets](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)就能使用 emmet 來快速開發的話 <br> ## :dart:常用emmet - `jdr`:jqDocReady(基礎環境起手式) - 大部分的語法都是`jqXXX` 例如點擊效果是`jqclick` 、顯示效果 `jqshow` <br> ## :dart:觸發效果的方式 ### :seedling:用一個效果觸發另一個效果 第一個效果包住第二個效果 ```jsx $('.button').click(function (e)/*第一個效果*/ { $('h1').show()/*被觸發的第二個效果*/; }); ``` <br> ### :seedling:用一個效果觸發兩個效果 要記得效果和效果間要用`;`區隔 ```jsx $(h2).click(function (e) { $(p).slidetoggle(); $('div').hide(); }); ``` <br> ### :seedling:jQuery鏈式效果(一個效果完接續下一個效果) 預設一個背景.bg使用鏈式效果搭配slideUp和slideDown會有跳動感 ```jsx $('h3').click(function (e) { $('.bg').slideUp(1000).slideDown(3000); }); ``` <br> ## :dart:載入css的方式 ### :seedling:動態載入css效果 1.先在css寫好一個標籤 ```css .red{ font-size: 30px; color: red; } ``` 2.在p段落加入(addClass) `'red'(不用再加.)` 效果 ```jsx $('h3').click(function (e) { $('p').addClass('red'); /*增加css*/ }); ``` 老師推薦：能用動態載入css就盡量用，這樣在管理css比較方便 <br> ### :seedling:也可以用toggleClass載入css ```jsx $('h1').click(function (e) { $('p').toggleClass('red'); /*用toggle方式增加css*/ }); ``` <br> ### :seedling:更改屬性(以a連結做範例) ```jsx $('a').attr('href','http://www.yahoo.com.tw'); attr是更改屬性,我們更改了'href'屬性的內容'網址' ``` <br> ## :dart:event事件 <br> ## :dart:MANIPULATION操縱 <br> ## :dart:動態載入html標籤 ```jsx $('body').html('<h2>新增標籤</h2>'); ``` 在`body` 中加入`h2`標籤