[jQuery] 基本架構

程式語言：JavaScript
Library：jQuery
jQuery 官網

簡介：基本運用方法

$(document).ready(function() // 網頁載入完畢時，執行傳入的 function 物件
{
    $(Selectors).event(function() // 發生 event 時，執行傳入的 function 物件
    {
        $(this).effect(); // 對發生 event 的物件做處理
        $(Selectors).effect(); // 對指定的物件做處理
    });
});

// 即使用 jQuery 新增元件，也會附加上 event trigger
$(document).on(event, Selectors, function(e) {
 // Action
});

前置作業： 

//jQuery 2.x (IE <9 not supported)
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
//jQuery 1.x
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

何謂 DOM (Document Object Model)？

在瀏覽視窗（window）中
包含一份或數份的 HTML 文件（document），文件中又包含了各種物件（object）
當 HTML 被載入瀏覽器時，即會產生一個 document 物件
document 又是 window 的一部分，故可用 window.document

在 HTML DOM (Document Object Model)，任何東西皆是 node
  • document 本身是 node
  • 所有 HTML elements 是 element nodes
  • 所有 HTML attributes 是 attribute nodes
  • 所有在 HTML elements 中的 Text 是 text nodes
  • Comments 是 comment nodes


如何指定 Selectors？與 css 類似，可以同時使用

參考：jQuery Selectors
  • *
    例：$("*") => 所有 elements
  • ,
    例：$("a, b, c") => 可用逗號隔開，表示 a or b or c
  • #id
    例：$("#id") => 指定 id
  • .class
    例：$(".class") => 指定有同樣的 class
  • element
    例：$("p") => 指定所有 <p>
  • :first
    例：$("p:first") => 指定第一個 <p>
  • :last
    例：$("p:last") => 指定最後一個 <p>
  • :even
    例：$("tr:even") => 指定偶數的 <tr>
  • :odd
    例：$("tr:odd") => 指定奇數的 <tr>
  • :first-child
    :nth-child(n)
    例：$("p:first-child") => 指定 <p> 且又是 parent 內的第一個 child
  • :last-child
    :nth-last-child(n)
    例：$("p:nth-last-child(2)") => 指定 <p> 且又是 parent 內的倒數第二個 child
  • :first-of-type
    :nth-of-type(n)
    例：$("p:first-of-type") => 指定 <p> 且又是 parent 內的第一個 <p>
  • :last-of-type
    :nth-last-of-type(n)
    例：$("p:nth-last-of-type(2)") => 指定 <p> 且又是 parent 內的倒數第二個 <p>
  • :only-child
    例：$("p:only-child") => 指定 <p> 且又是 parent 內的唯一的 child
  • :only-of-type
    例：$("p:only-of-type") => 指定 <p> 且又是 parent 內的唯一的 <p>
  • parent > child
    例：$("div > p") => 指定 <div> 下的 <p>，不包括孫子輩
  • parent descendant
    例：$("div  p") => 指定 <div> 下的 <p>，包括孫子輩
  • element + next
    例：$("div + p") => 指定緊接著 <div> 的同輩 <p>
  • element ~ siblings
    例：$("div ~  p") => 指定 <div> 之後的所有同輩 <p>
  • :eq(index)
    例：$("ul li:eq(3)") => 指定<ul> 中，第四個 <li> (從 0 開始數)
    p.s. $("table td:eq(0)") 與 $("tr td:eq(0)") 前者只會找到一個，後者會找到多個
            因為前者是指物件 table 中的第一個 td
  • :gt(no)
    例：$("ul li:gt(3)") => 指定<ul> 中，第四個之後的 <li> (從 0 開始數)
  • :lt(no)
    例：$("ul li:lt(3)") => 指定<ul> 中，第四個之前的 <li> (從 0 開始數)
  • :not(selector)
    例：$("input:not(:empty)") => 指定非 empty 的 input
  • :header
    例：$(":header") => 指定所有 header <h1>, <h2> ...
  • :animated
    例：$(":animated") => 指定所有正在運行 jQuery 動畫的物件像 slideToggle or animate
  • :focus
    例：$("p") => 指定目前 focus 的 element
  • :contains(text)
    例：$("p:contains(is)") => 指定 text 中有 is 的 <p>
  • :has(selector)
    例：$("div:has(p)") => 指定有 <p> 的 <div>
  • :empty
    例：$(":empty") => 指定所有 empty 的 element，像<p></p>
  • :parent
    例：$("td:parent") => 指定所有 有 child 的 <td> ，甚至包括 text child
  • :hidden
    例：$("p:hidden") => 指定所有隱藏的 <p>，只有不佔空間的才是
  • :visible
    例：$("table:visible") => 指定所有看得見的 <table>
  • :root
    例：$(":root") => 指定 root，通常為 <html>
  • :lang(language)
    例：$("p:lang(de)") => 指定 lang 為 de 的 <p>
  • [attribute]
    例：$("[href]") => 指定所有 有 href 屬性的 elements
  • [attribute=value]
    例：$("[href='default.htm']") => 指定屬性 href 為 'default.htm' 的 elements
  • [attribute!=value]
    例：$("[href!='default.htm']") => 指定屬性 href 不為 'default.htm' 的 elements
  • [attribute$=value]
    例：$("[href$='.jpg']" => 指定屬性 href 結尾為 '.jpg' 的 elements
  • [attribute|=value]
    例：$("[title|='Tom']") => 指定屬性 title 為 'Tom' 或開頭到連字號一樣如 'Tom-abc' 的 elements
  • [attribute^=value]
    例：$("[title^='Tom']") => 指定屬性 title 開頭為 'Tom' 的 elements
  • [attribute~=value]
    例：$("[title~='hello']") => 指定屬性 title 包括 'hello' 字的 elements 如 hello word
  • [attribute*=value]
    例：$("[title*='hello']") => 指定屬性 title 包括 'hello' 的 elements 如 abchelloword
  • :input
    例：$(":input") => 指定所有 <input>
  • :text
    例：$(":text") => 指定所有 type="text" 的 <input>
  • :password
    例：$(":password") => 指定所有 type="password" 的 <input>
  • :radio
    例：$(":radio") => 指定所有 type="radio" 的 <input>
  • :checkbox
    例：$(":checkbox") => 指定所有 type="checkbox" 的 <input>
  • :submit
    例：$(":submit") => 指定所有 type="submit" 的 <input>
  • :reset
    例：$(":reset") => 指定所有 type="reset" 的 <input>
  • :button
    例：$(":button") => 指定所有 type="button" 的 <input>
  • :image
    例：$(":image") => 指定所有 type="image" 的 <input>
  • :file
    例：$(":file") => 指定所有 type="file" 的 <input>
  • :enabled
    例：$(":enabled") => 指定所有 enabled 的 <form> elements
  • :disabled
    例：$(":disabled") => 指定所有 disabled 的 <form> elements
  • :selected
    例：$(":selected") => 指定所有 <select> 內的 selected elements
  • :checked
    例：$(":checked") => 指定所有 checked 的 elements

留言

張貼留言