jQuery入門知識點

2022-03-05 19:16:23 字數 3647 閱讀 9891

《精通asp.net mvc3框架》第20章

1、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)

2、選擇器

(1)基本的jquery選擇器

$('*'):選擇文件中所有元素

$('.myclass'):選擇css的class值為myclass的所有元素

$('element'):選擇$('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的那些元素

3、過濾器

$('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元素

4、jquery方法

(1)簡單示例

$('p span').addclass('superbig') 對包含在節點中的所有節點,新增乙個值為superbig的css的class

$('.superbig').removeclass('superbig') 從包含css的class為superbig的所有節點刪除這個class

$('#option').toggle() 切換id為options的元素的可見性

$('div:has(input[type="checkbox"]:disabled)').prepend('hey!') 在含有禁用核取方塊的所有div元素的頂部插入標記

$('#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導航方法

children() 獲取選中元素的子節點

next() 獲取緊隨選中元素之後的同胞元素

prev() 獲取緊鄰選中元素的前乙個同胞元素

parent() 返回選中元素的上一級父節點

sibilings() 返回選中元素的同胞節點

5、使用jquery事件

jquery庫含有乙個很好的時間處理系統,它支援所有底層js事件;

$('form[action$="/deletesummit"]').submit(function () );

6、使用jquery視覺效果

jquery視覺效果方法:

fadein() 通過增加不透明度逐漸顯示選中元素(淡入)

fadeout() 通過降低不透明度逐漸隱藏選中元素(淡出)

fadeto() 將元素淡化到指定的不透明度

fadetoggle() 通過改變不透明度逐漸顯示或隱藏元素

hide() 立即隱藏選中元素

show() 立即顯示選中元素

slidedowm() 以下滑到頁面的動畫顯示元素

slidetoggle() 用滑動效果顯示或隱藏元素

slideup() 以上滑到頁面的動畫顯示元素

toggle() 立即隱藏可見元素,立即顯示隱藏元素

7、jquery ui

引用

Jquery知識點彙總

1 jquery物件轉換成dom物件 a.var cr cr jquery物件 var cr cr 0 dom物件 alert cr.checked 檢測checkbox是否被選中了 b.var cr cr jquery物件 var cr cr.get 0 dom物件 alert cr.checke...

jquery常用知識點

1.原生的js 如果編寫多個入口函式,後面編寫的會覆蓋前面編寫的。2.jquery 中如果編寫多個入口函式,後面的不會覆蓋前面的。靜態方法 靜態方法通過類名呼叫 例項方法 例項方法通過例項呼叫 function fn fn.prototype.name lina var fn new fn cons...

JQuery常用知識點

jquery知識點 jquery定義 jquery 就是乙個簡單高效的 js 庫 jq 封裝的 是 js dom 的 部分 不需要考慮相容問題 帶 min 壓縮版本 刪除了注釋 換行 提高網頁載入效率 上線使用 不帶 min 無壓縮 1.多庫共存 在多個js庫應用於同乙個專案中時,符 會存在衝突的情...