[Web 前端] 流行的JavaScript庫 ——jQuery

時間  2019-11-10
標籤 web 前端 流行 javascript jquery 欄目 HTML 简体版
原文   原文鏈接
 
一、爲了簡化 JavaScript 的開發, 一些 JavsScript 庫誕生了. JavaScript 庫封裝了不少預約義的對象和實用函數。能幫助使用者創建有高難度交互的 Web2.0 特性的富客戶端頁面, 而且兼容各大瀏覽器。當前流行的 JavaScript 庫有:jQuery, MooTools, Prototype, Dojo, YUI, EXT_JS  DWR
二、jQuery由美國人John Resig建立，至今已吸引了來自世界各地的衆多javascript高手加入其team。
jQuery是繼prototype以後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,作更多的事情。
它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各類瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，而且方便地爲網站提供AJAX交互。
jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。
jQuery可以使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需定義id便可。
jQuery 對象就是經過jQuery包裝DOM對象後產生的對象。
jQuery 對象是 jQuery 獨有的. 若是一個對象是 jQuery 對象, 那麼它就可使用 jQuery 裏的方法: $(「#test」).html();
好比：
　　$("#test").html()   意思是指：獲取ID爲test的元素內的html代碼。其中html()是jQuery裏的方法
　　這段代碼等同於用DOM實現代碼：
　　document.getElementById(" test ").innerHTML;
雖然jQuery對象是包裝DOM對象後產生的，可是jQuery沒法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裏的方法.亂使用會報錯
約定：若是獲取的是 jQuery 對象, 那麼要在變量前面加上 $.  
 var $variable = jQuery 對象
 var variable = DOM 對象
jQuery 選擇器
p選擇器是 jQuery 的根基, 在 jQuery 中, 對事件處理, 遍歷 DOM 和 Ajax 操做都依賴於選擇器
pjQuery 選擇器的優勢:
 簡潔的寫法  
        
//若網頁中沒有id=value的元素,瀏覽器會報錯
  document.getElementById("username").value;
  //須要判斷document.getElementById("username")是否存在
 if(document.getElementById("username")){
     var username=document.getElementById("username");
      alert(username.value);
   }else{    alert("沒有該id元素");
   }
  //使用JQUERY處理即便不存在也不會報錯
   var $username=$("#username");
 alert("^^^ "+$username.val());
//注意:在javaScript中函數返回值爲空,表示false
  
  基本選擇器

      基本選擇器是 jQuery 中最經常使用的選擇器, 也是最簡單的選擇器, 它經過元素 id, class 和標籤名來查找 DOM 元素(在網頁中 id 只能使用一次, class 容許重複使用).javascript

p一、#id     用法: $(」#myDiv」);    返回值  單個元素的組成的集合

       說明: 這個就是直接選擇html中的id=」myDiv」css

p二、Element       用法: $(」div」)     返回值  集合元素

       說明: element的英文翻譯過來是」元素」,因此element其實就是html已經定義的標籤元素,例如 div, input, a等等.html

p三、class          用法: $(」.myClass」)      返回值  集合元素

       說明: 這個標籤是直接選擇html代碼中class=」myClass」的元素或元素組(由於在同一html頁面中class是能夠存在多個一樣值的).java

p四、*          用法: $(」*」)      返回值  集合元素

      說明: 匹配全部元素,多用於結合上下文來搜索jquery

p五、selector1, selector2, selectorN      用法: $(」div,span,p.myClass」)    返回值  集合元素

      說明: 將每個選擇器匹配到的元素合併後一塊兒返回.你能夠指定任意多個選擇器, 並將匹配到的元素合併到一個結果內.其中p.myClass是表示匹配元素數組

       p class=」myClass」瀏覽器

   基本選擇器示例：
pmini 的全部元素的背景色爲 #FF0033
p改變元素名改變 id 爲 one 的元素的背景色爲 #0000FF
p改變 class 爲爲 <div> 的全部元素的背景色爲 #00FFFF
p改變全部元素的背景色爲 #00FF33
p改變全部的<span>元素和 id 爲 two 的元素的背景色爲 #3399FF                                       
         層次選擇器

      若是想經過 DOM 元素之間的層次關係來獲取特定元素, 例如後代元素, 子元素, 相鄰元素, 兄弟元素等, 則須要使用層次選擇器.框架

p1 、ancestor descendant

      用法: $(」form input」) ;   返回值  集合元素dom

      說明: 在給定的祖先元素下匹配全部後代元素.這個要下面講的」parent > child」區分開.ide

p二、parent > child
用法: $(」form > input」) ;    返回值  集合元素

      說明: 在給定的父元素下匹配全部子元素.注意:要區分好後代元素與子元素

p三、prev + next

      用法: $(」label + input」) ;   返回值  集合元素

      說明: 匹配全部緊接在 prev 元素後的 next 元素

p四、prev ~ siblings

      用法: $(」form ~ input」) ;    返回值  集合元素

      說明: 匹配 prev 元素以後的全部 siblings 元素.注意:是匹配以後的元素,不包含該元素在內,而且siblings匹配的是和prev同輩的元素,其後輩元素不被匹配.

      注意:  (「prev ~ div」) 選擇器只能選擇 「# prev 」 元素後面的同輩元素; 而 jQuery 中的方法 siblings() 與先後位置無關, 只要是同輩節點就能夠選取

層次選擇器示例：

p改變 <body> 內全部 <div> 的背景色爲 #0000FF
p改變 <body> 內子 <div> 的背景色爲 #FF0033
p改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF
p改變 id 爲 two 的元素後面的全部兄弟<div>的元素的背景色爲 # #0000FF
p改變 id 爲 two 的元素全部 <div> 兄弟元素的背景色爲 #0000FF
 
過濾選擇器
p過濾選擇器主要是經過特定的過濾規則來篩選出所需的 DOM 元素, 該選擇器都以 「:」 開頭
p按照不一樣的過濾規則, 過濾選擇器能夠分爲基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對象屬性過濾選擇器.
基礎過濾選擇器：
l一、:first
用法: $(」tr:first」) ;   返回值  單個元素的組成的集合

      說明: 匹配找到的第一個元素

l二、:last
用法: $(」tr:last」)   返回值  集合元素

      說明: 匹配找到的最後一個元素.與 :first 相對應.

l三、:not(selector)
用法: $(」input:not(:checked)」)返回值  集合元素

     說明: 去除全部與給定選擇器匹配的元素.有點相似於」非」,意思是沒有被選中的input(當input的type=」checkbox」).

l四、:even
用法: $(」tr:even」)   返回值  集合元素

     說明: 匹配全部索引值爲偶數的元素，從 0 開始計數.js的數組都是從0開始計數的.例如要選擇table中的行,由於是從0開始計數,因此table中的第一個tr就爲偶數0.

l五、: odd
用法: $(」tr:odd」) 返回值  集合元素
      說明: 匹配全部索引值爲奇數的元素,和:even對應,從 0 開始計數.
l六、:eq(index)
用法: $(」tr:eq(0)」)    返回值  集合元素

      說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裏面的是索引值,不是元素排列數.

l七、:gt(index)
用法: $(」tr:gt(0)」)    返回值  集合元素
l說明: 匹配全部大於給定索引值的元素.
l八、:lt(index)
用法: $(」tr:lt(2)」)    返回值  集合元素 

      說明: 匹配全部小於給定索引值的元素.

l九、:header(固定寫法)
用法: $(」:header」).css(」background」, 「#EEE」)    返回值  集合元素

      說明: 匹配如 h1, h2, h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.

l十、:animated(固定寫法)   返回值  集合元素

    說明: 匹配全部正在執行動畫效果的元素

基礎過濾選擇器示例：

p改變第一個 div 元素的背景色爲 #0000FF
p改變最後一個 div 元素的背景色爲 #0000FF
p改變class不爲 one 的全部 div 元素的背景色爲 #0000FF
p改變索引值爲偶數的 div 元素的背景色爲 #0000FF
p改變索引值爲奇數的 div 元素的背景色爲 #0000FF
p改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF
p改變索引值爲等於 3 的 div 元素的背景色爲 #0000FF
p改變索引值爲小於 3 的 div 元素的背景色爲 #0000FF

function cartoon(){//執行動畫的方法

    $("#mover").slideToggle("normal",cartoon);

}

cartoon();

內容過濾選擇器

內容過濾選擇器的過濾規則主要體如今它所包含的子元素和文本內容上

p一、:contains(text)
用法: $(」div:contains(’John’)」)    返回值  集合元素

說明: 匹配包含給定文本的元素.這個選擇器比較有用，當咱們要選擇的不是dom標籤元素時,它就派上了用場了,它的做用是查找被標籤」圍」起來的文本內容是否符合指定的內容的.

p二、:empty
用法: $(」td:empty」)   返回值  集合元素

      說明: 匹配全部不包含子元素或者文本的空元素

p三、:has(selector)

      用法: $(」div:has(p)」).addClass(」test」)    返回值  集合元素

      說明: 匹配含有選擇器所匹配的元素的元素.這個解釋須要好好琢磨,可是一旦看了使用的例子就徹底清楚了:給全部包含p元素的div標籤加上class=」test」.

p四、:parent
用法: $(」td:parent」)   返回值  集合元素

說明: 匹配含有子元素或者文本的元素.注意:這裏是」:parent」,可不是」.parent」哦!感受與上面講的」:empty」造成反義詞.

內容過濾選擇器示例：

p改變含有文本 ‘di’ 的 div 元素的背景色爲 #0000FF
p改變不包含子元素(或者文本元素) 的 div 空元素的背景色爲 #0000FF
p改變含有 class 爲 mini 元素的 div 元素的背景色爲 #0000FF
p改變含有子元素(或者文本元素)的div元素的背景色爲 #0000FF
p改變不含有文本 di; 的 div 元素的背景色

$("div:not(:contains('di'))").css("background","#FF0033");

可見度過濾選擇器

可見度過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素

p一、:hidden
用法: $(」tr:hidden」)  返回值  集合元素

     說明: 匹配全部的不可見元素，input 元素的 type 屬性爲 「hidden」 的話也會被匹配到.意思是css中display:none和input type=」hidden」的都會被匹配到.一樣,要在腦海中完全分清楚冒號」:」, 點號」.」和逗號」,」的區別.

p二、:visible
用法: $(」tr:visible」)  返回值  集合元素

    說明: 匹配全部的可見元素.

可見度過濾選擇器示例：

p改變全部可見的div元素的背景色爲 #0000FF
p選取全部不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 並設置其背景色爲 #0000FF

選取全部的文本隱藏域, 並打印它們的值

增長css     div.visible{ display:none;}

屬性過濾選擇器

 

屬性過濾選擇器的過濾規則是經過元素的屬性來獲取相應的元素

 

p一、[attribute]
用法: $(」div[id]「) ;  返回值  集合元素

 

      說明: 匹配包含給定屬性的元素. 例子中是選取了全部帶」id」屬性的div標籤.

 

p二、[attribute=value]
用法: $(」input[name='newsletter']「).attr(」checked」, true);    返回值  集合元素

 

      說明: 匹配給定的屬性是某個特定值的元素.例子中選取了全部 name 屬性是 newsletter 的 input 元素.

 

p三、[attribute!=value]
用法: $(」input[name!='newsletter']「).attr(」checked」, true);    返回值  集合元素

 

      說明: 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素.此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).以前看到的 :not 派上了用場.

 

p四、[attribute^=value]
用法: $(」input[name^=‘news’]「)  返回值  集合元素

 

      說明: 匹配給定的屬性是以某些值開始的元素.,咱們又見到了這幾個相似於正則匹配的符號.如今想忘都忘不掉了吧?!

p五、[attribute$=value]
用法: $(」input[name$=‘letter’]「)  返回值  集合元素

     說明: 匹配給定的屬性是以某些值結尾的元素.

p六、[attribute*=value]
用法: $(」input[name*=‘man’]「)   返回值  集合元素

     說明: 匹配給定的屬性是以包含某些值的元素.

p七、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(」input[id][name$=‘man’]「)  返回值  集合元素

     說明: 複合屬性選擇器,須要同時知足多個條件時使用.又是一個組合,這種狀況咱們實際使用的時候很經常使用.這個例子中選擇的是全部含有 id 屬性,而且它的 name 屬性是以 man 結尾的元素.

屬性過濾選擇器示例：

p選取下列元素,改變其背景色爲 #0000FF
p含有屬性title 的div元素.
p屬性title值等於"test"的div元素.
p屬性title值不等於"test"的div元素(沒有屬性title的也將被選中).
p屬性title值 以"te"開始 的div元素.
p屬性title值 以"est"結束 的div元素.
p屬性title值 含有"es"的div元素.
p選取有屬性id的div元素，而後在結果中選取屬性title值含有「es」的 div 元素.
子元素過濾選擇器
p一、:nth-child(index/even/odd/equation)
用法: $(」ul li:nth-child(2)」)   返回值  集合元素

      說明: 匹配其父元素下的第N個子或奇偶元素.這個選擇器和以前說的基礎過濾(Basic Filters)中的 eq() 有些相似,不一樣的地方就是前者是從0開始,後者是從1開始.

p二、:first-child
用法: $(」ul li:first-child」)    返回值  集合元素

      說明: 匹配第一個子元素.’:first’ 只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.這裏須要特別點的記憶下區別.

p三、:last-child
用法: $(」ul li:last-child」)      返回值  集合元素

      說明: 匹配最後一個子元素.’:last’只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.

p 四、: only-child
用法: $(」ul li:only-child」)   返回值  集合元素

      說明: 若是某個元素是父元素中惟一的子元素,那將會被匹配.若是父元素中含有其餘元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹配!

pnth-child() 選擇器詳解以下：
 (1) :nth-child(even/odd): 能選取每一個父元素下的索引值爲偶(奇)數的元素
 (2):nth-child(2): 能選取每一個父元素下的索引值爲 2 的元素
 (3):nth-child(3n): 能選取每一個父元素下的索引值是 3 的倍數 的元素
 (3):nth-child(3n + 1): 能選取每一個父元素下的索引值是 3n + 1的元素
子元素過濾選擇器示例：
p選取下列元素,改變其背景色爲 #0000FF
p每一個class爲one的div父元素下的第2個子元素.
p每一個class爲one的div父元素下的第一個子元素
p每一個class爲one的div父元素下的最後一個子元素
p若是class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素
表單對象屬性過濾選擇器

此選擇器主要對所選擇的表單元素進行過濾

p一、:enabled
用法: $(」input:enabled」)    返回值  集合元素

      說明: 匹配全部可用元素.意思是查找全部input中不帶有disabled=」disabled」的input.不爲disabled,固然就爲enabled啦.

p二、:disabled
用法: $(」input:disabled」)    返回值  集合元素

      說明: 匹配全部不可用元素.與上面的那個是相對應的.

p三、:checked
用法: $(」input:checked」)   返回值  集合元素

      說明: 匹配全部選中的被選中元素(複選框、單選框等，不包括select中的option).這話提及來有些繞口.

p四、:selected
用法: $(」select option:selected」)   返回值  集合元素

       說明: 匹配全部選中的option元素.

表單對象屬性過濾選擇器示例：

p利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值
p利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值
p利用 jQuery 對象的 length 屬性獲取多選框選中的個數
p利用 jQuery 對象的 text() 方法獲取下拉框選中的內容

 $("select option:selected").each(function(){

    alert($(this).text());

 });

表單選擇器

 

l一、:input
用法: $(」:input」) ;   返回值  集合元素

 

      說明:匹配全部 input, textarea, select 和 button 元素

 

l二、:text
用法: $(」:text」) ;  返回值  集合元素

 

      說明: 匹配全部的單行文本框.

 

l三、:password
用法: $(」:password」) ; 返回值  集合元素

 

      說明: 匹配全部密碼框.

 

l四、:radio
用法: $(」:radio」) ; 返回值  集合元素

 

     說明: 匹配全部單選按鈕.

 

l五、:checkbox
用法: $(」:checkbox」) ; 返回值  集合元素

 

      說明: 匹配全部複選框

 

l六、:submit
用法: $(」:submit」) ;   返回值  集合元素

 

      說明: 匹配全部提交按鈕.

l七、:image
用法: $(」:image」)   返回值  集合元素

      說明: 匹配全部圖像域.

l八、:reset
用法: $(」:reset」) ;  返回值  集合元素

      說明: 匹配全部重置按鈕.

l九、:button
用法: $(」:button」) ;  返回值  集合元素

      說明: 匹配全部按鈕.這個包括直接寫的元素button.

l十、:file
用法: $(」:file」) ;  返回值  集合元素

     說明: 匹配全部文件域.

l十一、:hidden
用法: $(」input:hidden」) ; 返回值  集合元素

      說明: 匹配全部不可見元素，或者type爲hidden的元素.這個選擇器就不只限於表單了,除了匹配input中的hidden外,那些style爲hidden的也會被匹配.

      注意: 要選取input中爲hidden值的方法就是上面例子的用法,可是直接使用 「:hidden」 的話就是匹配頁面中全部的不可見元素,包括寬度或高度爲0的,

 jQuery 中的事件 --  加載 DOM

p在頁面加載完畢後, 瀏覽器會經過 JavaScript 爲 DOM 元素添加事件. 在常規的 JavaScript 代碼中, 一般使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

能夠用$(window).load(function{})  $().ready();

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程