iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0

jQuery 是一個快數、小巧、功能豐富的 JavaScript Open Source library,主要是用來操作 DOM ,包含快速選取一個或多個來做一些事件的處理,例如:隱藏、顯示。

jQuery 的宗旨是 Write less, do more. 它的特色在於提供了相當簡便的寫法,能透過 CSS Selector、函數串接等,用很短的程式碼來做到想要處理的事件、元素的變更新增/刪除等,因此相當受到開發者的喜愛。

而在使用 jQuery 時,選擇器的使用很重要,所以先來看看選擇器吧!

選擇器


圖片來源:jQuery API

寫法
$('CSS Selector').要做的事();

基本選擇器 Basics

  • * 選擇所有元素
  • .class 選擇 class,如:$('.mybox')
  • element 選擇 element,如:$('p')
  • #id 選擇 id ,如:$('#box')
  • selector1,selectorN 可以同時選擇多個元素,如:$('div, p.box, #phone')

階層選擇器 Hierarchy

  • parent > child 選擇指定元素下的指定子元素,如:$('ul.topnav > li' )
  • ancestor descendant 選擇一個元素裡所有的後代元素,如:$('form input')
  • prev + next 選擇所有指定元素後緊跟著的元素,如:$('label + input' )
  • prev ~ siblings 選擇與指定元素之後有相同父級的同級選擇器,如:$('#prev ~ div')

基本過濾器 Basic Filters

  • :animated 選擇動畫進行中的所有元素。如:$('div:animated')
  • :eq(n) 選取第n個元素,如:$('ul.topnav li:eq(n)')
  • :even 選取偶數個元素,如:$('li:even')
  • :odd 選取奇數個元素,如:$('li:odd')
  • :first 選取第一個符合的元素,如:$('li:first')
  • :gt(n) 選取結果集中索引大於 N 的元素,n 可以為負值,如:$(':gt(3)')
  • :lt(n) 選取結果集中索引小於 N 的元素,n 可以為負值,如:$(':lt(3)')
  • :header 選擇所有的標題元素,例如 h1、h2、h3,如:$(':header')
  • :lang() 選擇指定語言的所有元素,如:$('div:lang(zh-tw)')
  • :last 選取最後一個符合的元素,如:$('li:last')
  • :not() 選擇不符合的所有元素,如:$('input:not(:checked) + span')
  • :root 選擇做為文檔根目錄的元素
  • :target 選擇由文檔的圖片、影片、聲音指示的目標元素

內容過濾器 Content Filters

  • :contains() 選擇包含指定文本的所有元素,如:$("div:contains('Home')")
  • :empty 選擇沒有子元素或內容文字的元素,如:$('td:empty')
  • :has() 選擇包含至少一個匹配指定選擇器的元素的元素。如:$('div:has(p)')
  • :parent 選擇至少有一個子節點(元素或文本)的所有元素。

可視選擇器 Visibility Filters

  • :hidden 選擇所有隱藏的元素。 如:$("div:hidden").show( 3000 );
  • :visible 選擇所有可見的元素。如:$("div:visible").click(function() { $(this).css("background", "yellow"); });

屬性選擇器 Attribute

  • [name] 選擇具有指定屬性的元素(使用任何值都可)。如:$( "div[id]" )
  • [name|=”value”] 選擇具有指定屬性的元素,其值等於給定的字符串,或者以該字符串開頭,後跟連字符( - )。
$('a[href="about.html"]')` 選擇 a 連結的 href 屬性包含 'about.hmtl'的元素
  • [name*=”value”] 選擇具有包含給定子字符串的值的指定屬性的元素。
$( "input[name*='man']" )` 選擇所有的name屬性包含’man’的input元素
  • [name~=”value”] 選擇具有指定屬性的元素,其中包含由空格分隔的給定單詞的值。
<input name="man-news">
<input name="milk man">
<input name="letter">

$( "input[name~='man']" ) -->會選到前兩個 input
  • [name$=”value”] 選擇具有指定屬性的元素,其值與給定字符串精確匹配。要區分大小寫。如:$( "input[name$='letter']" )

  • [name=”value”] 選擇具有指定屬性的元素,其值恰好等於特定值。如:
    $( "input[value='Hot Fuzz']" ) 會選到 value 等於 Hot Fuzz 的 input

  • [name!=”value”] 選擇不具有指定屬性的元素,或者俱有指定屬性但不具有特定值的元素。如:$( "input[name!='newsletter']" ) name 屬性值為 newsletter 的不選。

  • [name^=”value”] 選擇具有指定屬性的元素,其值與給定字符串完全一致。

<input name="newsletter">
<input name="milkman">
<input name="news">

$( "input[name^='news']" ) 會選到第三個 input
  • [name=”value”][name2=”value2″] 符合所有指定的屬性過濾器的元素。如:$( "input[id][name$='man']" )

子代過濾選擇器 Child Filters

  • :first-child 選擇同父代的第一個子代元素。
  • :first-of-type 選擇同一元素名稱的兄弟中的第一個元素。
  • :last-child 選擇同父代的最後一個子代元素。
  • :last-of-type 選擇同一元素名稱的兄弟中的最後一個元素。
  • :nth-child() 選擇同父代的第n個子代元素。
  • :nth-last-child() 選擇同父代的倒數第n個子代元素。
  • :nth-last-of-type() 選擇同父代的倒數第n個子代元素。
  • :nth-of-type() 選擇同父代的第n個子代元素。
  • :only-child 選擇只有一個子代的元素。
  • :only-of-type() 選擇所有沒有同名元素的兄弟元素。如:$("div button:only-child") 選擇只有一個 button 的 div

表單選擇器

  • :button 選擇所有按鈕元素和按鈕類型的元素。
  • :checkbox 選擇所有的核取方塊的元素。
  • :checked 選擇所有選中的元素。
  • :disabled 選擇所有被禁用的元素。
  • :enabled 選擇所有已啟用的元素。
  • :focus 選擇當下被 focus 的元素。
  • :file 選擇 file 類型的元素。
  • :image 選擇圖像類型的所有元素。
  • :input 選擇所有input、textarea、select 和 button 元素。
  • :password 選擇所有密碼類型的元素。
  • :radio 選擇所有選項按鈕的元素。
  • :reset 選擇所有清除按鈕的元素。
  • :selected 選擇所有選中的元素。
  • :submit 選擇所有送出類型的元素。
  • :text 選擇所有文字輸入框元素。

因為使用選擇器會有效能上的問題,盡可能使用 ID 選擇器減少使用 class 選擇器。

以上是所有的 jQuery 選擇器,各位看倌明天見囉~

參考資料:
[1] jQuery.com


上一篇
Day27:小事之 Transition 與 Animation
下一篇
Day29:小事之 jQuery 寫法與 jQuery plugin
系列文
前端路上那些重要與不重要的小事30

2 則留言

0
優悠
iT邦新手 4 級 ‧ 2019-08-09 15:39:50

幫你補充個網址:
https://lvwenhan.com/web-front/373.html
以下內容,從上面網址擷取的:

jQuery.parent(expr) //找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr) //类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

jQuery.children(expr) //返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

jQuery.contents() //返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点

jQuery.prev() //返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll() //返回所有之前的兄弟节点

jQuery.next() //返回下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll() //返回所有之后的兄弟节点

jQuery.siblings() //返回兄弟姐妹节点,不分前后

jQuery.find(expr)  //跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从p元素开始找,等同于$("p span").

我要留言

立即登入留言