[JQuery]Selector使用教學

JQuery提供的提供了許多selector用法 >>連結<<
熟悉這些Selector可以讓你快速的選到正確的物件，提升開發速度，以下替各位整理一些常用的指令

  //選取所有元素
  $('*');
  
  //使用HTML DOM選取（常用selector）
  $('a');$('div');$('p');$('input');
  
  //使用class選取（常用selector）
  $('.link');
  
  //使用type選取（常用selector）
  $(':checkbox');

xxx 
OOO
+++

//$('selector[attribute="value"]')選取attribute為title且value為link1
$('a[title="link1"]').size(); //1

//$('selector[attribute|="value"]')選取attribute為url且value開頭單字為en
$('a[url|="en"]').size(); //2

//$('selector[attribute*="value"]')選取attribute為name且value內容包含man(任意位置)
$('a[name*="man"]').size(); //3

//$('selector[attribute~="value"]')選取attribute為name且value內容包含完整單字good
$('a[name~="good"]').size(); //1

//$('selector[attribute^="value"]')選取attribute為title且value開頭為link
$('a[title^="link"]').size(); //3

//$('selector[attribute$="value"]')選取attribute為name且value結尾包含man
$('a[name$="man"]').size(); //2

//選取第一個a
$('a:first').text();//XXX
$('a').eq(0).text();//OOO

//選取第二個a
$('a:eq(1)').text();//OOO
$('a').eq(1).text();//OOO

//選取最後一個a
$('a:last').text();//+++

//選取有class這個attribute的物件
$('a[class]').text();//xxx

//選取子物件為img的物件
$('a:has(img)').size();//1

//選取index 1,3,5,7....的物件
$("a:odd").css("background-color", "#bbbbff");
 

 //取得下拉式選單選取得值
  $('select[name="sel1"] option:selected').text();
  
  //取得所有class為Ck_add且被選取的checkbox
  $('input[class="Ck_add"]:checked').size();
  
  //選擇正在播放動畫的DIV
  $('div:animated');

  

    
Corey
    
Yehuda
    
Adam
    
Todd
  
  

    Nobody
    
Jorn
    
Scott
    
Timo
  

//$('selector:gt(index)') 取index後的所有p
$( "p:gt(1)" ).text('oo');
//$('selector:gt(-index)') 取得總數量減去index後的所有p
$( "p:gt(-2)" ).text('xx');


//各區塊內第一個變色
$("span:first-of-type").css('background-color','#123');
//區塊內最後一個變色
$("span:last-of-type").css('background-color','#123');