HackMD
jQuery JavsScript函式庫
tags:jQuery JavaScript
JS jQuery函式庫寫法
<script>
//簡化寫法
$(function () {
alert("嗨~!jQuery!");
});
//原始寫法
document.ready(function () {
alert("嗨~!jQuery!");
});
</script>
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
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
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
練習程式碼如下
<!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>
顯示樣式如下:
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
新增&去除CSS樣式
addClass()
- 新增樣式
$('h2').addClass('fondRed');
removeClass()
-
移除樣式
$('h2').removeClass(); 移除所有樣式$('h2').removeClass('fondRed'); 移除套用樣式
開關CSS的樣式套用
toggleClass()
- 開關樣式
它的使用類似像一個套用CSS 的開關，使用一次就套用，再使用一次就移除
$('h2').toggleClass('fondRed'); 開關樣式
$(function(){
$('#btn').click(function(){
$('#box').toggleClass('highlight');
});
});
練習:按下Change color會變換顏色
jQuery與DOM互動
檔案物件模型（Document Object Model，簡稱DOM）
- 將文字內容新增為DOM的內容
| 方法 | 說明 |
|---|---|
| html() | 與JS中的innerHTML屬性相同，可取代DOM元素內容。 |
| text() | 與JS中的innerText屬性相同，可取代DOM元素內容。(只有純文字) |
範例:
$(document).ready(function(){
$('#box1').html('<h3>這是HTML文字</h3>');
$('#box2').text('<h3>這是純文字</h3>');
});
- 在元素的前後新增元素及子元素
| 方法 | 說明 |
|---|---|
| prepend() | 將含有HTML標籤的內容插入到指定元素前成為子元素 |
| append() | 將含有HTML標籤的內容插入到指定元素後成為子元素 |
| before() | 將含有HTML標籤的內容插入到指定元素前 $('ul').before('<h1>標題</h1>'); |
| after() | 將含有HTML標籤的內容插入到指定元素後 |
- 刪除或清空不需要的元素
| 方法 | 說明 |
|---|---|
| remove() | 將指定的元素整個刪除，消失在整個頁面中 $('div').remove(); |
| empty() | 將指定的元素中所有子元素整個清空，但是元素還是存在。 $('div').empty(); |
- 取代元素
| 取代方法 | 說明 |
|---|---|
| replaceWith() | 將指定的元素取代為HTML 字串或是jQuery 物件 $('div').replaceWith('hello,JS!'); |
| replaceAll() | 將 div 整個標籤取代為指定內容： $('Hello,JS!').replaceAll('div'); |
jQuery的事件
與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
-
網頁視窗事件
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
-
表單事件
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
-
鍵盤事件
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
範例:
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
使用bind()方法建立事件處理
$(document).ready(function(){
$('#bnt1').bind('click',sayOK);
$('#bnt2').bind('click',sayOK);
});
function sayOK(){
alert('你按到'+$(this).attr('value')+'了!');
}
- attr('value') 是呼叫 值 的函式
關於this關鍵字的使用
event.target的使用
- 可以取得觸發事件的元素
- 利用 event.target 來判斷是哪個按鈕觸發的，並進行相關的處理：
jQuery 特效
$(選擇器).特效方法(持續時間,移動方式,完成函式)
- 持續時間：必填，時間數字單位毫秒。也可以填入文字「slow」與「fast」來代表。
- 移動方式與完成函式：這二個參數並不是必填的
移動方式預設是「easing」
完成函式可以填入當特效完成後要執行的函式或是程式內容。
基本特效
| 名稱 | 說明 |
|---|---|
| show() | 顯示元素 |
| hide() | 隱藏元素 |
| toggle() | 切換顯示或隱藏元素 |
練習:
$(document).ready(function(){
$('#btnShow').click(function (){
$('#box').show(500);
});
$('#btnHide').click(function () {
$('#box').hide(500);
});
$('#btnToggle').click(function () {
$('#box').toggle(500);
});
});
滑動特效
| 名稱 | 說明 |
|---|---|
| slideDown() | 元素向下滑動 |
| slideUp() | 元素向上滑動 |
| slideToggle() | 切換向上或向下滑動元素 |
實際練習:
淡入淡出特效
| 名稱 | 說明 |
|---|---|
| fadeIn() | 元素淡入顯示 |
| fadeOut() | 元素淡出 |
| fadeToggle() | 切換淡入或淡出元素 |
| fadeTo() | 淡化透明度 |
實作:
