jQuery相關操作

2021-09-27 12:07:50 字數 3129 閱讀 9896

$("button").click(function(e));
$("button").click(function(e));
e.preventdefault()
元素.事件名(function(){})
bind繫結事件
bind(type,[data],fn)

type:事件型別 事件名

含有乙個或多個事件型別的字串,由空格分隔多個事件。比如"click"或"submit",還可以是自定義事件名。

data: 額外的資料 自動掛載在事件物件的 data屬性上

fn:事件函式

unbind(type,[data|fn]])

bind()的反向操作,從每乙個匹配的元素中刪除繫結的事件。

如果沒有引數,則刪除所有繫結的事件。

你可以將你用bind()註冊的自定義事件取消繫結。

如果提供了事件型別作為引數,則只刪除該型別的繫結事件。

如果把在繫結時傳遞的處理函式作為第二個引數,則只有這個特定的事件處理函式會被刪除。

delegate(selector,[type],[data],fn)

selector:選擇器字串,用於過濾器觸發事件的元素。

type:附加到元素的乙個或多個事件。 由空格分隔多個事件值。必須是有效的事件。

fn:當事件發生時執行的函式

undelegate([selector,[type],fn])

on(events,[selector],[data],fn)

off(events,[selector],[fn])

$.ajax(url,[settings])

settings配置 json

$.ajax(,

success:function(res),

error:function(err),

complete:function()

});$.ajax(url,,

success:function(res)

});

如何使用封裝好的外掛程式

封裝好的外掛程式:

1,引入 外掛程式的 css檔案

2,引入js檔案 注意 需要先引入jquery

3,**結構(html結構 包含類名)跟 外掛程式要求保持一致

4,呼叫乙個方法

如何封裝外掛程式

jquery外掛程式 分為兩種

jquery物件級別的外掛程式

呼叫時:

$("選擇器").方法名()

類級別外掛程式

呼叫時:

$.函式名() 比如 jquery ajax

jquery物件級別外掛程式 就是給jquery物件新增方法

$.fn.extend(

});$.fn.函式名 = function(自定義引數)

呼叫: jquery物件.函式名(引數);

jquery 類級別 外掛程式

$.extend(

});$.函式名=function(引數)

呼叫: $.函式名(引數)

設定:

元素.html(內容)

獲取 元素.html()

設定:

元素.text(文字)

獲取 元素.text()

val() 原生value

設定的:

元素.val(值)

獲取 元素.val()

停止動畫的

引數1:清空動畫佇列

引數2: 立即結束 到 最後的狀態

注意:使用動畫時,如果這個動畫可能多次觸發,需要先停止動畫在開啟動畫 .stop().動畫()

hover(function(),function())
內建 元素顯示 消失

元素.animate(,毫秒數);

注意:jquery動畫不支援 顏色

動畫執行之 排隊 和併發

併發

.animate(,時間);
排隊

元素.animate().animate().animate()
trigger("事件名")

模擬事件,模擬乙個使用者的行為,或者瀏覽器自己的行為,對應事件就會觸發

fadeto([[speed],opacity,[easing],[fn]])
jquery集合遍歷

$("li").each(function(i,el));

元素.css("width/height")  返回的是字串 "200px"  不包含 padding 和border

元素.width() 元素.height() 設定 或者 獲取 元素的寬度、高度

設定: 元素.width(number) 設定

獲取 元素.width() 返回的是數字 不包含padding和border

唯讀 只能獲取 不能設定

outerwidth()

outerheight()

offset() 

返回物件

儲存了當前元素距離頁面 最頂部和最左邊的距離

position()

返回是物件

儲存了當前元素 距離 定位基點的 距離(最上面也最左邊)

相當於原生的 offsetleft offsettop

window 網頁滾動條

獲取$(document).scrolltop()

設定: 1,$(document).scrolltop(值)

2,animate

$("html,body").animate(,300);

Jquery的相關操作

jquery操作select 增加,刪除,清空 jquery獲取select選擇的text和value select id change function 為select新增事件,當選擇其中一項時觸發 var checktext select id find option selected text...

jQuery操作屬性的相關方法

下面這組方法是操作dom物件屬性的通用方法,可以操作dom物件的通用屬性,例如title alt src等。1 attr name 訪問jquery物件裡第乙個匹配元素的name屬性值。2 attr map 用於為jquery物件裡所有dom物件同時設定多個屬性值。3 attr name,value...

jquery處理select的相關操作

jquery獲取select選擇的文字與值 獲取select 獲取select 選中的 text ddlregtype find option selected text 獲取select選中的 value ddlregtype val 獲取select選中的索引 ddlregtype get 0 ...