最近準備在用 jQuery做新頁面，在這里做點筆記

jQuery的選擇器符號

jquery使用  $  來作為選擇器的符號

比如 $("p") 對應JS里面   getElementsByTagName("p")

        $("idname") 對應JS里面  getElementById("idname")

以及其他

jquery的基本選擇器有以下幾種

來寫一個頁面代碼進行測試

  <div class="one" id="one" > id為one,class為one的div      <div class="mini">class為mini</div>  </div>    <div class="one"  id="two" title="test" >	 id為two,class為one,title為test的div.      <div class="mini"  title="other">class為mini,title為other</div>      <div class="mini"  title="test">class為mini,title為test</div>  </div>  <div class="one">      <div class="mini">class為mini</div>      <div class="mini">class為mini</div>	  <div class="mini">class為mini</div>	  <div class="mini"></div>  </div>  <div class="one">      <div class="mini">class為mini</div>      <div class="mini">class為mini</div>	  <div class="mini">class為mini</div>	  <div class="mini"  title="tesst">class為mini,title為tesst</div>  </div>  <div style="display:none;"  class="none">style的display為"none"的div</div>    <div class="hide">class為"hide"的div</div>   <div>  包含input的type為"hidden"的div<input type="hidden" size="8"/>  </div>    <span id="mover">正在執行動畫的span元素.</span>
比如當你已經用選擇器選擇了當前頁面上的內容之后，你可以直接用CSS屬性來進行修改操作，比如下面
$("#one").css("background","red");這個就是提取id為"one"的對象，并把他的背景設置為紅色
jQuery 層次選擇器
    $("body div").css("background","red");    $("body>div").css("background","green");
像上面2個代碼，如果是body div的話，那就是把body里面所有的div全部設置成紅色
但是如果是body > div的話，只是把body的下一級的子div設置成綠色，不影響孫子div，如圖
如果代碼是
$(".one+div").css("background","yellow");
那他尋找的是class為one的對象的下一個同級div對象，一定注意是同級的下一個！！
他改變的不是子元素，而是平級的下一個,效果如下。
如果你的代碼是
$("#two ~ div").css("background","blue");那他返回的是id為two之后，所有平級的div
不過，其實PRev + next 可以用 next()方法來替代使用
prev ~ siblings 可以用 nextAll()方法來替代使用
jQuery  過濾選擇器
基本選擇過濾器
選擇過濾器就是在選擇了element之后，用冒號來過濾，哪些是你需要的。
下面寫些代碼進行測試
%20%20%20%20$("div:first").css("background","blue");%20%20%20%20$("div:last").css("background","yellow");
上面的代碼是制定了第一個或者最后一個
如果你想指定中間的元素，也可以用eq，gt，lt來指定
    $("div:eq(3)").css("background","blue");    $("div:gt(3)").css("background","yellow");    $("div:lt(3)").css("background","red");
他表示索引值為三的div變成藍色，小于三的是紅色，大于三的是黃色。
內容過濾選擇器
    $("div:contains(di)").css("background","blue");   //有文本di的內容背景設置為藍色    $("div:empty").css("background","red");           //沒有子元素的內容，背景設置為紅色    $("div:has(div)").css("background","green");      //內部有子元素div的元素，背景設置為綠色
可見性過濾選擇器
$("div:visible").css("background","blue");
這樣的代碼，就可以讓非隱藏類的元素，div變成藍色
屬性過濾選擇器
    $("div[title]").css("background","yellow");    $("div[title=test]").css("background","green");
這樣的代碼，把含有title屬性的div和title等于test的div，都進行了設置
子元素過濾器
測試代碼如下
    $("div.one :nth-child(2)").css("background","yellow");    $("div.one :first-child").css("background","green");
效果如下
    $("div.one :first-child").css("background","purple");    $("div.one :last-child").css("background","pink");
注意，都是修改的子元素，而不是像基本過濾選擇器那樣修改的父級元素。