JQ初學總結一

Jquery是最火的JavaScript庫，大部分web開發都會用到就jquery，而做爲初學者看了一些jq的用法總結本身的學習以加強本身的認知。

普通的javascript的缺點是：每種控件的操做方式可能不統一，不一樣瀏覽器下也會有區別。用javasript編寫跨瀏覽器的程序很是麻煩。而是用jquery能夠很好的作到兼容大多數瀏覽器：ie、firefox、谷歌。

但別認爲jq是一種新的語法，由於JQuery就是JavaScript語法寫的一些函數類，內部仍然是調用JavaScript實現的，因此並非代替JavaScript的。使用JQuery的代碼、編寫JQuery的擴展插件等仍然須要JavaScript的技術，Jquery自己就是一堆JavaScript函數。要知道用JQ能實現的咱們也能夠本身編寫javascript+dom實現，只是jq幫咱們封裝了一堆函數，使用者直接調用要實現的函數便可；

 JQuery的優勢：尺寸小、使用簡單方便（Write Less, Do More，吃得少幹得多。鏈式編程（$("#div1").draggble().show().hide().fly()）、隱式迭代（自動對於多個元素進行迭代方法調用））、屏蔽瀏覽器差別跨瀏覽器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件豐富、開源、免費。

下面說說jq的簡單使用：

1、頁面元素加載完畢事件：

$(document).ready(function() {

    alert("加載完畢！");

});//註冊事件的函數，和普通的dom不同，不須要在元素上標記on**這樣的事件。

也能夠簡寫爲$(functions（）｛ alert("加載完畢！");｝)；

在dom樹中有一個onload事件也是實現頁面加載完後執行。

但二者又有區別：1）、onload只能註冊一次。（window.onload=function(){....}）後註冊的會取代先註冊的函數。而ready能夠屢次註冊都會被執行；

                       2）、onload是在全部dom元素建立完畢、圖片、css等都加載完畢後纔會被觸發。JQ ready倒是在dom元素建立完畢後就觸發。ready的方式能夠提升頁面的響應速度；在JQ中也能夠用$(window).load(function(){....});來實現dom 的onload那種事件調用的時機。（*在JQ中採用$(domObj)方式把dom對象轉化爲JQ對象load是JQ本身的內部的函數）

 

2、選擇器

一、基本選擇器

JQuery選擇器用於查找知足條件的元素，好比能夠用$("#Id")來根據控件id得到控件的jQuery對象，至關於dom中的getElementById；

$("TagName")來獲取全部指定標籤名的jQuery對象，至關於getElementsByTagName；

$(function() {

         $("#btnTest").click(function() {

              $("div").html("天朝是一個民主自由的國家");

          });

      });

（*當使用匿名函數嵌套過多的時候能夠把匿名函數寫在外面用一個變量指向他，推薦這樣使用 這樣能夠避免命名函數與jq中的內部函數名衝突 引起未知錯誤，但若是你喜歡也是能夠將命名函數傳進去的）

上面是id 和標籤選擇器，在jq選擇器也能夠組合選擇（下面也會提到），jq中是選擇器跟css中的選擇器很是類似並且大部分是能夠想通的。正如上面提到的.

在jq中也有對於元素類的選擇器。用法跟css的同樣$(".className").click(...),得到類名爲className的對象。

JQ中還有很是多的選擇器下面簡單寫一下：

  多條件選擇器：$("p,div,span.menuitem")，同時選擇p標籤、div標籤和擁有menuitem樣式的span標籤元素（相似於CSS選擇器）；

l層次選擇器：

   （1）$("div li")獲取div下的全部li元素（後代，子、子的子……);

   （2）$("div > li")獲取div下的直接li子元素;

   （3）$(".menuitem + div")獲取樣式名爲menuitem以後的第一個div元素（不經常使用）;

   （4）$(".menuitem ~ div")獲取樣式名爲menuitem以後全部的div元素（不經常使用）;

在此得注意空格不能多寫和少寫否則找不到元素的。

二、過濾選擇器

:first 選取第一個元素。$("div:first")選取第一個<div>$(".warn:first");

:last 選取最後一個元素。$("div:last")選取最後一個<div>

:not(選擇器) 選取不知足「選擇器」條件的元素，$("input:not(.myClass)")選取樣式名不是myClass的<input>

:even、:odd，選取索引是奇數、偶數的元素：$("input:even")選取索引是奇數的<input>（能夠作表格奇偶行的背景不一樣）

:eq(索引序號)、:gt(索引序號)、:lt(索引序號) 選取索引等於、大於、小於索引序號的元素，好比$("input:lt(5)")選取索引小於5的<input>

:header選取全部的h1……h6元素

:animated正在執行動畫的元素。

組合選擇器是按照表達式從前向後進行數據過濾

三、屬性過濾選擇器：

$("div[id]")選取有id屬性的<div>

$(「div[title=test]」)選取title屬性爲「test」的<div>，JQuery中沒有對getElementsByName進行封裝，用$(「input[name=abc]」)。

$("div[title!=test]")選取title屬性不爲「test」的<div>

還能夠選擇開頭、結束、包含等，條件還能夠複合。

用$(":radio[name=groupName]")能夠得到同一組的radiobutton 而後在能夠進行操做。

四、表單對象選擇器（過濾器）：

$("input:checked")選取全部選中的元素（Radio、CheckBox）

$("select option:selected")選取全部選中的選項元素（下拉列表）

$(「:input」)選取全部<input>、<textarea>、<select>和<button>元素。和$(「input」)不同， $(「input」)只得到<input>。$("input,textarea,select,button")等價於$(":input")

$(":text")選取單行文本框，等價於$("input[type=text]")

$(「:password」)選取全部密碼框。同理還有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

即便沒有這些表單選擇器，也能用屬性過濾器實現。如:選擇頁面的radio元素$("input[type=radio]")