JQUERY 繫結事件 獲取下拉框的值

2021-07-11 11:29:25 字數 3620 閱讀 6623

一、繫結事件方式 —— bind()、live()、delegate()、on()

bind():

匹配

已有元素新增乙個或多個事件處理器

$(selector).bind(event,data,function)

event:必需項;新增到元素的乙個或多個事件,例如 click,dblclick等;

單事件處理:例如 $(".btn-test").bind("click",data,function(){});

多事件處理:1.利用空格分隔多事件,例如 $(".btn-test").bind("click dbclick mouseout",data,function(){});

2.利用大括號靈活定義多事件,例如 $(".btn-test").bind(, "click":function(){}, ...})

3.空格相隔方式:繫結較為死板,不能給事件單獨繫結函式,適合處理多個事件呼叫同一函式情況;

大括號替代方式:繫結較為靈活,可以給事件單獨繫結函式;     

data:可選;需要傳遞的引數;

function:必需;當繫結事件發生時,需要執行的函式;

$(".btn-test").unbind("click"); (刪除事件)

live() —— 向當前或未來的匹配元素新增乙個或多個事件處理器;(新版本jquery已棄用,被on代替)

$(selector).live(event,data,function)

event:

必需項;新增到元素的乙個或多個事件,例如 click,dblclick等;

單事件處理:例如 $(".btn-test").live("click",data,function(){});

多事件處理:1.利用空格分隔多事件,例如 $(".btn-test").live

("click dbclick mouseout",data,function(){});

2.利用大括號靈活定義多事件,例如 $(".btn-test").live

(, "click":function(){}, ...}) 

3.空格相隔方式:繫結較為死板,不能給事件單獨繫結函式,適合處理多個事件呼叫同一函式情況;

大括號替代方式:繫結較為靈活,可以給事件單獨繫結函式;     

data:

可選;需要傳遞的引數;

function:

必需;當繫結事件發生時,需要執行的函式;

$(".btn-test").die("click");(刪除事件)

delegate() ——

為指定的當前或未來元素(被選元素的子元素)新增乙個或多個事件處理程式。

$(selector).delegate(childselector,event,data,function)  

childselector: 

必需項;需要新增事件處理程式的元素,一般為selector的子元素;

event:

必需項;新增到元素的乙個或多個事件,例如 click,dblclick等;

單事件處理:例如 $(".header").delegate("#btn-test1","click",data,function(){});

多事件處理:1.利用空格分隔多事件,例如 $(".header").delegate("#btn-test1","click dbclick mouseout

",data,function(){});

2.利用大括號靈活定義多事件,例如 $(".header").delegate("#btn-test1",, "click":function(){}, ...}) 

3.空格相隔方式:繫結較為死板,不能給事件單獨繫結函式,適合處理多個事件呼叫同一函式情況;

大括號替代方式:繫結較為靈活,可以給事件單獨繫結函式;     

data:

可選;需要傳遞的引數;

function:

必需;當繫結事件發生時,需要執行的函式;

on() ——

為指定的當前或未來元素(被選元素的子元素)

,新增乙個或多個事件處理程式。

使用方式 

$(selector).on(event,childselector,data,function)

event:

必需項;新增到元素的乙個或多個事件,例如 click,dblclick等;

單事件處理:例如 $(".header").on("click",".btn-test",data,function(){});

多事件處理:1.利用空格分隔多事件,例如 $(".header").on("click dbclick mouseout",".btn-test",data,function(){});

2.利用大括號靈活定義多事件,例如$(".header").on(, "click":function(){}, ...},".btn-test"); 

3.空格相隔方式:繫結較為死板,不能給事件單獨繫結函式,適合處理多個事件呼叫同一函式情況;

大括號替代方式:繫結較為靈活,可以給事件單獨繫結函式; 

childselector: 

可選;需要新增事件處理程式的元素,一般為selector的子元素;

data:

可選;需要傳遞的引數;

function:

必需;當繫結事件發生時,需要執行的函式;

$(".header").off("click",".btn-test");(刪除事件)

四種方式的異同和優缺點

相同點:

1.都支援單元素多事件的繫結;空格相隔方式或者大括號替代方式;

2.均是通過事件冒泡方式,將事件傳遞到document進行事件的響應;

比較和聯絡:

1.bind()函式只能針對已經存在的元素進行事件的設定;但是live(),on(),delegate()均支援未來新新增元素的事件設定;

2.bind()在官方推出1.7版本後不推薦使用,live()函式在1.9版本已經刪除,替代其為on()函式;

3.live()函式和delegate()函式兩者類似,但是live()函式在執行速度,靈活性和css選擇器支援方面較delegate()差些。

4.bind()支援jquery所有版本;live()支援jquery1.8-;delegate()支援jquery1.4.2+;on()支援jquery1.7+;

二、通過jquery獲得下拉框的顯示值

1. 參考如下**

$("select").val();  // 選中專案的

value值

$("select option:checked").text(); // 選中專案的

顯示值2. 示例如下:

1)建立html元素

請選擇:

選項1選項2

選項3選項4

2)編寫jquery**

$(function());

})

jquery獲取下拉框的值 設定下拉框的值

獲取select 獲取select 選中的 text ddlregtype find option selected text 獲取select選中的 value ddlregtype val 獲取select選中的索引 ddlregtype get 0 selectedindex 設定select...

jquery 獲取下拉框值與select text

下面先介紹了很多jquery獲取select屬性的方法,同時後面的例項我們講的是jquery 獲取下拉框值與select text jquery獲取select選擇的文字與值 獲取select 獲取select 選中的 text ddlregtype find option selected tex...

jq獲取下拉列表 jquery獲得下拉框的值

獲取select 獲取select 選中的 text ddlregtype find option selected text 獲取select選中的 value ddlregtype val 獲取select選中的索引 ddlregtype get 0 selectedindex 設定select...