jquery點擊,jquery點擊隱藏顯示事件
jquery怎么模擬點擊超
有時候我們需要頁面自動點擊超鏈接或者按鈕,可以用js或者jQuery利用程序去點擊,方法很簡單,按鈕或超鏈接代碼如下:
點擊超鏈接 點擊按鈕
上面是一個超鏈接和一個按鈕,并且超鏈接和按鈕都綁定了點擊事件
先看超鏈接,如果我們打算點擊超鏈接的同時不僅觸發(fā)事件而且跳轉(zhuǎn)到href的指定鏈接,可以用:
script
document.getElementById("alink").click();/script
這樣就可以實現(xiàn)上面的功能,但是如果我只想觸發(fā)事件而不想跳轉(zhuǎn)呢,方法有兩個,第一個是href寫上href="javascript:;"
另外的方法是引入jQuery,然后用jQuery點擊事件觸發(fā)
script
$("#alink").click();/script
這樣就不會跳轉(zhuǎn)了
如果是按鈕的話,直接用以下代碼:1 script2 //真正的用程序點擊按鈕3 document.getElementById("btn").click();4 //沒有點擊按鈕,只是執(zhí)行了按鈕所綁定的事件5 document.getElementById("btn").onclick();6 /script
JQuery怎么讓任意元素自動點擊
你用jQuery選擇器選中后,添加事件就可以了呀。只要是jQuery對象,一般都可以點擊的,想打開頁面就自動點擊的話,可以如下操作。
例如:p class="a"段落1/p
$(".a").click(function(){alert($(this).text())}).click();//打開頁面就自動點擊了
jquery 點擊事件點擊元素添加和移除class
可以使用:$("#but").removeAttr("class");和$("#but").attr("class","but_test");來對標簽進行元素的添加和刪除。
為了直觀性的看到結(jié)果,首先在css樣式中,針對class選擇該元素,之后添加相應的樣式。
接下來,就給該button按鈕添加一個點擊事件,讓它能過自由切換。
對該點擊事件添加js函數(shù)。
運行后的結(jié)果為:
拓展資料:
jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫(或JavaScript框架)。它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設計模式,優(yōu)化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jquery鼠標點擊事件是什么?
定義和用法:
當點擊元素時,會發(fā)生 click 事件。
當鼠標指針停留在元素上方,然后按下并松開鼠標左鍵時,就會發(fā)生一次 click。
click() 方法觸發(fā) click 事件,或規(guī)定當發(fā)生 click 事件時運行的函數(shù)。
鼠標事件是在用戶移動鼠標光標或者使用任意鼠標鍵點擊時觸發(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,點擊一個節(jié)點,執(zhí)行某一事件,再次點擊,執(zhí)行另一個事件,要能循環(huán).
1、新建一個html文件,命名為test.html,用于講解gt;怎么讓jquery事件執(zhí)行一次。
2、在test.html文件內(nèi),引入jquery.min.js庫文件,成功加載該文件,才能使用jquery中的方法。
3、在test.html文件內(nèi),使用p標簽創(chuàng)建一行文字,文字內(nèi)容為“這是一段測試的文字”,并設置其class為mypp。
4、在js標簽內(nèi),在頁面加載完成時,通過class(mypp)獲得p元素對象,使用one()方法給對象綁定click點擊事件,當p元素被點擊時,執(zhí)行function()方法一次。
5、在function()方法內(nèi),使用$(this)獲得p標簽對象,使用text()方法取得p標簽內(nèi)的值,把值保存在ny變量中。
6、在function()方法內(nèi),使用alert()方法將獲得的內(nèi)容輸出來。
7、在瀏覽器打開test.html文件,點擊文字,查看實現(xiàn)的效果。
jquery綁定點擊事件的方法
jQuery綁定點擊事件可以使用其綁定事件函數(shù)
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.空格相隔方式:綁定較為死板,不能給事件單獨綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況;
大括號替代方式:綁定較為靈活,可以給事件單獨
綁定函數(shù);
data:可選;需要傳遞的參數(shù);
function:必需;當綁定事件發(fā)生時,需要執(zhí)行的函數(shù);
適用Jquery版本
適用所有版本,但是根據(jù)官網(wǎng)解釋,自從jquery1.7版本以后bind()函數(shù)推薦用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.空格相隔方式:綁定較為死板,不能給事件單獨綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況;
大括號替代方式:綁定較為靈活,可以給事件單獨綁定函數(shù);
data:可選;需要傳遞的參數(shù);
function:必需;當綁定事件發(fā)生時,需要執(zhí)行的函數(shù);
適用Jquery版本
jquery1.9版本以下支持,jquery1.9及其以上版本刪除了此方法,jquery1.9以上版本用on()方法來代替。
3、delegate()
簡要描述
delegate()?為指定的元素(被選元素的子元素)添加一個或多個事件處理程序,并規(guī)定當這些事件發(fā)生時運行的函數(shù)。使用 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.空格相隔方式:綁定較為死板,不能給事件單獨綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況;
大括號替代方式:綁定較為靈活,可以給事件單獨綁定函數(shù);
data:可選;需要傳遞的參數(shù);
function:必需;當綁定事件發(fā)生時,需要執(zhí)行的函數(shù);
適用Jquery版本
jquery1.4.2及其以上版本;
4、on()
簡要描述
on()?為指定的元素,添加一個或多個事件處理程序,并規(guī)定當這些事件發(fā)生時運行的函數(shù)。使用 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.空格相隔方式:綁定較為死板,不能給事件單獨綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況;
大括號替代方式:綁定較為靈活,可以給事件單獨綁定函數(shù);
childSelector:?可選;需要添加事件處理程序的元素,一般為selector的子元素;
data:可選;需要傳遞的參數(shù);
function:必需;當綁定事件發(fā)生時,需要執(zhí)行的函數(shù);
適用Jquery版本
jquery1.7及其以上版本;jquery1.7版本出現(xiàn)之后用于替代bind(),live()綁定事件方式;
四種方式的異同和優(yōu)缺點
相同點:
1.都支持單元素多事件的綁定;空格相隔方式或者大括號替代方式;
2.均是通過事件冒泡方式,將事件傳遞到document進行事件的響應;
比較和聯(lián)系:
1.bind()函數(shù)只能針對已經(jīng)存在的元素進行事件的設置;但是live(),on(),delegate()均支持未來新添加元素的事件設置;
2.bind()函數(shù)在jquery1.7版本以前比較受推崇,1.7版本出來之后,官方已經(jīng)不推薦用bind(),替代函數(shù)為on(),這也是1.7版本新添加的函數(shù),同樣,可以
用來代替live()函數(shù),live()函數(shù)在1.9版本已經(jīng)刪除;
3.live()函數(shù)和delegate()函數(shù)兩者類似,但是live()函數(shù)在執(zhí)行速度,靈活性和CSS選擇器支持方面較delegate()差些
4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;
總結(jié)
如果項目中引用jquery版本為低版本,推薦用delegate(),高版本jquery可以使用on()來代替,以上僅為個人看法
欄 目:其它綜合
下一篇:jquery數(shù)組創(chuàng)建,jquery 數(shù)組
本文地址:http://mengdiqiu.com.cn/a1/qitazonghe/17136.html
您可能感興趣的文章
- 04-02jquery二級聯(lián)動,jquery二級聯(lián)動菜單
- 04-02jquery數(shù)組創(chuàng)建,jquery 數(shù)組
- 04-02jquery的hover,jquery概述
- 04-02jquery$不起作用,為什么jquery不執(zhí)行
- 04-02jquery與jsp,用jquery
- 04-02jquery點擊展開,js點擊展開
- 04-02jquery步驟,jquery方法
- 04-02小程序jquery,小程序開發(fā)公司
- 04-02圖片jquery,圖片頭像


閱讀排行
本欄相關(guān)
- 04-02android傳智播客,傳智播客官網(wǎng)
- 04-02android發(fā)展前景,android前景分析
- 04-02android屏幕適配,android屏幕適配 大廠
- 04-02android說明,android csdn
- 04-02android連接網(wǎng)絡,安卓網(wǎng)絡連接
- 04-02android素材,手機 素材
- 04-02線程池android,線程池拒絕策略有哪些
- 04-02android環(huán)境,android環(huán)境變量配置SDK
- 04-02android短信驗證碼,android免費的短信驗
- 04-02騰訊手機管家forandroid,騰訊手機管家新
隨機閱讀
- 01-10SublimeText編譯C開發(fā)環(huán)境設置
- 01-10C#中split用法實例總結(jié)
- 01-11ajax實現(xiàn)頁面的局部加載
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 04-02jquery與jsp,用jquery
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10delphi制作wav文件的方法