tags: 六角筆記王 jQuery

jQuery入門

JavaScript 與 jQuery差別

  • JavaScript要兼容各種瀏覽器比較麻煩
  • jQuery是已經幫你寫好兼容性了
  • JQuery還是依附在JavaScript 底層
  • jQuery字典

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
常用語法

$('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'屬性的內容'網址'*/

小小比較slideDownfadeOut差別:

終點都是display:none ,但slideDown 是高度減少;而fadeOut 是透明度減少,最後一瞬間跳none

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
載入 jQuery

1.到官網下載.min.js檔,另存在桌面

2.開啟一個新資料夾把.min.js檔丟入

3.開啟vscode並創立一個新html檔

4.透過script:src 載入.min.js檔

<head>
	<script src="jquery-3.6.0.min.js"></script>
</head>

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
jQuery環境設定

寫環境的起手式: 為了確保 jQuery已被瀏覽器執行成功,再來執行 jQuery內的程式碼

$(document).ready(function(){
    /*$('h1').fadeOut(5800) 想寫的指令*/;
});

$(' ') 代表的意思:選擇器的概念

$('. content ') 類別選擇器的寫法

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
jQuery 在codepen的環境設定

1.在 JS 面板,關鍵字尋找 jQuery ,並點擊加入

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

2.將 HTML 寫在 HTML 面板,jQuery 程式碼寫在 JS 面板

記得一定要寫起手式再開始打程式碼

$(document).ready(function(){
    
});

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
VS Code 上使用的擴充套件:jQuery Code Snippets

下載完jQuery Code Snippets就能使用 emmet 來快速開發的話

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
常用emmet

  • jdr:jqDocReady(基礎環境起手式)
  • 大部分的語法都是jqXXX
    例如點擊效果是jqclick 、顯示效果 jqshow

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
觸發效果的方式

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
用一個效果觸發另一個效果

第一個效果包住第二個效果

$('.button').click(function (e)/*第一個效果*/ { 
        $('h1').show()/*被觸發的第二個效果*/;
    });

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
用一個效果觸發兩個效果

要記得效果和效果間要用;區隔

$(h2).click(function (e) { 
    $(p).slidetoggle();
    $('div').hide();
});

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
jQuery鏈式效果(一個效果完接續下一個效果)

預設一個背景.bg使用鏈式效果搭配slideUp和slideDown會有跳動感

$('h3').click(function (e) { 
	$('.bg').slideUp(1000).slideDown(3000);
});

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
載入css的方式

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
動態載入css效果

1.先在css寫好一個標籤

.red{
	font-size: 30px;
	color: red;
}

2.在p段落加入(addClass) 'red'(不用再加.) 效果

$('h3').click(function (e) { 
  $('p').addClass('red');   /*增加css*/  
});

老師推薦:能用動態載入css就盡量用,這樣在管理css比較方便

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
也可以用toggleClass載入css

$('h1').click(function (e) { 
  $('p').toggleClass('red');   /*用toggle方式增加css*/  
});

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
更改屬性(以a連結做範例)

$('a').attr('href','http://www.yahoo.com.tw');
attr是更改屬性,我們更改了'href'屬性的內容'網址'

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
event事件


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
MANIPULATION操縱


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
動態載入html標籤

$('body').html('<h2>新增標籤</h2>');

body 中加入h2標籤