JoshS的部落格

本次課程中仍是在講選擇器的各種表示及方式

關係選擇器:

$(" #myul > li ").addClass("myboder");       // 指的是 id=myul  下的第一層li 加入 "myboder" 的css

$(" #myul li ").addClass("myboder");          // 指的是 id=myul  下的所有li   加入 "myboder" 的css

$(" label + input ").val("hello");                   // 指的是 label  後面接的input  若非label所接 擇不算

$(" form ~ input ").val("haha~~");             // 指的是form  同一層的 input 下面有範例:

Ex:

<form>
   <label>Name:</label> <input name="name" />
   <fieldset>
      <label>Newsletter:</label><input name="newsletter" />
   </fieldset>
</form>
<input name="none1" />  // 和form同一層
<div>
     <input name="none2" />
</div>
<input name="none3" />  // 和form同一層

過濾選擇器(:)

基本過濾選擇器

$("tr:first").addClass("firsttr") ;   //  止第一個<tr> 加入 "firsttr" 的css

$("tr:last").addClass("lasttr");    // 同上顧名思義  最後一個

$("tr:odd").addClass("firsttr");    //  單數的<tr>  也就是指index 位置，<注意>通常第一格位置是0 是偶數

$("tr:even").addClass("lasttr");   // 偶數的<tr>  其他同上odd

$("tr:eq(1)").addClass("firsttr");  // <tr> index 等於1的位置

$("tr:gt(1)").addClass("firsttr");   // <tr> index 大於1的位置

$("tr:lt(2)").addClass("firsttr");    // <tr> index  小於2的位置

$("tr:not(:eq(2))").addClass("firsttr");  // <tr> index 不等於2的位置 

$(":header").addClass("firsttr");         // 指所有 <h1><h2>...標簽 

內容選擇器 

$("td:contain('AA')").addClass("firsttr");  // 含有AA文字內容的td元素

$("td:empty").addClass("mydiv").html("aaa");  //  指內容中是空的<td>元素 加入 "mydiv" 的css 並填入aaa內容

$("td:parent").addClass("mytd");   //    <td>的父類別

$('div:has(p)').addClass("mydiv");  //   div內含有<p> 的加入"mydiv" css  也是(內容中含有p標籤的div元素)

可見度過濾選擇器

$('#showAll').click(function(){
$("tr:hidden").show().addClass("mytr");   // 所有<tr> 元素是hidden的都打開並加入"mytr" Css
});

$('#hiddenAll').click(function(){
$("tr:visible").hide();                                // 所有<tr> 元素是visible的都關閉
});

屬性選擇器(:)

$('input[id]').val()     // 指input中含有id屬性的 取內容value

$("input[name='poweruser']").val()  // 指input中name屬性='poweruser' 的，取value

$("input[name!='user']").each(function(index){

      alert(index +": "+ $(this).val() );

});          //   選擇標籤為input且name屬性值不等於user的元素  則指B、C

$("input[name^='user']").each(function(index){

      alert(index +": "+ $(this).val() );

});          //   選擇標籤為input且name屬性值開頭等於user的元素  則指A、C

$("input[name$='user']").each(function(index){

      alert(index +": "+ $(this).val() );

});          //   選擇標籤為input且name屬性值user結尾的元素  則指A、B

$("input[name$='user']").each(function(index){

      alert(index +": "+ $(this).val() );

});          //   選擇標籤為input且name屬性值user結尾的元素  則指A、B

$("input[name^='user'][name*='rr']").each(function(index){

      alert(index +": "+ $(this).val() );

});          //   1. 先找到標籤為input且name屬性值為user開頭的元素

               //   2. 再從中比對name屬性值是否含有rr 字串內容的元素 則指 C

屬性選擇器範例程式:

<form>
   <input type="text" id="user" name="user" value="user"/>      // A
   <input type="text" name="poweruser" value="poweruser"/>  // B
   <input type="text" name="userright" value="userright"/>        //C
</form>