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').show()
$('a').attr('href','http://www.yahoo.com.tw')
$('a').slideUp()
$('a').slideUp(5500)
$('a').slideDown()
$('a').fadeOut(8000)
$('button').click(function (e) {
$('a').hide();
};
$('button').click(function (e) {
$('a').toggle() ;
};
$('a').slideToggle() ;
$('a').fadeToggle() ;
$('h1').click(function (e) {
$('p').addClass('red');
});
$('h1').click(function (e) {
$('p').toggleClass('red');
});
$('a').attr('href','http://www.yahoo.com.tw');
小小比較slideDown
和fadeOut
差別:
終點都是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(){
;
});
$(' ') 代表的意思:選擇器的概念
$('. 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比較方便
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');
});
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
標籤