jQuery

輔助JavaScript的類庫

用於簡化HTML與JavaScript之間的操作

引用

下載jquery-1.7.2.js，放到指定位置，通常在static/script/之下

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="/static/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () { // 表示頁面載入完成 之後，相當 window.onload = function () {}
            var $btnObj = $("#btnId"); // 表示按 id 查詢標籤物件
            $btnObj.click(function () { // 綁定按一下事件
                alert("jQuery 的按一下事件");
            });
        });
    </script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>

核心函數$

$ 是jQuery 的核心函數，能完成jQuery 的很多功能。$()就是調用$這個函數

傳入參數為 [ 函數 ] 時:表示頁面載入完成之後，相當於window.onload = function(){}
傳入參數為 [ HTML 字串 ] 時:會對我們創建這個html 標籤物件
傳入參數為 [ 選擇器字串 ] 時:
- $("#id 屬性值") id 選擇器，根據id 查詢標籤物件
- `$(“標籤名”) 標籤名選擇器，根據指定的標籤名查詢標籤物件
- $(".class 屬性值") 類型選擇器，可以根據class 屬性查詢標籤物件
傳入參數為 [ DOM 物件 ] 時:會把這個 dom 物件轉換為jQuery 物件

本質

jQuery物件就是DOM物件的數組 + 一系列功能函數
- 類似於String跟char的關係
$(DOM物件)就可以轉換成為 jQuery 物件
jQuery物件[下標]取出相應的 DOM 物件
但他們的屬性與方法不能相互調用

選擇器

類似於css的選擇器，$ 其實就是jQuery的選擇器

引用 https://ithelp.ithome.com.tw/articles/10095237?sc=pt

基本選擇器

jQuery 有三個最重要的選擇器，如下：
$("element")：選出所有該 element 的節點
	例如：$("p") ：選出所有 <p> </p>的節點

$("#divId")：選出所有 <div id="divId"></div> 的節點
$(".divClass")：選出所有 <div class="divClass"></div> 的節點

階層選擇器

階層屬性有以下四種：
物件中的某一種物件(空白)：$(‘#div1 p’).addClass(‘d1′);
物件中的所有物件(*)：$(‘#div1 *’).addClass("d1);
之後符合條件的第一個(+)：$(‘#div1 + p’).addClass(‘d1′);
之後符合的所有(~)：$(‘#div1 ~ p’).addClass(‘d1′);
可進來這裡觀看階層選擇器範例：http://jsfiddle.net/divaka/fuHFD/1/

子元素選擇器

$("ul li:nth-child(2)"); //第 2 個節點
$("ul li:nth-child(odd)"); //所有奇數子節點
$("ul li:nth-child(3n + 1)"); //1, 4, 7 … 個節點
$("div span:first-child") //所有的div元素的第一個子節點
$("div span:last-child") //所有的div元素的最後一個節點
$("div button:only-child") //所有只有一個 button 子節點的 div

屬性過濾選擇器

$("div[id]"); //選擇所有含有id屬性的div元素
$("input[name='Jack']"); //選擇所有的name屬性等於’Jack’的input元素
$("input[name!='Jack']"); //選擇所有的name屬性不等於’Jack’的input元素
$("input[name^='J']"); //選擇所有的name屬性以’J'開頭的input元素
$("input[name$='K']"); //選擇所有的name屬性以’k'結尾的input元素
$("input[name*='ck']"); //選擇所有的name屬性包含’ck’的input元素
$("input[id][name$='man']"); //可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素

jQuery 自訂選擇器(Custom Selectors)

:even：找出結果集中其偶數的 elements (2,4,6,8…)
:odd：找出結果集為奇數(單數)的 elements (1,3,5,7…)
:eq(N), :nth(N)：找出選擇結果集 index 為 N 的 elements
:gt(N)：找出結果集中索引大於 N 的 elements
:lt(N)：找出結果集中索引小於 N 的 elements
:first：找出結果集中的第一個 element (相當於 eq(0) 或者 nth(0))
:last：選擇結果集中的最後一個 element
:parent：在結果集中選擇 elements，它必須具有子 elements(包括文本節點)(跟 :empty 相反)
:contains(‘test’)：選擇結果集中包含有指定文本的 elements
:has(selector)：找出結果集中至少出現一次某 selector 的元素
:not(selector)：反選取指定的 selector

可視 (visibility) 選擇器

:visible 選擇所有可見(visible)的 elements
	display 屬性的值等於 visible、block、inline
	visibility 屬性的值等於 visible
:hidden 選擇所有隱藏(visible)的 elements
    display 屬性的值等於 none
    visibility 屬性的值等於 hidden

表單選擇器(Form Selectors)

:input 選擇所有表單 elements(input, select, textarea, button)
:text 選擇所有 (type="text").
:password 選擇所有 (type="password").
:radio 選擇所有 (type="radio").
:checkbox 選擇所有 (type="checkbox").
:submit 選擇所有 (type="submit").
:image 選擇所有 (type="image").
:reset 選擇所有 (type="reset").
:button 選擇所有按鈕 (type="button").
:file 選擇所有 <input type="file">.
:hidden 選擇所有隱藏的表單元素

表單狀態選擇器 (Form Selectors Filter)

$("input:enabled"); //選擇所有的可操作的表單元素
$("input:disabled"); //選擇所有的不可操作的表單元素
$("input:checked"); //選擇所有的被checked的表單元素
$("input#test:checked"); //選擇所有的被checked的 input id=test 表單元素
$("select option:selected"); //選擇所有的select 的子元素中被selected的元素

操作屬性

html() 它可以設置和獲取起始標籤和結束標籤中的內容。
- 跟 dom 屬性 innerHTML 一樣
text() 它可以設置和獲取起始標籤和結束標籤中的文本。
- 跟 dom 屬性 innerText 一樣
val() 它可以設置和獲取表單項的 value 屬性值。
- 跟 dom 屬性 value 一樣

動畫

基本動畫

show() 將隱藏的元素顯示
hide() 將可見的元素隱藏。
toggle() 可見就隱藏，不可見就顯示。
以上動畫方法都可以添加參數。
- 第一個參數是動畫執行的時長，以毫秒為單位
- 第二個參數是動畫的回呼函數 (動畫完成後自動調用的函數)

淡入淡出動畫

fadeIn() 淡入（慢慢可見）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定時長內慢慢的將透明度修改到指定的值。0 透明，1 完成可見，0.5 半透明
fadeToggle() 淡入/淡出切換

事件

與原生js事件比較

$( function(){} );
和
window.onload = function(){}
的區別？

他們分別是在什麼時候觸發？
- jQuery 的頁面載入完成之後是流覽器的內核解析完頁面的標籤創建好 DOM 物件之後就會馬上執行。
- 原生 js 的頁面載入完成之後，除了要等流覽器內核解析完標籤創建好 DOM 物件，還要等標籤顯示時需要的內容載入完成。
他們觸發的順序？
- jQuery 頁面載入完成之後先執行
- 原生 js 的頁面載入完成之後
他們執行的次數？
- 原生 js 的頁面載入完成之後，只會執行最後一次的賦值函數。
- jQuery 的頁面載入完成之後是全部把註冊的 function 函數，依次順序全部執行。

其他可能用到的事件

click() 它可以綁定按一下事件，以及觸發按一下事件
mouseover() 滑鼠移入事件
mouseout() 滑鼠移出事件
bind() 可以給元素一次性綁定一個或多個事件。
one() 使用上跟 bind 一樣。但是 one 方法綁定的事件只會回應一次。
unbind() 跟 bind 方法相反的操作，解除事件的綁定
live() 也是用來綁定事件。它可以用來綁定選擇器匹配的所有元素的事件。哪怕這個元素是後面動態創建出來的也有效

上次修改於 2022-01-02