壓縮: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 某個論壇的註冊頁面,使用者必須選中頁面下方 同意並接受註冊協議 核取方塊,否則不能提交 ...