jquery，點擊一個節(jié)點，執(zhí)行某一事件，再次點擊，執(zhí)行另一個事件，要能循環(huán).

1、新建一個html文件，命名為test.html，用于講解gt;怎么讓jquery事件執(zhí)行一次。

成都創(chuàng)新互聯公司網站建設公司，提供網站制作、做網站，網頁設計，建網站，PHP網站建設等專業(yè)做網站服務;可快速的進行網站開發(fā)網頁制作和功能擴展；專業(yè)做搜索引擎喜愛的網站，是專業(yè)的做網站團隊，希望更多企業(yè)前來合作!

2、在test.html文件內，引入jquery.min.js庫文件，成功加載該文件，才能使用jquery中的方法。

3、在test.html文件內，使用p標簽創(chuàng)建一行文字，文字內容為“這是一段測試的文字”,并設置其class為mypp。

4、在js標簽內，在頁面加載完成時，通過class(mypp)獲得p元素對象，使用one()方法給對象綁定click點擊事件，當p元素被點擊時，執(zhí)行function()方法一次。

5、在function()方法內，使用$(this)獲得p標簽對象，使用text()方法取得p標簽內的值，把值保存在ny變量中。

6、在function()方法內，使用alert()方法將獲得的內容輸出來。

7、在瀏覽器打開test.html文件，點擊文字，查看實現的效果。

jquery鼠標點擊事件是什么？

定義和用法：

當點擊元素時，會發(fā)生 click 事件。

當鼠標指針停留在元素上方，然后按下并松開鼠標左鍵時，就會發(fā)生一次 click。

click() 方法觸發(fā) click 事件，或規(guī)定當發(fā)生 click 事件時運行的函數。

鼠標事件是在用戶移動鼠標光標或者使用任意鼠標鍵點擊時觸發(fā)的。

1、click事件：點擊鼠標左鍵時觸發(fā)

$('p').click(function(){});

示例：

123 $('p').click(function(){ ? ? ? ?alert('click function is running !'); ? ? ? });

2、dbclick事件：迅速連續(xù)的兩次點擊時觸發(fā)

$('p').dbclick(function(){});

示例：

123 $("button").dblclick(function(){ $("p").slideToggle();});

3、mousedown事件：按下鼠標時觸發(fā)

$('p').mousedown(function(){});

示例

123 $("button").mousedown(function(){ $("p").slideToggle();});

4、mouseup事件：松開鼠標時觸發(fā)

$('p').mouseup(function(){});

示例：

123 $("button").mouseup(function(){ $("p").slideToggle();});

5、mouseover事件：鼠標從一個元素移入另一個元素時觸發(fā)

mouseout事件：鼠標移出元素時觸發(fā)

$('p').mouseover(function(){});

$('p').mouseout(function(){});

示例：

123456 $("p").mouseover(function(){ $("p").css("background-color","yellow");});$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4");});

6、mouseenter事件：鼠標移入元素時觸發(fā)

mouseleave事件：鼠標移出元素時觸發(fā)

$('p').mouseenter(function(){});

$('p').mouseleave(function(){});

示例

123456 $("p").mouseenter(function(){ $("p").css("background-color","yellow");});$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});

7、hover事件

$('p').hover(

function(){},

function(){}

);

示例

123456789 $(".table_list tr").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

8、toggle事件：鼠標點擊切換事件

$('p').toggle(

function(){},

function(){}

);

示例

12345678 $("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");}

jquery綁定點擊事件的方法

jQuery綁定點擊事件可以使用其綁定事件函數

jquery中四個事件綁定方式（bind,live,delegate,on）

1、bind()????

簡要描述

bind()向匹配元素添加一個或多個事件處理器。

使用方式

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

event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；

單事件處理：例如?$(selector).bind("click",data,function);

多事件處理：

1.利用空格分隔多事件，例如?$(selector).bind("click dbclick mouseout",data,function);

2.利用大括號靈活定義多事件，例如?$(selector).bind({event1:function, event2:function, ...})　

3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況；

大括號替代方式：綁定較為靈活，可以給事件單獨

綁定函數；　

data：可選；需要傳遞的參數；

function：必需；當綁定事件發(fā)生時，需要執(zhí)行的函數；

適用Jquery版本

適用所有版本，但是根據官網解釋，自從jquery1.7版本以后bind()函數推薦用on()來代替。

2、live()? ?

簡要描述

live()?向當前或未來的匹配元素添加一個或多個事件處理器；

使用方式

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

event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；

單事件處理：例如?$(selector).live("click",data,function);

多事件處理：1.利用空格分隔多事件，例如?$(selector).live("click dbclick mouseout",data,function);

2.利用大括號靈活定義多事件，例如?$(selector).live({event1:function, event2:function, ...})　

3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況；

大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；　

data：可選；需要傳遞的參數；

function：必需；當綁定事件發(fā)生時，需要執(zhí)行的函數；

適用Jquery版本

jquery1.9版本以下支持，jquery1.9及其以上版本刪除了此方法，jquery1.9以上版本用on()方法來代替。

3、delegate()

簡要描述

delegate()?為指定的元素（被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數。使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）。

使用方式　

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

childSelector:?必需項；需要添加事件處理程序的元素，一般為selector的子元素；

event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；

單事件處理：例如?$(selector).delegate(childselector,"click",data,function);

多事件處理：1.利用空格分隔多事件，例如?$(selector).delegate(childselector,"click?dbclick mouseout",data,function);

2.利用大括號靈活定義多事件，例如?$(selector).delegate(childselector,{event1:function, event2:function, ...})　

3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況；

大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；　

data：可選；需要傳遞的參數；

function：必需；當綁定事件發(fā)生時，需要執(zhí)行的函數；

適用Jquery版本

jquery1.4.2及其以上版本；

4、on()

簡要描述

on()?為指定的元素,添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數。使用 on() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）。

使用方式　

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

event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；

單事件處理：例如?$(selector).on("click",childselector,data,function);

多事件處理：1.利用空格分隔多事件，例如?$(selector).on("click?dbclick mouseout",childseletor,data,function);

2.利用大括號靈活定義多事件，例如?$(selector).on({event1:function, event2:function, ...},childselector);　

3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況；

大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；　

childSelector:?可選；需要添加事件處理程序的元素，一般為selector的子元素；

data：可選；需要傳遞的參數；

function：必需；當綁定事件發(fā)生時，需要執(zhí)行的函數；

適用Jquery版本

jquery1.7及其以上版本；jquery1.7版本出現之后用于替代bind()，live()綁定事件方式；

四種方式的異同和優(yōu)缺點

相同點：

1.都支持單元素多事件的綁定；空格相隔方式或者大括號替代方式;

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

比較和聯系:

1.bind()函數只能針對已經存在的元素進行事件的設置；但是live(),on(),delegate()均支持未來新添加元素的事件設置；

2.bind()函數在jquery1.7版本以前比較受推崇，1.7版本出來之后，官方已經不推薦用bind()，替代函數為on(),這也是1.7版本新添加的函數，同樣，可以

用來代替live()函數，live()函數在1.9版本已經刪除；

3.live()函數和delegate()函數兩者類似，但是live()函數在執(zhí)行速度，靈活性和CSS選擇器支持方面較delegate()差些

4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；　

總結

如果項目中引用jquery版本為低版本，推薦用delegate(),高版本jquery可以使用on()來代替，以上僅為個人看法

《JQuery》如何觸發(fā)click事件？

不能觸發(fā)click事件最常見的三種情況：\x0d\x0a 選擇器使用錯誤，沒有選擇到標簽；（請分享html代碼分析）；\x0d\x0a 標簽比jquery方法慢加載，也就是 先加載的方法 ， 后加載的標簽；解決方法（將script標簽與js方法 寫在頁面的底部 也就是 body 標簽的下面）或者如下代碼\x0d\x0a\x0d\x0a\x0d\x0a \x0d\x0a \x0d\x0a \x0d\x0a \x0d\x0a $(document).ready(function(){\x0d\x0a $(".test").click(function(){\x0d\x0a alert("333");\x0d\x0a });\x0d\x0a });\x0d\x0a \x0d\x0a 點擊事件測試\x0d\x0a \x0d\x0a \x0d\x0a 點擊彈出\x0d\x0a \x0d\x0a \x0d\x0a jquery文件或者js文件 導入路徑錯誤或者沒有導入 （新手低級錯誤）；\x0d\x0a\x0d\x0a（純手打，求采納，已測試代碼。夢魂清風 @author：dream breeze）！！

jquery里怎么添加點擊事件

直接使用click事件是不起作用的，我平常使用的兩種方法

1、on事件

var html1='';

html1 +=`div

button type="button" class="btn btn-primary sure btn-mian" onclick="sure()"確認提交/button

button type="button" class="btn btn-default " data-dismiss="modal"暫不提交/button

/div`

$('.modal-footer').append(html1);

$('div').on('click','.sure',function(){console.log("+++");});

2、onclick事件

var html1='';

html1 +=`div

button type="button" class="btn btn-primary sure btn-mian" onclick="sure()"確認提交/button

button type="button" class="btn btn-default " data-dismiss="modal"暫不提交/button

/div`

$('.modal-footer').append(html1);

functionsure(){console.logO("===");}

需要獲取到div這個元素，可以通過id，class等等方式得到，比如說div的id為"div1",那么就可以這么寫了。$('#div1').click(function(){//這里面就是click事件的內容了});

當前標題：jquery點擊時間,jQuery點擊時間先初始化
標題URL：http://chinadenli.net/article45/dseesei.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站收錄、ChatGPT、面包屑導航、App設計、小程序開發(fā)、網站排名

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯