當前流行的JavaScript庫有:
jQuery, MooTools,Prototype, Dojo, YUI,EXT_JS DWR
jQuery由美國人JohnResig創建,至今已吸引了來自世界各地的眾多javascript高手加入其team。
jQuery是繼prototype之後又一個優秀的Javascript框架。其宗旨是——WRITELESS,DO MORE,寫更少的代碼,做更多的事情。
它是輕量級的js庫(壓縮後只有21k),這是其它的js庫所不及的,它兼容CSS3,還兼容各種浏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery是一個快速的,簡潔的javaScript庫,使用戶能更方便地處理HTMLdocuments、events、實現動畫效果,並且方便地為網站提供AJAX交互。
jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。
jQuery能夠使用戶的html頁保持代碼和html內容分離,也就是說,不用再在html裡面插入一堆js來調用命令了,只需定義id即可。
jQuery對象就是通過jQuery包裝DOM對象後產生的對象。
引入jquery: 將js文件導入項目中,在引入頁面
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對象
•varvariable = DOM對象
選擇器是jQuery的根基,在jQuery中,對事件處理, 遍歷DOM和Ajax 操作都依賴於選擇器
jQuery選擇器的優點:
•簡潔的寫法
•完善的事件處理機制
==========================基本選擇器
$("#id")//通過id查找節點元素
$("標簽名")//通過標簽名查找節點元素
$(".class的值")//通過class屬性的值查找節點元素
$("*")//查找所有的節點標簽
==========================層次選擇器
$("標簽或者id或者class 標簽或者id或者class")//查找標簽或者id或者class節點中的所有標簽或者id或者class節點---“ ”空格代表指定標簽裡面的所有標簽,class,id
$("標簽或者id或者class>標簽或者id或者class")//查找標簽或者id或者class節點中的子節點標簽或者id或者class--“>”代表父子關系
$("標簽或者id或者class+標簽或者id或者class")//查找標簽或者id或者class的下一個標簽或者id或者class節點--“+”下一個節點
$("標簽或者id或者class~標簽或者id或者class")//查找標簽或者id或者class的以後的所有的標簽或者id或者class節點--“~”以後的所有節點
$("id或者class").siblings("div")//查找id或者class並且是指定節點的節點元素
==========================基礎過濾選擇器
--------$(節點元素:條件)
$("標簽或者id或者class:first")//查找標簽或者id或者class第一個出現的節點元素
$("標簽或者id或者class:last")//查找標簽或者id或者class最後一個出現的節點元素
$("div:not(標簽或者id或者class)")//查找某節點上不為標簽或者id或者class節點元素,注意沒有id或者class屬性也包括在內
$("標簽或者id或者class:even")//查找標簽或者id或者class出現順序為偶數的節點元素
$("標簽或者id或者class:odd")//查找標簽或者id或者class出現順序為奇數的節點元素
$("標簽或者id或者class":gt(index))//查找標簽或者id或者class索引值大於指定index的節點元素;gt是 greater than的縮寫
$("標簽或者id或者class:eq(index)")//查找標簽或者id或者class索引值等於指定index的節點元素;eq是equals的簡寫
$("標簽或者id或者class:lt(index)")//查找標簽或者id或者class索引值小於指定index的節點元素;lt是less than的簡寫
$(":header")//查找所有的標題節點元素;是固定寫法
$("標簽或者id或者class").slideToggle(800,method);//讓標簽或者id或者class節點元素動起來,800表示動畫時長的毫秒數,method回調的方法
==========================內容過濾選擇器
$("標簽或者id或者class:contains('di')")//查找標簽或者id或者class內容裡面包含指定內容的節點元素
$("標簽或者id或者class:empty")//查找標簽或者id或者class沒有任何子元素的節點元素
$("標簽或者id或者class:has(標簽或者id或者class)")//查找標簽或者id或者class包含標簽或者id或者class元素的節點元素
$("標簽或者id或者class:parent")//查找標簽或者id或者class包含子元素的節點元素
$("標簽或者id或者class:not(:contains('di'))")//查找標簽或者id或者class不包含指定文本內容的節點元素
==========================可見度過濾選擇器
$("標簽或者id或者class:visible")//查找標簽或者id或者class為可見元素的節點元素
$("標簽或者id或者class:hidden").show()//查找標簽或者id或者class為隱藏元素的節點元素
each(function(index,domEle){
alert(index+"==="+domEle.value);
});//jquery的遍歷方法:index是角標,domEle是將節點元素對象轉換成dom對象返回
$.each(需要遍歷的對象或數組,function(index,domEle){})//jquery的靜態方法
==========================屬性過濾選擇器
$("標簽或者id或者class[title]")//查找標簽或者id或者class節點元素屬性為title的節點元素
$("標簽或者id或者class[title=test]")//查找標簽或者id或者class節點元素屬性為title並且等於指定值的節點元素
$("標簽或者id或者class[title!=test]")//查找標簽或者id或者class節點元素屬性為title並且不等於指定值的節點元素;注意沒有title屬性的也包括在內
$("標簽或者id或者class[title^=te]")//查找標簽或者id或者class節點元素屬性為title並且屬性值以指定開始值的節點元素
$("標簽或者id或者class[title$=te]")//查找標簽或者id或者class節點元素屬性為title並且屬性值以指定結束值的節點元素
$("標簽或者id或者class[title*=te]")//查找標簽或者id或者class節點元素屬性為title並且屬性值包含指定值的節點元素
$("標簽或者id或者class[title*=te][屬性]...")//查找標簽或者id或者class節點元素同時過濾多個屬性,的節點元素
==========================子元素過濾選擇器
$("標簽或者id或者class :nth-child(index)")//查找標簽或者id或者class節點下的指定子元素;注意在:之前加空格,index是從1開始
$("標簽或者id或者class :first-child")//查找標簽或者id或者class節點下的第一個子元素
$("標簽或者id或者class :last-child")//查找標簽或者id或者class節點下的第一個子元素
$("標簽或者id或者class :only-child")//查找標簽或者id或者class節點如果只有一個子元素,就返回
==========================表單選擇器
input[type=checkbox]:checked").length//獲取多選按鈕的選中的個數
$("select>option:selected")//獲取下拉選框選中的內容,一般用each遍歷
==========================匹配選擇器
$(":input")//返回值 集合元素 說明:匹配所有 input, textarea, select 和 button 元素
$(”:text”)//返回值 集合元素 說明: 匹配所有的單行文本框.
$(”:password”)//返回值 集合元素 說明: 匹配所有密碼框.
$(”:radio”)//返回值 集合元素 說明: 匹配所有單選按鈕.
$(”:checkbox”)//返回值 集合元素 說明: 匹配所有復選框
$(”:submit”)//返回值 集合元素 說明: 匹配所有提交按鈕.
$(”:image”)//返回值 集合元素 說明: 匹配所有圖像域.
$(”:reset”)//返回值 集合元素 說明: 匹配所有重置按鈕.
$(”:button”)//返回值 集合元素 說明: 匹配所有按鈕.這個包括直接寫的元素button.
$(”:file”)//返回值 集合元素 說明: 匹配所有文件域.
$(”input:hidden”)//返回值 集合元素 說明: 匹配所有不可見元素,或者type為hidden的元素.這個選擇器就不僅限於表單了,除了匹配input中的hidden外,那些style為hidden的也會被匹配.
注意: 要選取input中為hidden值的方法就是上面例子的用法,但是直接使用 “:hidden”的話就是匹配頁面中所有的不可見元素,包括寬度或高度為0的,
==========================
=====創建節點元素
$("
")//標簽怎麼寫就怎麼寫,注意自閉合標簽的寫法:
=====插入節點
$("#a").append($("#b"))//將後面的b節點添加到a節點上
$("#a").appendTo($("#b"))//將前面的a節點添加到b節點上
$("#a").after($("#b"))//將後面的b節點添加到a節點的後面
$("#a").before($("#b"))//將後面的b節點添加到a節點的前面
$("#a").insertAfter($("#b"))//將前面的a節點插入到b節點的後面
$("#a").insertBefore($("#b"))//將前面的a節點插入到b節點的前面
=====刪除節點元素
remove()//刪除節點元素,自身刪除
empty()//刪除所有的字節點,不刪除屬性節點
=====克隆節點元素
clone(boolean)//克隆一個節點,默認只克隆節點,不克隆事件,如果傳入一個true就代表事件也同時克隆
=====替換節點元素
$("#a").repalaceWith($("#b"))//將a節點替換成b節點
$("#a").repalaceAll($("#b"))//將b節點替換成a節點
=====常用的基本方法
val()//獲取節點元素的值
val("xxx")//改變節點元素的值
text()//獲取節點對象的文本內容
text("abcd")//設置文本節點
attr("name")//獲取name屬性值
attr("name","zhangsan")//設置name屬性值
removeAtt("name")//刪除屬性
==========================
-----.css('屬性值','屬性名')//設置樣式
=====dom/jquery轉換
-----$(dom對象)將dom對象裝換成jquery對象
-----var name = $變量名[index] //將jquery轉換成dom對象
-----jquery提供了一個get(index)方法將jquery轉換成dom對象
-----$(document).ready(function(){});//所有頁面中的內容加載完畢才執行//簡寫格斯:$().ready(function(){});
-----$(window).load(function(){})//一般不用