[jQuery] 筆記(五) – 選擇器(selector) | jQuery class selector for each
jquery提供selector的機制,類似CSS抓取DOM元素的方式,針對網頁元素進行操控,選擇器背後的原理是jQuery寫定的RegularExpression方法,所以每次選擇都要跑一次RegularExpression,對於效能也有一定的影響。因此,本篇文章紀錄jQuery選擇器的相關操作方式,後面還有談到效能的議題。CSSSelectorvsjQuerySelector比較許多jQueryselector的概念其實是從CSSselector過來的,以下有幾個範例:取得第一個找到的li標籤元素$("li:first");//jQueryli:first{}//CSS取得其class屬性值為class1的input元素$("input[class=class1]");//jQueryinpu...
jquery 提供 selector 的機制,類似 CSS 抓取 DOM 元素的方式,針對網頁元素進行操控,選擇器背後的原理是 jQuery 寫定的 Regular Expression 方法,所以每次選擇都要跑一次 Regular Expression ,對於效能也有一定的影響。因此,本篇文章紀錄 jQuery 選擇器的相關操作方式,後面還有談到效能的議題。CSS Selector vs jQuery Selector 比較
許多 jQuery selector 的概念其實是從 CSS selector 過來的,以下有幾個範例:
取得第一個找到的 li 標籤元素$("li:first"); //jQueryli:first {} //CSS
取得其 class 屬性值為class1 的 input元素$("input[class=class1]"); //jQueryinput[name=newsletter] {} //CSS
取得id為container之元素其內部的所有超連結$(‘#container a’); //jQuery#container a {} //CSS
取得div父元素其下所有的p子元素$("div > p"); //jQuerydiv > p {} //CSS
基本選擇器
jQuery 有三個最重要的選擇器,如下:
$(“element”):選出所有該 element 的節點例如:$(“p”) :選出所有 <p> </p>的節點
$(“#divId”):選出所有 <div id=”divId”></div> 的節點
$(“.divClass”):選出所有 <div class=”divClass”></div> 的節點
階層選擇器
階層屬性有以下四種:物件中的某一種物件(空白):$(‘#div1 p’).addClass(‘d1′);物件中的所有物件(*):$(‘#...