$(" p" ).addclass(css中定義的樣式類型) 給某個元素添加樣式
$(" img" ).attr({src:" test.jpg" alt:" test p_w_picpath" }) 給某個元素添加屬性/值 參數是map
$(" img" ).attr(" src" " test.jpg" ) 給某個元素添加屬性/值
$(" img" ).attr(" title" function() { return this.src }) 給某個元素添加屬性/值
$(" 元素名稱" ).html() 獲得該元素內的內容(元素 文本等)
$(" 元素名稱" ).html(" < b> new stuff< /b> " ) 給某元素設置內容
$(" 元素名稱" ).removeattr(" 屬性名稱" ) 給某元素刪除指定的屬性以及該屬性的值
$(" 元素名稱" ).removeclass(" class" ) 給某元素刪除指定的樣式
$(" 元素名稱" ).text() 獲得該元素的文本
$(" 元素名稱" ).text(value) 設置該元素的文本值爲value
$(" 元素名稱" ).toggleclass(class) 當元素存在參數中的樣式的時候取消 如果不存在就設置此樣式
$(" input元素名稱" ).val() 獲取input元素的值
$(" input元素名稱" ).val(value) 設置input元素的值爲value
manipulation:
$(" 元素名稱" ).after(content) 在匹配元素後面添加內容
$(" 元素名稱" ).append(content) 將content作爲元素的內容插入到該元素的後面
$(" 元素名稱" ).appendto(content) 在content後接元素
$(" 元素名稱" ).before(content) 與after方法相反
$(" 元素名稱" ).clone(布爾表達式) 當布爾表達式爲真時 克隆元素(無參時 當作true處理)
$(" 元素名稱" ).empty() 將該元素的內容設置爲空
$(" 元素名稱" ).insertafter(content) 將該元素插入到content之後
$(" 元素名稱" ).insertbefore(content) 將該元素插入到content之前
$(" 元素" ).prepend(content) 將content作爲該元素的一部分 放到該元素的最前面
$(" 元素" ).prependto(content) 將該元素作爲content的一部分 放content的最前面
$(" 元素" ).remove() 刪除所有的指定元素
$(" 元素" ).remove(" exp" ) 刪除所有含有exp的元素
$(" 元素" ).wrap(" html" ) 用html來包圍該元素
$(" 元素" ).wrap(element) 用element來包圍該元素
traversing:
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expr
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)
core:
$(html).appendto(" body" ) 相當於在body中寫了一段html代碼
$(elems) 獲得dom上的某個元素
$(function(){……..}) 執行一個函數
$(" div > p" ).css(" border" " 1px solid gray" ) 查找所有div的子節點p 添加樣式
$(" input:radio" document.forms[0]) 在當前頁面的第一個表單中查找所有的單選按鈕
$.extend(prop) prop是一個jquery對象
舉例:
jquery.extend({
min: function(a b) { return a < b ? a : b }
max: function(a b) { return a > b ? a : b }
})
jquery( expr
each( callback ) 以每一個匹配的元素作爲上下文來執行一個函數
舉例:1
$(" span" ).click(function){
$(" li" ).each(function(){
$(this).toggleclass(" example" )
})
})
舉例:2
$(" button" ).click(function () {
$(" div" ).each(function (index domele) {
// domele == this
$(domele).css(" backgroundcolor" " yellow" )
if ($(this).is(" #stop" )) {
$(" span" ).text(" stopped at div index #" + index)
return false
}
})
})
jquery event:
ready(fn) $(document).ready()注意在body中沒有on
有很多個函數被加載執行 按照fn的順序來執行。
bind( type [da
mouseover mouseout mouseenter mouseleave change select submit keydown keypress
keyup error
on
象上 這個事件處理函數只會被執行一次。其他規則與bind()函數相同。
trigger( type [da
triggerhandler( type [da
unbind( [type] [da
$(" p" ).unbind() 移除所有段落上的所有綁定的事件
$(" p" ).unbind( " click" ) 移除所有段落上的click事件
hover( over out ) over out都是方法 當鼠標移動到一個匹配的元素上面時 會觸發指定的第一個函數。當鼠標移出這個元素時 會觸發指定的第二個函數。
$(" p" ).hover(function(){
$(this).addclass(" over" )
}
function(){
$(this).addclass(" out" )
}
)
toggle( fn fn ) 如果點擊了一個匹配的元素 則觸發指定的第一個函數 當再次點擊同一元素時 則觸發指定的第二個函數。
$(" p" ).toggle(function(){
$(this).addclass(" selected" )
}
function(){
$(this).removeclass(" selected" )
}
)
元素事件列表說明
注:不帶參數的函數 其參數爲可選的 fn。jquery不支持form元素的reset事件。
事件 描述 支持元素或對象
blur( ) 元素失去焦點 a input textarea button select label map area
change( ) 用戶改變域的內容 input textarea select
click( ) 鼠標點擊某個對象 幾乎所有元素
dblclick( ) 鼠標雙擊某個對象 幾乎所有元素
error( ) 當加載文檔或圖像時發生某個錯誤 window img
focus( ) 元素獲得焦點 a input textarea button select label map area
keydown( ) 某個鍵盤的鍵被按下 幾乎所有元素
keypress( ) 某個鍵盤的鍵被按下或按住 幾乎所有元素
keyup( ) 某個鍵盤的鍵被鬆開 幾乎所有元素
load( fn ) 某個頁面或圖像被完成加載 window img
mousedown( fn ) 某個鼠標按鍵被按下 幾乎所有元素
mousemove( fn ) 鼠標被移動 幾乎所有元素
mouseout( fn ) 鼠標從某元素移開 幾乎所有元素
mouseover( fn ) 鼠標被移到某元素之上 幾乎所有元素
mouseup( fn ) 某個鼠標按鍵被鬆開 幾乎所有元素
resize( fn ) 窗口或框架被調整尺寸 window iframe frame
scroll( fn ) 滾動文檔的可視部分時 window
select( ) 文本被選定 document input textarea
submit( ) 提交按鈕被點擊 form
unload( fn ) 用戶退出頁面 window
jquery ajax 方法說明:
load( url [da
$(" #feeds" ).load(" feeds.html" ) 將feeds.html文件載入到id爲feeds的div中
$(" #feeds" ).load(" feeds.php" {limit: 25} function(){
alert(" the last 25 entries in the feed have been loaded" )
})
jquery.get( url [da
$.get(" test.cgi" { name: " john" time: " 2pm" } function(da
alert(" da
})
jquery.getjson( url [da
$.getjson(" test.js" { name: " john" time: " 2pm" } function(json){
alert(" json da
})
jquery.getscript( url [callback] ) 使用get請求javas
$.getscript(" test.js" function(){
alert(" script loaded and uted." )
})
jquery.post( url [da
ajaxcomplete( callback ) 當一個ajax請求結束後 執行一個函數。這是一個ajax事件
$(" #msg" ).ajaxcomplete(function(request settings){
$(this).append(" < li> request complete.< /li> " )
})
ajaxerror( callback ) 當一個ajax請求失敗後 執行一個函數。這是一個ajax事件
$(" #msg" ).ajaxerror(function(request settings){
$(this).append(" < li> error requesting page " + settings.url + " < /li> " )
})
ajaxsend( callback ) 在一個ajax請求發送時 執行一個函數。這是一個ajax事件
$(" #msg" ).ajaxsend(function(evt request settings){
$(this).append(" < li< starting request at " + settings.url
+ " < /li< " )
})
ajaxstart( callback ) 在一個ajax請求開始但還沒有激活時 執行一個函數。這是一個ajax事件
當ajax請求開始(並還沒有激活時)顯示loading信息
$(" #loading" ).ajaxstart(function(){
$(this).show()
})
ajaxstop( callback ) 當所有的ajax都停止時 執行一個函數。這是一個ajax事件
當所有ajax請求都停止時 隱藏loading信息。
$(" #loading" ).ajaxstop(function(){
$(this).hide()
})
ajaxsuccess( callback ) 當一個ajax請求成功完成後 執行一個函數。這是一個ajax事件
當ajax請求成功完成時 顯示信息。
$(" #msg" ).ajaxsuccess(function(evt request settings){
$(this).append(" < li> successful request!< /li> " )
})
jquery.ajaxsetup( options ) 爲所有的ajax請求進行全局設置。查看$.ajax函數取得所有選項信息。
設置默認的全局ajax請求選項。
$.ajaxsetup({
url: " /xmlhttp/"
global: false
type: " post"
})
$.ajax({ da
serialize( ) 以名稱和值的方式連接一組input元素。實現了正確表單元素序列
function showvalues() {
var str = $(" form" ).serialize()
$(" #results" ).text(str)
}
$(" :checkbox :radio" ).click(showvalues)
$(" select" ).change(showvalues)
showvalues()
serializearray( ) 連接所有的表單和表單元素(類似於.serialize()方法) 但是返回一個json數據格式。
從form中取得一組值 顯示出來
function showvalues() {
var fields = $(" :input" ).serializearray()
alert(fields)
$(" #results" ).empty()
jquery.each(fields function(i field){
$(" #results" ).append(field.value + " " )
})
}
$(" :checkbox :radio" ).click(showvalues)
$(" select" ).change(showvalues)
showvalues()
jquery effects 方法說明
show( ) 顯示隱藏的匹配元素。
show( speed [callback] ) 以優雅的動畫顯示所有匹配的元素 並在顯示完成後可選地觸發一個回調函數。
hide( ) 隱藏所有的匹配元素。
hide( speed [callback] ) 以優雅的動畫隱藏所有匹配的元素 並在顯示完成後可選地觸發一個回調函數
toggle( ) 切換元素的可見狀態。如果元素是可見的 切換爲隱藏的 如果元素是隱藏的
切換爲可見的。
slidedown( speed [callback] ) 通過高度變化(向下增大)來動態地顯示所有匹配的元素 在顯示完成後可選
地觸發一個回調函數。這個動畫效果只調整元素的高度 可以使匹配的元素以
" 滑動" 的方式顯示出來。
slideup( speed [callback] ) 通過高度變化(向上減小)來動態地隱藏所有匹配的元素 在隱藏完成後可選地
觸發一個回調函數。這個動畫效果只調整元素的高度 可以使匹配的元素以" 滑動"
的方式隱藏起來。
slidetoggle( speed [callback] ) 通過高度變化來切換所有匹配元素的可見性 並在切換完成後可選地觸發一個回
調函數。 這個動畫效果只調整元素的高度 可以使匹配的元素以" 滑動" 的方式隱
藏或顯示。
fadein( speed [callback] ) 通過不透明度的變化來實現所有匹配元素的淡入效果 並在動畫完成後可選地觸
發一個回調函數。 這個動畫只調整元素的不透明度 也就是說所有匹配的元素的
高度和寬度不會發生變化。
fadeout( speed [callback] ) 通過不透明度的變化來實現所有匹配元素的淡出效果 並在動畫完成後可選地觸
發一個回調函數。 這個動畫只調整元素的不透明度 也就是說所有匹配的元素的
高度和寬度不會發生變化。
fadeto( speed opacity [callback] ) 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度 並在動畫完成
後可選地觸發一個回調函數。 這個動畫只調整元素的不透明度 也就是說所
有匹配的元素的高度和寬度不會發生變化。
stop( ) 停止所有匹配元素當前正在運行的動畫。如果有動畫處於隊列當中 他們就會立即開始。
queue( ) 取得第一個匹配元素的動畫序列的引用(返回一個內容爲函數的數組)
queue( callback ) 在每一個匹配元素的事件序列的末尾添加一個可執行函數 作爲此元素的事件函數
queue( queue ) 以一個新的動畫序列代替所有匹配元素的原動畫序列
dequeue( ) 執行並移除動畫序列前端的動畫
animate( params [duration] [easing] [callback] ) 用於創建自定義動畫的函數。
animate( params options ) 創建自定義動畫的另一個方法。作用同上。
jquery traversing 方法說明
eq( index ) 從匹配的元素集合中取得一個指定位置的元素 index從0開始
filter( expr ) 返回與指定表達式匹配的元素集合 可以使用" " 號分割多個expr 用於實現多個條件篩選
filter( fn ) 利用一個特殊的函數來作爲篩選條件移除集合中不匹配的元素。
is( expr ) 用一個表達式來檢查當前選擇的元素集合 如果其中至少有一個元素符合這個給定的
表達式就返回true。
map( callback ) 將jquery對象中的一組元素利用callback方法轉換其值 然後添加到一個jquery數組中。
not( expr ) 從匹配的元素集合中刪除與指定的表達式匹配的元素。
slice( start [end] ) 從匹配元素集合中取得一個子集 和內建的數組的slice方法相同。
add( expr ) 把與表達式匹配的元素添加到jquery對象中。
children( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。可選的過濾器
將使這個方法只匹配符合的元素(只包括元素節點 不包括文本節點)。
contents( ) 取得一個包含匹配的元素集合中每一個元素的所有子孫節點的集合(只包括元素節點 不
包括文本節點) 如果元素爲iframe 則取得其中的文檔元素
find( expr ) 搜索所有與指定表達式匹配的元素。
next( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。
nextall( [expr] ) 取得一個包含匹配的元素集合中每一個元素所有的後面同輩元素的元素集合
parent( [expr] ) 取得一個包含着所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一個包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
prev( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
prevall( [expr] ) 取得一個包含匹配的元素集合中每一個元素的之前所有同輩元素的元素集合。
siblings( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有同輩元素的元素集合。
andself( ) 將前一個匹配的元素集合添加到當前的集合中
取得所有div元素和其中的p元素 添加border類屬性。取得所有div元素中的p元素
添加background類屬性
$(" div" ).find(" p" ).andself().addclass(" border" )
$(" div" ).find(" p" ).addclass(" background" )
end( ) 結束當前的操作 回到當前操作的前一個操作
找到所有p元素其中的span元素集合 然後返回p元素集合 添加css屬性
$(" p" ).find(" span" ).end().css(" border" " 2px red solid" )
jquery selectors 方法說明
基本選擇器
$(" #mydiv" ) 匹配唯一的具有此id值的元素
$(" div" ) 匹配指定名稱的所有元素
$(" .myclass" ) 匹配具有此class樣式值的所有元素
$(" " ) 匹配所有元素
$(" div span p.myclass" ) 聯合所有匹配的選擇器
層疊選擇器
$(" form input" ) 後代選擇器 選擇ancestor的所有子孫節點
$(" #main > " ) 子選擇器 選擇parent的所有子節點
$(" label + input" ) 臨選擇器 選擇prev的下一個臨節點
$(" #prev ~ div" ) 同胞選擇器 選擇prev的所有同胞節點
基本過濾選擇器
$(" tr:first" ) 匹配第一個選擇的元素
$(" tr:last" ) 匹配最後一個選擇的元素
$(" input:not(:checked) + span" )從原元素集合中過濾掉匹配selector的所有元素(這裏有是一個臨選擇器)
$(" tr:even" ) 匹配集合中偶數位置的所有元素(從0開始)
$(" tr:odd" ) 匹配集合中奇數位置的所有元素(從0開始)
$(" td:eq(2)" ) 匹配集合中指定位置的元素(從0開始)
$(" td:gt(4)" ) 匹配集合中指定位置之後的所有元素(從0開始)
$(" td:gl(4)" ) 匹配集合中指定位置之前的所有元素(從0開始)
$(" :header" ) 匹配所有標題
$(" div:animated" ) 匹配所有正在運行動畫的所有元素
內容過濾選擇器
$(" div:contains(' john' )" ) 匹配含有指定文本的所有元素
$(" td:empty" ) 匹配所有空元素(只含有文本的元素不算空元素)
$(" div:has(p)" ) 從原元素集合中再次匹配所有至少含有一個selector的所有元素
$(" td:parent" ) 匹配所有不爲空的元素(含有文本的元素也算)
$(" div:hidden" ) 匹配所有隱藏的元素 也包括表單的隱藏域
$(" div:visible" ) 匹配所有可見的元素
屬性過濾選擇器
$(" div[id]" ) 匹配所有具有指定屬性的元素
$(" input[name=' newsletter' ]" ) 匹配所有具有指定屬性值的元素
$(" input[name!=' newsletter' ]" ) 匹配所有不具有指定屬性值的元素
$(" input[name^=' news' ]" ) 匹配所有指定屬性值以value開頭的元素
$(" input[name$=' letter' ]" ) 匹配所有指定屬性值以value結尾的元素
$(" input[name=' man' ]" ) 匹配所有指定屬性值含有value字符的元素
$(" input[id][name$=' man' ]" ) 匹配同時符合多個選擇器的所有元素
子元素過濾選擇器
$(" ul li:nth-child(2)" )
$(" ul li:nth-child(odd)" ) 匹配父元素的第n個子元素
$(" ul li:nth-child(3n + 1)" )
$(" div span:first-child" ) 匹配父元素的第1個子元素
$(" div span:last-child" ) 匹配父元素的最後1個子元素
$(" div button:on
表單元素選擇器
$(" :input" ) 匹配所有的表單輸入元素 包括所有類型的input textarea select 和 button
$(" :text" ) 匹配所有類型爲text的input元素
$(" :password" ) 匹配所有類型爲password的input元素
$(" :radio" ) 匹配所有類型爲radio的input元素
$(" :checkbox" ) 匹配所有類型爲checkbox的input元素
$(" :submit" ) 匹配所有類型爲submit的input元素
$(" :p_w_picpath" ) 匹配所有類型爲p_w_picpath的input元素
$(" :reset" ) 匹配所有類型爲reset的input元素
$(" :button" ) 匹配所有類型爲button的input元素
$(" :file" ) 匹配所有類型爲file的input元素
$(" :hidden" ) 匹配所有類型爲hidden的input元素或表單的隱藏域
表單元素過濾選擇器
$(" :enabled" ) 匹配所有可操作的表單元素
$(" :disabled" ) 匹配所有不可操作的表單元素
$(" :checked" ) 匹配所有已點選的元素
$(" select option:selected" ) 匹配所有已選擇的元素
jquery css 方法說明
css( name ) 訪問第一個匹配元素的樣式屬性。
css( properties ) 把一個" 名/值對" 對象設置爲所有匹配元素的樣式屬性。
$(" p" ).hover(function () {
$(this).css({ backgroundcolor:" yellow" fontweight:" bolder" })
} function () {
var cssobj = {
backgroundcolor: " #ddd"
fontweight: " "
color: " rgb(0 40 244)"
}
$(this).css(cssobj)
})
css( name value ) 在所有匹配的元素中 設置一個樣式屬性的值。
offset( ) 取得匹配的第一個元素相對於當前可視窗口的位置。返回的對象有2個屬性
top和left 屬性值爲整數。這個函數只能用於可見元素。
var p = $(" p:last" )
var offset = p.offset()
p.html( " left: " + offset.left + " top: " + offset.top )
width( ) 取得當前第一匹配的元素的寬度值
width( val ) 爲每個匹配的元素設置指定的寬度值。
height( ) 取得當前第一匹配的元素的高度值
height( val ) 爲每個匹配的元素設置指定的高度值。
jquery utilities 方法說明
jquery.browser
.msie 表示ie
jquery.browser.version 讀取用戶瀏覽器的版本信息
jquery.boxmodel 檢測用戶瀏覽器針對當前頁的顯示是否基於w3c css的盒模型
jquery.isfunction( obj ) 檢測傳遞的參數是否爲function
function stub() { }
var objs = [
function ()