精做高難度防水抓漏/壁癌/油漆等工程
責任施工、合約保固!
代書新屋裝潢.舊屋裝修.合格裝潢
裝修證照.是專業施工品質的保障

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] jQuery 選取元素

房東:小強
發表時間:2012-01-15


jQuery 選取元素 (Selectors)


jQuery 最基本的中心思想就是以「選取 DOM 元素為開始」,接著就是對它們作一些事。


jQuery 在選取元素方面採用 CSS 選擇器的語法 (CSS1、CSS2、CSS3),此外透過 plugin 你也可以使用 XPath 語法,我們直接看幾道範例你就會明白怎麼在 jQuery 中用 CSS Selectors 選取元素:


語法 (Syntax)


$(selectors);

 


tag selector


jQuery 中


$("a"); // 取得頁面中所有的<a>標籤元素

JS DOM 中


document.getElementsByTagName("a");

CSS 中


a {}

 


 


id selector


jQuery 中


$("#container"); // 取得id為container的元素

JS DOM 中


document.getElementById("container");

CSS 中


#container {}

 


 


class selector


jQuery 中


$(".content"); // 取得class name為content的所有元素

JS DOM 中


document.getElementsByClassName("content");
// FF3、或自己實作這個函式

CSS 中


.content {}

 


 


同樣道理,CSS中有的你都能依樣畫葫蘆


jQuery 中


$('#container a'); // 取得id為container之元素其內部的所有連結

CSS 中


#container a {}



jQuery 中


$("div > p"); // 取得div父元素其下所有的p子元素

CSS 中


div > p {}



jQuery 中


$("tr:first"); // 取得第一個找到的tr標籤元素

CSS 中


tr:first {}



jQuery 中


$("input[name='newsletter']"); // 取得其name屬性值為newsletter的input元素

CSS 中


input[name='newsletter'] {}

 


jQuery Selectors 取回的元素之型態?


jQuery 物件 ($) 會將匹配到的元素以「陣列」型態返回一個 jQuery 物件,也就是說你可以像下面這樣取得被匹配到元素的個數:


// 選取到幾個<a>?
$('a').length;
$('a').size();

 


 


jQuery 物件 → 實際 HTML DOM 元素


正如上述,取得的元素是一個 jQuery 物件,因此如果我們作下面這樣操作是會產生錯誤的:


$("#container").style.display = "none";



WHY?因為 style is not defined。(jQuery 物件沒 style 這屬性,因為它不是 DOM 物件嘛!)


 


jQuery 物件只能使用 jQuery 的方法;而 DOM 物件只能使用 DOM 物件的方法。

 


如果你想操作實際的 DOM 元素怎麼辦? jQuery 提供下面的方法來處理這問題:


/* 轉換為真實 DOM 元素集合 */
var container = $("#container").get();
/*
取得 $(".containers") 元素集合裡的第X個 DOM 元素
get後面接的是索引值,索引值由0開始
*/

var containers = $(".containers").get(0);
或,您也可以這樣
var container = $("#container")[0];



我們再來看看,可以正確執行的 Code 應該是這樣的:


$("#container").get(0).style.display = "none";

 


DOM 物件 → jQuery 物件


反過來,如果你想將 DOM 轉為 jQuery 物件,只要將 DOM 傳入「$()」:


jQuery(elements);

$(elements);

 


如:


$(document.getElementById("id"));



http://webdesign.kerthis.com/jquery/jquery_selectors

http://stackoverflow.com/questions/306583/this-selector-and-children





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!

  • 1 樓住戶:小強
    發表時間:2012-01-21

    先前一篇提到jquey的方式


    接下來說明Jquery的選取方式


    原則上很簡單
    分為基本六個
    1. #id 編號
    2. element元素
    3. class類別
    4. class.class
    5.* 萬用字元
    6.selector1, selector2, selectorN 元素共用
    第六個選項


    第一個id 就是在標籤內輸入id 的名稱
    例如


    那在jquery選取時就可以用 $("#ele01")
    第二種 元素.所謂的元素指的是 標籤本身
    例如

    那在jquery選取時就可以用$("div")


    第三種 類別 就是在標籤內輸入 class 名稱
    例如
    或是

    此時div 及 span 都是套用同一個class
    那在jquery選取時就可以用$('.c1')
    第四種 類別中的類別 這樣的方式比較抽象
    但是以類別的角度來看.其實是差不多的
    例如
    這樣的方式可以用 $('.c1.c2')的方式選取
    第五種 萬用字元 簡單來說就是"所有"的意思
    $(" * ")=>所有的元素都選取
    第六種 共用,所謂的共用就是有好幾個都要使用同一個動作.所以要"一起選"
    例如$("#ele01 , div , .c1")這樣就取了三種東西.這樣的方式一起選取好幾個一起再套用
    在CSS中也有相同的選取方式


    以上的選取方式為Basic的選取方式 當然還有再進一步的選取方式



    2 樓住戶:小胖
    發表時間:2012-01-22
    ,再呼叫.children()方法選取屬於該的所有子元素

    工廠函數$()

    $()會將放到「()」中的任何元素自動執行循環遍歷,並會被保存到一個jQuery物件中,所以$(…)表示這是一個jQuery物件。



    $(expr[, context]) = jQuery(expr[, context])

    (jQuery API文件 / 核心 / jQuery 核心函數)

    說明:這個函數接收一個包含 CSS 選擇器的字符串,然後用這個字符串去匹配一組元素。

    參數:

    expression (String) : 用來查找的字符串

    context (Element, jQuery) : (可選) 作為待查找的 DOM 元素集、文檔或 jQuery 對象

    eg:$("div > p") //找到所有 p 元素,並且這些元素都必須是 div 元素的子元素



    $(elements) = jQuery(elements)

    (jQuery API文件 / 核心 / jQuery 核心函數)

    說明:將一個或多個DOM元素轉化為jQuery對象。這個函數也可以接收XML文檔和Window對象(雖然它們不是DOM元素)作為有效的參數。

    參數:

    elements:一個或一組DOM元素

    eg:

    $(document.body).css( "background", "black" ); //設置頁面背景色

    $(myForm.elements).hide(); //隱藏一個myForm單中所有元素



    $( html[, ownerDocument]) = jQuery(html[, ownerDocument])

    (jQuery API文件 / 核心 / jQuery 核心函數)

    說明:根據提供的原始 HTML 標記字符串,動態創建由 jQuery 對象包裝的 DOM 元素。

    可以傳遞一個手寫的 HTML 字串,或者由某些模板引擎或插件創建的字串,也可以是通過 AJAX 加載過來的字串。這個字符串可以包含斜槓\ (比如一個圖像地址),還有反斜槓/。

    參數:

    html (String) : 用於動態創建DOM元素的HTML標記字符串

    ownerDocument (Document) : 可選,創建DOM元素所在的文檔



    創建單個元素時,請使用閉合標籤或 XHTML 格式。

    例如,創建一個span:

    $(document.createElement("span")); //在jQuery中使用javascript創建單一個 span元素

    $("") 或 $(""); //在jQuery中的方便寫法,不要用 $("")

    $("

    Hello

    ").appendTo("body"); //動態創建一個 div 元素(以及其中的所有內容),並將它追加到 body 元素中



    [注意]在創建 input 元素的時候會有限制

    創建一個 元素必須同時設定 type 屬性。因為微軟規定 元素的 type 只能寫一次。

    $("").attr("type", "checkbox"); // 在 IE 中無效

    $(""); // 在 IE 中有效






    (-p20-)

    CSS的 子元素組合運算子(>)

    $('#selected-plays > li').addClass('horizontal');

    (-p21-)

    偽類選擇器,以冒號「:」開頭的選擇器。

    :not(expr) (jQuery API文件/ 選擇器 / 簡單)

    刪除與指定表達式匹配的元素



    屬性選擇器

    $('img[alt]') 選擇所有帶alt屬性的影像。

    $('a[title]') 選擇所有帶title屬性的鏈接(a)。

    可以以類似正規表達式的語法來搜尋由字串首(^)和字串尾($)起始的部份字串值。也可以使用星號(*)表示字串中的任意位置的字串值,或者以驚嘆號(!)代表一個反向的值。

    如:(-p23-)

    $('a[href^="mailto:"]') 尋找所有帶href屬性且以mailto開頭的錨元素(a)。

    $('a[href$=".pdf"]') 尋找所有帶href屬性並以.pdf結尾的鏈接(a)。

    $('a[href*="mysite.com"]') 尋找所有mysite.com內部鏈接。



    (-p22-)

    Xpath屬性選擇器:jQuery1.2版以前可用Xpath語法作為屬性選擇器,但目前已從jQuery函式庫核心中移除,以外掛程式的方式存在。

    XML Path Language,XML路徑語言。在XML文檔中識別不同元素或者元素值的一種語言。

    []另一種用途:在不帶前置@符號的情況下,用來指定包含在另一個元素中的元素。如:$('div[ol]')取包含一個ol元素的所有div元素。



    (-p24-)

    2-5自訂選擇器

    jQuery獨創的自訂選擇器,類似CSS偽類選擇器,以冒號「:」開頭的選擇器。

    :eq(index) (jQuery API文件/ 選擇器 / 簡單)

    獲取第N個元素,這個元素的位置是從0算起。

    :eq() ->jQuery的自訂選擇器

    .eq()->jQuery的過慮方法

    $('p:eq(1)') :指向第2組



    也可以用$("p").eq(1):同上,指向第2組



    $('div.horizonal:eq(1)') 從匹配的帶有horizonal類的div集合中選擇第二組

    [註]javascript陣列索引值是從0開始編號。而CSS則是從1開始。



    交錯地為表格列加入樣式

    :odd

    (jQuery API文件/ 選擇器 / 簡單)

    匹配所有索引值為奇數的元素,從 0 開始計數。

    $('tr:odd').addClass('alt'); //結果是,文件若有多個表格,換表格後的tr並不會從新開始索引,會從上一個表格的最後tr繼續往下計數。

    :even

    (jQuery API文件/ 選擇器 / 簡單)

    匹配所有索引值為偶數的元素,從 0 開始計數。



    (-p26-)

    修正上例中交錯地為表格列加入樣式,確保每個表格的第一列都重新計數

    $('tr:nth-child(even)').addClass('alt'); // 參數even表示索引值為偶數的子元素

    :nth-child(index/even/odd/equation)

    (jQuery API文件/ 選擇器 / 子元素)

    匹配其父元素下的第N個子元素或奇、偶子元素。

    [特點] 是jQuery中唯一一個從1開始編號的選擇器。

    :contains(text)

    (jQuery API文件/ 選擇器 / 子元素)

    匹配包含給定文字串的元素。

    [注意] 會區分英文字母的大小寫(-p27-)



    (-p27-)

    表單選擇器

    (jQuery API文件/ 選擇器 / 表單)

    :input 選擇所有表單元素 (取得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選擇所有檔案欄位 (取得type="file" 的元素)

    :hidden選擇所有隱藏欄位 (取得type="hidden" 的元素)



    (jQuery API文件/ 選擇器 / 表單對象屬性)

    :enabled 匹配所有作用中元素

    :disabled匹配所有禁用中元素

    :checked匹配所有被核取的元素(複選框、單選框等,不包括select中的option)

    :selected匹配所有選中的下拉選單option元素



    $(":radio:checked") 選取所有被核取的radio button。

    $(":password, :text:disabled") 選取所有密碼欄位,及被禁用的文字欄位。

    2-6 DOM走訪方法

    (-p28-)

    .filter() 篩選函數

    [特點] 可以用函數作為引數。

    將一個類別附加到所有的外部超連結:

    $(document).ready(function() {

    $('a').filter( function() {

    return this.hostname && this.hostname != location.hostname;

    } ).addClass('external');

    });

    //必須是一個網域名稱(this.hostname),且(&&)連結網址的網域名稱不等於目前頁面所在的網域名稱(this.hostname != location.hostname;)

    [運作方式] 用條件函數作為引數,在符合條件的元素集合(如上例的所有匹配的元素集合)中進行隱含反覆運算,並且替每一個元素(如上例的所有匹配的元素)檢測判斷條件函示的傳回值:

    true時該元素留下;false時該元素從集合中移除。(-p29-)



    格式化指定的儲存格

    (-p29-)

    .next([expr])

    (jQuery API文件/ 篩檢 / 查找)

    取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

    這個函數只返回後面那個緊鄰的唯一同輩元素,而不是後面所有的同輩元素(可以使用nextAll()方法替代)。

    可以用一個可選的表達式當引數進行篩選:

    $("p").next(".selected")。

    .nextAll([expr])

    (jQuery API文件/ 篩檢 / 查找)

    查找當前元素之後所有的同輩元素,例如某個tr內的某個td後的所有其他td。

    (-p30-)

    .prev([expr])

    (jQuery API文件/ 篩檢 / 查找)

    取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素。

    這個函數只返回前一個緊鄰的唯一同輩元素,而不是所有前面的同輩元素(可以使用prevAll()方法替代)。

    可以用一個可選的表達式當引數進行篩選:

    .prevAll([expr])

    (jQuery API文件/ 篩檢 / 查找)

    查找當前元素之前所有的同輩元素,例如某個tr內的某個td前的所有其他td。

    .siblings([expr])

    (jQuery API文件/ 篩檢 / 查找)

    取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合,不管出現在該元素的前面或後面。

    可以用可選的表達式進行篩選。

    .andSelf()

    (jQuery API文件/ 篩檢 / 串聯)

    加入先前所選的元素到當前集合中

    對於篩選或查找後的元素集合,要加入先前所選元素時將會很有用。

    $('td:contains(Henry)').nextAll().andSelf().addClass('highlight');

    .parent([expr])

    (jQuery API文件/ 篩檢 / 查找)

    取得一個包含著所有匹配元素的唯一父元素的元素集合。

    .children([expr])

    (jQuery API文件/ 篩檢 / 查找)

    取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。

    例:

    $('td:contains(Henry)').parent().children().addClass('highlight'); //選取每一列的所有儲存格,而這些儲存格裡至少有一個含有Henry字串

    [說明] 找到含有Henry字串的儲存格
    ,再用.parent()方法回到父層元素


    .find([expr])

    (jQuery API文件/ 篩檢 / 查找)

    搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

    從所有的段落開始,進一步搜索底下的span元素:

    $("p").find("span"); // 與 $("p span") 相同

    .end()

    (jQuery API文件/ 篩檢 / 串聯)

    回到最近的一個"破壞性"操作之前。即,將匹配的元素列表變為前一次的狀態。(回到前一次匹配到的)

    如果之前沒有破壞性操作,則返回一個空集。

    所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個jQuery對象的函數--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

    $("p").find("span").end(); //選取所有的p元素,查找並選取span子元素,然後再回過來選取p元素

    2-7 存取DOM元素

    (-p31-)

    為何每一個選擇器運算式和多數的jQuery方法都回傳一個jQuery物件?

    因為jQuery物件才能提供隱含反覆運算和串接的能力。

    .get()方法

    (jQuery API文件/ 核心 / jQuery對象訪問)

    取得所有匹配的 DOM 元素集合。

    直接操作 DOM 物件而不是 jQuery 物件。

    返回值是DOM 元素集合,不是 jQuery 物件。

    .get(index)方法

    (jQuery API文件/ 核心 / jQuery對象訪問)

    取得其中一個匹配的元素。

    index表示取得第幾個匹配的元素。

    這能夠讓你選擇一個實際的DOM 元素並且對他直接操作,而不是通過 jQuery 函數。

    $(this).get(0) 可以寫成 $(this)[0],後者的簡寫方式更類似DOM元素陣列的表現方式。



    想知道id是"my-element"的某個元素的標籤名:

    Var myTag = $("my-element").get(0).tagName;

    Var myTag = $("my-element").[0].tagName; //簡寫方式


    http://ladesignla.blogspot.com/2009/10/jquery2.html



     共 2 人回應  選擇頁數 【第1 頁】 

    姓名:
    佈告內容:
    其他選項: