jquery筆記1--選取器

標籤：程式   ==   enabled   val   擴充   sel   dex   總結   tar   

一.概述:
jQuery是一個快速、簡潔的JavaScript架構，是繼Prototype之後又一個優秀的JavaScript程式碼程式庫（或JavaScript架構）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，最佳化HTML文檔操作、事件處理、動畫設計和Ajax互動。
jQuery的核心特性可以總結為：具有獨特的鏈式文法和短小清晰的多功能介面；具有高效靈活的css選取器，並且可對CSS選取器進行擴充；擁有便捷的外掛程式擴充機制和豐富的外掛程式。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

二.使用:
1:下載;網址:Jquery.com
2:在html頁面中使用script標籤,引入js檔案即可;注意一定要先引入jquery,再引入自己寫的js;
< script type="text/javascript" src="js/jquery-3.2.1.js"></script>
3:再使用script標籤,寫程式員自己的js代碼;

三.Jquery對象與js對象的區別和轉換
1.js對象==>jquery對象,格式:$(js對象);
2.jquery==>js對象,格式:jquery對象[0];

四.jquery API介紹
API分為核心/屬性/CSS/選取器/文檔處理/篩選/事件/效杲/ajax/工具/event對象,共11個部分

選取器:
1.基本選取器
    Id選取器:
    $(“#id的值”);
   
    元素選取器:
    $(“標籤名”);
   
    類別選取器:
    $(“.class的屬性值”);
   
    *選取器
    $("*")
    匹配所有元素並返回

2.層級選取器:
    ancestor descendant(迭代匹配)
        ancestor:為任何有效選取器;
        descendant:匹配元素的選取器,且為第一個選取器的後代;
    舉例:
    $("form input")
    匹配form標籤下所有的input標籤(迭代--進入孫代或更後代的標籤)
   
    parent > child(僅選擇直系一代的選取器,不迭代選擇)
        parent:任何有效選取器;
        child:用以匹配元素的選取器，並且它是第一個選取器的子項目(不進入迭代);
    舉例:
    $("form > input")
   
    prev + next
    匹配所有緊接在 prev 元素後的 next 元素.注意prev與next成對出現時才匹配;
    舉例:
    $("label + input")
   
    prev ~ siblings
    匹配與第一個標籤同輩的標籤
    舉例:
    $("form ~ input")
   
3.基本過濾選取器
    :first
    擷取第一個元素
    舉例:
    $(‘li:first‘);
    返回li標籤中的第一個li標籤對象([ <li>list item 1</li> ])
   
    :last
    擷取最後一個元素(API中後面有一個圓括弧,應刪除)
    舉例:
    $(‘li:last‘)
    返回:[ <li>list item 5</li> ]
   
    :not(selector)
    去除所有與給定選取器匹配的元素
    舉例:
    $("input:not(:checked)")
   
    :even
    匹配所有索引值為偶數的元素，從 0 開始計數
    舉例:
    $("tr:even")
    返回索引為偶數的行;
   
    :odd
    匹配所有索引值為奇數的元素，從 0 開始計數
    $("tr:odd")
    返回所有索引為奇數的行;
   
    :eq(index)
    匹配一個給定索引值的元素,從0開始計數
    $("tr:eq(1)")
    返回索引值為1的元素(即第二行)
   
    :gt(index)
    匹配所有大於給定索引值的元素,從0開始計數
    $("tr:gt(0)")
    匹配索引值大於0的行;
   
    :lt(index)
    匹配所有小於給定索引值的元素
    $("tr:lt(2)")
    匹配索引值小於2的行;
   
    :header
    匹配如 h1, h2, h3之類的標題元素
    $(":header").css("background", "#EEE");
    給頁面內所有標題加上背景色
   
    :focus
    匹配當前擷取焦點的元素
   
4.屬性相關選取器
    []
    $("div[id]")
    尋找所有含有 id 屬性的 div 元素
   
    [attribute=value]
    $("input[name=‘newsletter‘]")
    尋找所有 name 屬性是 newsletter 的 input 元素
   
    [attribute!=value]
    尋找所有 name 屬性不是 newsletter 的 input 元素
    $("input[name!=‘newsletter‘]")
   
    [attribute^=value]
    匹配給定的屬性是以某些值開始的元素
    $("input[name^=‘news‘]")
    尋找所有 name 以 ‘news‘ 開始的 input 元素
   
    [attribute$=value]
    匹配給定的屬性是以某些值結尾的元素
    $("input[name$=‘letter‘]")
    尋找所有 name 以 ‘letter‘ 結尾的 input 元素
   
    [attribute*=value]
    匹配給定的屬性是以包含某些值的元素
    $("input[name*=‘man‘]")
    尋找所有 name 包含 ‘man‘ 的 input 元素

5.表單相關選取器
    :input
    匹配所有 input, textarea, select 和 button 元素
    $(":input")
    尋找所有的input元素，
   
    :text
    匹配所有的單行文字框
    舉例:
      <input type="text" />
      <input type="checkbox" />
      <input type="radio" />
      <input type="image" />
      <input type="file" />
      <input type="submit" />
      <input type="reset" />
      <input type="password" />
      <input type="button" />
    $(":text")
    返回:[ <input type="text" /> ]
   
    $(":password")
    匹配所有密碼框
   
    $(":radio")
    尋找所有選項按鈕
   
    $(":checkbox")
    匹配所有複選框
   
    $(":submit")
    匹配所有提交按鈕
   
    $(":image")
    匹配所有映像域
   
    $(":reset")
    尋找所有重設按鈕
   
    $(":button")
    匹配所有按鈕
   
    $(":file")
    尋找所有檔案域
   
    :hidden
    匹配所有隱藏元素，或者type為hidden的元素
    舉例
    $("tr:hidden")
    $("input:hidden")

6.表單對象屬性選取器
    :enabled
    匹配所有可用元素
    舉例
    $("input:enabled")
   
    :disabled
    匹配所有不可用元素
    $("input:disabled")
    尋找所有停用input元素
   
    :checked
    匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option)
    $("input:checked")
    尋找所有選中的複選框元素
   
    :selected
    匹配所有選中的option元素
    $("select option:selected")
    尋找所有選中的選項元素
   
     

 

jquery筆記1--選取器