《鋒利的jQuery》補充筆記

2022-06-28 15:45:09 字數 4732 閱讀 9548

壓縮:uglifyjs

jquery物件轉化為dom物件使用[index]或者get(index)

dom物件轉化為jquery物件使用$(dom物件)

jquery.noconflict()是將變數的控制權移交給其他庫,如果jquery想要自定義乙個快捷方式的話,就給它賦值乙個變數。如果還想繼續使用$又不和其他庫發生衝突的話,就使用下面兩種方法:

如果其他庫在jquery之前,就要先寫jquery.noconflict();,如果是在之後的話,就可以不用寫。

(1)      jquery(function($))

(2)      (function($))(jquery);

在js中,當獲取到的元素不存在的話就會出錯,但是在jquery中,是不會出錯的,因此如果要在jquery中判斷某個元素是否存在的時候,就不能直接使用if($(『#ss』)){}

可以使用下面的方法:

(1)      通過長度判斷:if($(『#ss』),length > 0){}

(2)      將jquery物件轉化為dom物件if($(『#ss』)[0]){}

+ 相當於 next()     是當前元素後面直接匹配的元素(同輩)

~ 相當於 nextall()  是當前元素後面有匹配的所有元素(同輩)

sibling()            是當前元素前後有匹配的所有元素(同輩)

過濾選擇器

(1)      基本過濾選擇器

:first              :last        :even       :odd        :not()      :eq()【從0開始】       

:gt()        :lt()         :header【所有標題元素】    :animated              :focus

(2)      內容過濾選擇器

:contains(「」)          :empty【不包含子元素或文字】       

:has(『p』)             :parent【含有子元素和文字】

(3)      可見性過濾選擇器

:hidden           :visible

(4)      屬性過濾選擇器

! ^      $   |(字首- / 等於)     *(含有)  ~(空格分隔)

(5)      子元素過濾選擇器

:ntn-child(index【從1開始】/even /odd /3n+1…(n從1開始) )

ps:3n+1解釋為從第1個元素開始,每隔3個

:first-child            :last-child              :only-child(唯一的子元素(只有乙個))

(6)      表單物件屬性過濾選擇器

:enable    :disable   :checked         :selected

(7)      表單選擇器

:input【/ / / 】     :text【單行文字】

:password      :radio     :hidden……

當遇到在html中,id/ class。。。包含有特殊字元▪ 、 #  (   ]等特殊字元的,不能直接獲取,需要在特殊字元前面加上轉義符轉義一下(\\)

如果使用jquery版本1.3.1以上的版本,不需要在(選擇器)屬性前面加上@,使用的話,可能會出錯

建立屬性節點,同上多加了屬性

11.插入節點:

(3)      prepend()                     內部

(4)      prependto()          內部

(5)      after()                   外部

(6)      insertafter()          外部

(7)      before()                 外部

(8)      insertbefore()        外部

12.刪除節點

remove()  本身連同後代節點一起被刪除,繫結的事件失效

detach()   本身連同後代節點一起被刪除,繫結的事件、附加資料保留下來

empty()   清空節點

13.複製節點

clone()  這樣複製的元素不帶有任何行為,想把繫結的事件也一同複製下來的話,就需要在()裡面加上true

14.替換節點

replacewith()        。。。替換成。。。

replaceall()           用。。。替換。。。

ps:在替換的過程中,原本節點如果有繫結事件的話,也會一併被替換掉

15.包裹節點

wrap()       把。。。用。。。包裹起來(每個匹配的單獨包裹) -----在外面

wrapall()     把。。。用。。。包裹起來(每個匹配的一起包裹,而且被包裹的可能包含包含一些其他的元素)-----在外面

wrapinner()    把。。。用。。。包裹起來  -----在裡面

16.屬性操作

attr()

removeattr()

addclass() //追加樣式

removeclass()

toggle()  //切換樣式

hasclass()  //是否含有某個樣式

html()  // 相當於innerhtml,使用的時候裡面的元素會全部被替換掉,也可以增加節點,增加的節點會被成為dom元素

text()  // 相當於innertext, 裡面的元素會全部被替換掉,也可以增加節點,增加的節點也會成為文字

val()  // 相當於value屬性,用來設定和獲取元素的值 ---輸入框、按鈕、單選、多選。。。

17.遍歷節點

children() // 子元素

next() //後乙個同輩元素

prev() //前乙個同輩元素

siblings() // 前後所有同輩元素

closest() // 往上查詢,直到找到最先匹配的元素,沒有的話,則返回空

parent() // 上一級匹配的所有父級元素

parents() // 每乙個匹配的所有祖先元素

18.css-dom操作

css() 

height() // 獲取到的值不帶單位

width()

position()

left()

right()

scrolltop() // 滾動條距離頂端距離,可以設定值 回到頂端 $(document).scrolltop(0);

scrollleft()

19.事件

(1)      bind() // 事件繫結 多個繫結事件可以使用多個bind,也可以把事件型別用空格分開一次性繫結(推薦)

(2)      unbind()  //事件移除

(3)      one() 

(4)      jquery1.7之後  on()    off()      deletage()     undeletage()

20.事件物件的屬性:

(1)      event.type    事件發生的型別(click、mousrover…)

(2)      event.preventdefault ()

(3)      event.stoppropagation()

(4)      event.target   事件發生的元素

(5)      event.relatetarget  

(6)      event.pagex / event.pagey

(7)      event.which  獲取按鍵的code,比如單擊滑鼠的鍵,左中右(1、2、3)

(8)      event.metakey

21.模擬操作

trigger()   比如:$(『#btn』).trigger(『click』);模擬單擊事件

還有可以模擬使用者自定義的事件,以及可以傳遞引數,傳遞的引數作為trigger的第二個引數

22.動畫

(1)      show() 和  hide() ---改變display

(2)      fadein() 和 fadeout() –改變透明度

(3)      slideup() 和 slidedown() –改變高度

(4)      animate(,  speed,  callback);

可以設定累加和累減,比如

可以在callback裡面設定當前動畫完成的時候要執行的效果方法

(5)      stop()  停止動畫 裡面放兩個引數

第乙個是否清空未執行的動畫序列

第二個是否直接跳到末狀態

(6)      is()  判斷是否處在某種狀態 比如:is(":animated」);

(7)      delay(1000) 延遲

(8)      toggle() 切換可見狀態 – 改變高度、寬度、不透明度

(9)      slidetoggle()  -- 改變高度

(10)  fadeto() 把元素以漸變的方式調整到指定值   比如:fadeto(600,0.2)

(11)  fadetoggle()   --改變不透明度

23.表單

(1)      設定disabled、checked屬性的時候,不要使用attr,使用prop

(2)      **

**的odd和even的索引是從0開始的

24.ajax

鋒利的JQuery筆記 一

window.onload function document ready function 執行時機 等待網頁的所有內容載入完畢 包含 後才會執行 網頁中的dom建立後就執行 編寫個數 可以編寫多個,後面的會覆蓋前面的 可以編寫多個,新增多個後會並行執行 簡化寫法 無 function 1.jqu...

鋒利的jQuery 讀書筆記

第一章 認識jquery 1 鏈式操作方式 這是jquery中最具有特色的,即對發生在同乙個jquery物件上的 一組動作,可以直接連寫而無需重複獲取物件。2 jquery物件中不能使用dom物件的任何的方法,同時dom物件也不能使用jquery物件的方法。3 為了區別dom物件和jquery物件,...

鋒利的Jquery讀書筆記

一直覺得學習jquery挺難的,看看選擇器,記住他的一些方法,可是光看不練的話始終的掌握不了,個人覺得鋒利的jquery上面的例子不錯,可以全部自己做出來的話應該就過關啦 下面列出本書的例子,供自己以後參考 2 某個論壇的註冊頁面,使用者必須選中頁面下方 同意並接受註冊協議 核取方塊,否則不能提交 ...