jQuery入門知識點

《精通ASP.NET MVC3框架》第20章

一、jQuery文件
jquery-1.5.1.js:jquey核心庫常規版
jquery-1.5.1.min.js:jquery核心庫最小化版
jquery-ui.js:jquery ui庫的常規版
jquery-unobtrusive-ajax.js:非唐突ajax支持庫的常規版
jquery-validate.js：非唐突客戶端驗證的常規版
jQuery-1.5.1-vsdoc.js:對核心庫的只能感知支持

添加智能感知：
@if (false)
{
<script src="../../Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
}

二、選擇器
（1）基本的jquery選擇器
$('*'):選擇文檔中全部元素
$('.myclass'):選擇css的class值爲myclass的全部元素
$('element'):選擇<element〉類型的全部元素
$('#myid'):選擇ID爲myid的元素

$('td,th'):選擇全部的td和th元素
$('td input'):選擇包含在td元素中的全部input元素

（2）屬性選擇器
$('[attr]'):選擇有attr屬性的元素，不考慮屬性值
$('[attr]="value"'):選擇有attr屬性且其值爲value的元素
$('[attr]!="value"'):選擇有attr屬性且其值不爲value的元素
$('[attr]^="value"'):選擇有attr屬性且其值以value開頭的元素
$('[attr]~="value"'):選擇有attr屬性且其值包含value的元素
$('[attr]$="value"'):選擇有attr屬性且其值以value結尾的元素
$('[attr]|="value"'):選擇有attr屬性且其值爲value或以value開頭或value後跟鏈接符（value-）的元素

組合屬性選擇器：$('[type][value="delete"]'):選擇有type屬性，且value屬性值爲delete的那些元素

三、過濾器
$('td:eq(8)'):過濾與選擇匹配的元素數組中的第9項

（1）基本過濾器

:eq(n)-選擇所選內容的第n+1項
:even :old-選擇偶數或奇數元素
:first :last-選擇第一個或最後一個元素
:gt(n) :lt(n)-選擇索引號大於或小於n的元素
:header-選擇全部標題元素
:not(selector)-選擇全部與選擇器不匹配的元素

過濾器須要和選擇器聯合，當單獨使用時，默認使用了$('*')選擇器，如$(':header')

使用多個過濾器：$('td:odd:eq(1)'):選擇td元素，對其過濾只保留奇數項，而後選擇第2項

（2）內容過濾器
:contains('text') 選擇含有text或其子元素含有text的元素
:has('selector') 選擇至少有一個子元素與selector匹配的元素
:empty 選擇沒有子元素的元素
:parent 選擇至少有一個其餘元素的元素
:first-child 選擇它們父節點的第一個子元素
:last-child 選擇它們父元素的最後一個子元素
:nth-child(n) 選擇它們父元素下的第n個子元素（索引從1開始）
:only-child 選擇它們父節點的惟一子元素

（3）表單過濾器
:button 選擇按鈕元素，以及其type爲button的input元素
:checkbox 選擇複選框
:checked 選擇被選中的複選框和單選按鈕元素
:diasbled :enabled 選擇啓動或禁用的項
:input 選擇input元素
:password 選擇口令元素
:radio 選擇單選按鈕
:reset 選擇type爲reset的元素
:selected 選擇被選中的option元素
:submit 選擇type爲submit的input元素
:text 選擇type爲text的input元素

四、jquery方法

（1）簡單示例

$('P SPAN').addClass('SuperBig') 對包含在<p>節點中的全部<span>節點，添加一個值爲SuperBig的CSS的class
$('.SuperBig').removeClass('SuperBig') 從包含css的class爲SuperBig的全部節點刪除這個class
$('#option').toggle() 切換ID爲options的元素的可見性
$('DIV:has(INPUT[type="checkbox"]:disabled)').prepend('<i>Hey!</i>') 在含有禁用複選框的全部div元素的頂部插入<i>標記
$('#options A').css('color','red').fadeOut() 在id爲options的元素中找出全部超連接標籤，將它們的文本顏色設爲red，經過把它們的不透明度緩慢調節到零的方式淡出視圖；

（2）等待DOM
(document).ready()函數，在DOM加載就緒以後，但在媒體（圖像）可用以前，纔會執行jquery代碼；

（3）使用jquery的css方法
addClass('myClass') :將制定的class添加到選中元素的class屬性
hasClass('myClass')：若是選中的元素具備制定的class，返回true
removeClass('myClass') ：從選中元素的class屬性中刪除制定的class名
toggleClass('myClass') ：若是制定的class不存在，添加，不然刪除
css('property','value')：將制定的屬性和值添加到選中元素的style屬性

（4）使用DOM
jQuery操做DOM，能夠添加、刪除和修改DOM元素，甚至能夠把元素從DOM的一個部門移動到另外一個部分；

常見的jQuery DOM方法：
before('new') after('new') 將new原素插入在選中元素以前，或以後
insertBefor() insertAfter() 至關於before和after，但新元素與選擇器的的順序是相反的，並且這些方法會返回新建立的元素
prepend('new') append('new') 在選中的元素內部插入new元素，最爲第一個子節點，或最後一個
prependTo() appendTo() 至關於prepend和append，但new元素和選擇器的順序相反，返回新建立的元素
empty() 清空選中元素的全部子節點
remove() 從dom中移除選中元素
attr('name','value') 在選中元素上將name屬性的值設置爲value，若是不存在name屬性，則建立它
removeAttr('name') 刪除選中元素的name屬性

常見的jQuery DOM導航方法
children() 獲取選中元素的子節點
next() 獲取緊隨選中元素以後的同胞元素
prev() 獲取緊鄰選中元素的前一個同胞元素
parent() 返回選中元素的上一級父節點
sibilings() 返回選中元素的同胞節點

五、使用jQuery事件
jQuery庫含有一個很好的時間處理系統，它支持全部底層JS事件；
$('form[action$="/DeleteSummit"]').submit(function () {
var summitName = $(':hidden', this).attr('value');
return confirm('are you sure you want to delte '+summitName+' ?');
});

六、使用jQuery視覺效果

jQuery視覺效果方法：
fadeIn() 經過增長不透明度逐漸顯示選中元素（淡入）
fadeOut() 經過下降不透明度逐漸隱藏選中元素（淡出）
fadeTo() 將元素淡化到指定的不透明度
fadeToggle() 經過改變不透明度逐漸顯示或隱藏元素
hide() 當即隱藏選中元素
show() 當即顯示選中元素
slideDowm() 如下滑到頁面的動畫顯示元素
slideToggle() 用滑動效果顯示或隱藏元素
slideUp() 以上滑到頁面的動畫顯示元素
toggle() 當即隱藏可見元素，當即顯示隱藏元素

七、jQuery UI引用<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script><link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="Stylesheet" type="text/css" />