JQuery入門

 

$ = window.jQuery=jQuery;

選擇id用#

$('#id')

$('div')  直接標籤名

$('.class')  .+類名

$('*') 通配符

$('a,div,.class')  多項選擇器

$('div a')  空格選擇後代

$('parent > child')  只選擇下一層的父子

$('prev + next')  選擇同一層緊接着prev的next標籤

$('prev ~ siblings')  選擇本同一層兄弟標籤,共同父親的

屬性名 比如包含屬性的lang  type都會選擇出來

^=   表示以value開頭就行

$=   表示  以value結尾  和正則表達式相同

*=  表示包含 value 就行  可以匹配

[selector1][selector2][selector3]  滿足多個條件選擇

用法就是  $('#')    #表示上面圖標的使用

 

過濾器:

$('class > p:first-child') 過濾class下第一個孩子是p標籤的孩子

nth-child(2) 表示選擇第2個孩子  不和數組的0一樣,從第一個開始

nth-last-child(2) 倒數第二個孩子

only-child 只有一個孩子

$('class:first-of-type')   

$('class > p:first-of-type')     只要是第一個p標籤或者存在一個p標籤即可

而 child是子類的位置,不是存在與第幾個

 

其中參數

n  匹配第幾個 從1開始

odd  匹配奇數個

even  偶數

2n  偶數  2n+1  奇數 也是帶入1的座標

可以是別的特殊公式

 

 

表單相關

:input  找到表單

:text   匹配單行文本框

:enabled 可用的

:disabled   不可用的

:checked 被選中的  用於select 的option 複選 單選

:selected  所有option元素

 

查找

$('select').find('.javascripts');  選擇 select的裏面的元素 包括孫子等所有後代

$('select').children('option');      只找到孩子 不包括孩子的孩子

$('select').parent();  找到父親  不可能有多個父親 ,不用填參數,也可以填用於判斷是否是其父親

.next()

.prev()  查找下一個  上一個

.eq(n) 數組的第幾個元素

 .siblings()  找到兄弟 可以不寫

.filter('.python') 找到python類

filter可以代替上面很多方法

 

.click 單擊  .dbclick雙擊

mousedown  mouseup    點下  鬆開

mounseenter  mounseleave   進入離開

hover([over],out)  懸浮鼠標  進入時候可以省略  離開不可以

mouseover  mounseout  進入 離開

mounsemove([data],fction)  移動

scroll([],fction) 滾動

鍵盤事件

keydown([[data],fction])

$(document).keydown(function(){})

$(document).keydown(function(event){}) 其中event可以有keyCode   event.keyCode 可以控制效果

keyup()

keypress()   參數都一樣  按下後就發生

 

其他事件

ready   加載完執行

resize([[data],fnc])  只要改變瀏覽器大小  使用window

focus  獲得焦點  blur  失去焦點

change  發生改變 比如在input 中

select  例如表單中被選擇 

submit  提交表單時  

 

以上參數都和resize一樣

 

事件參數

event 可以獲取很多信息

例如 event.key  event.keyCode

 

事件綁定與取消

.on(events,[selector],[data],fction)

 

事件取消

off

 

one  綁定一次性的事件,運行完自動解綁

 

bug:

html與index同步  防止圖片出錯

函數值初始化

 

動畫

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章