jQuery相關知識

標籤：io   ar   使用   for   sp   div   on   cti   代碼   

1.jQuery中$符號有何作用？

   $作為jQuery的別名，如$(document).ready() 即是 jQuery(document).ready()

2.jQuery選取器有哪幾種？

   基本選取器：$("#id") —〉通過id擷取元素   

                    $(".class") —〉通過既定的類名擷取元素

                    $("p") —〉通過名稱匹配擷取元素

                    $("span,#id,...").css() —〉多個選擇合并返回

   層次選取器：$("div span") —〉div中所有的span

                    $("div > span") —〉div下的子項目span

                    $(".red + div") —〉選擇class為red的下一個div同輩元素

                    $(".red ~ div") —〉選擇class為red的元素後面的所有div同輩元素

   過濾選取器： 基本過濾選取器 { $("div:first") —〉第一個div ; $("div:last") —〉最後一個div ; $("input:not(.red)") —〉選擇class不是red的input元素;

                                            $("input:even") —〉index為偶數的input元素; $("input:odd") —〉index為奇數的input元素; $("input:eq(1)"), $("input:gt(1)"),

                                            $("input:lt(1)") 皆是根據index（等於、大於、小於）來選擇元素;  $(":header") —〉選取網頁中所有 h1 h2 h3 ... ; 

                                            $(":focus") —〉擷取當前獲得焦點的元素 }

                     內容過濾選取器 { $("div:contains(‘ab‘)") —〉選取含有文本“ab”的div元素; $("div:empty") —〉選擇不包含子項目的div空元素;

                                             $("div:has(p)") —〉選擇含有p元素的div元素; $("div:parent") —〉選取擁有子項目的div元素 }

                     可見度過濾選取器 { $("input:hidden") —〉選取所有隱藏的input元素; $("div:visible") —〉選取所有可見的div元素 }

                     屬性過濾選取器 { $("div[title=‘test‘]") —〉選取title等於“test”的div元素; $("div[id]") —〉選取擁有屬性id的元素;

                                             $("div[id=‘id1‘][title=‘test1‘]") —〉多條件複合選擇 }

                     表單對象屬性過濾 { 如 :selected; enabled; :disabled; :checked; }

3.body中onload()函數和jQuery中的$(document).ready()有什麼不同？

   onload()函數是在頁面所有資源載入完畢後才開始調用的，只能使用一次；$(document).ready()是在頁面載入完DOM後就調用，可以多次使用。

4.將頁面所有元素的邊框設定為2px寬的虛線？

   $("*").css("border","2px dashed red");    //solid 為實線; dashed 為虛線

5.jQuery中delegate()函數有何作用？

   如果你有一個父元素，需要給其下的子項目添加時間，就可以用到delegate(),代碼如下：

   $("u1").delegate("li","click",function(){

           $(this).hide();

   });

6.使用jQuery禁用瀏覽器的前進後退按鈕？

   $(document).ready(function(){

          window.history.forward(1); // or window.history.forward(-1);

  });

7.jQuery選取器和css選取器有何區別？

   jQuery選取器支援css選取器，給對象添加樣式和行為；css選取器只能添加樣式。

8.jQuery實現table隔行變色？

HTML代碼如下：

<table>

<tbody>

<tr class="parent" id="row_01"></tr>

<tr class="child_row_01"></tr>

<tr class="child_row_01"></tr>

<tr class="parent" id="row_02"></tr>

...

</tbody>

$(function(){

    $("tr.parent").click(function(){

          $(this)

          .toggleClass("selected")     //刪除或添加高亮

          .siblings("child"+this.id).toggle(); //隱藏或顯示子行

    });

});

CSS樣式控制隔行變色：

.line{

      table{

         tbody{

             tr:nth-child(odd){background:red;}

             tr:nth-child(even){background:blue;}

         }

      }

}                                              

                   

 

jQuery相關知識