你用jQuery選擇器選中后,添加事件就可以了呀。只要是jQuery對(duì)象,一般都可以點(diǎn)擊的,想打開頁(yè)面就自動(dòng)點(diǎn)擊的話,可以如下操作。
創(chuàng)新互聯(lián)長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為海勃灣企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),海勃灣網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
例如:p class="a"段落1/p
$(".a").click(function(){alert($(this).text())}).click();//打開頁(yè)面就自動(dòng)點(diǎn)擊了
1、Jquery使用內(nèi)置的show和hide方法就可以實(shí)現(xiàn),具體的操作步驟首先需要打開hbuilder編輯器,新建一個(gè)a標(biāo)簽和一段隱藏的div,設(shè)置好它們的id屬性,并設(shè)置一些簡(jiǎn)單的樣式:
2、然后引入Jquery的庫(kù)文件,編寫代碼。首先獲取a標(biāo)簽的dom并給它加一個(gè)click事件,在click的回調(diào)中判斷div是否為隱藏狀態(tài),是的話就隱藏div否則就顯示div:
3、最后來(lái)到編輯器右側(cè)的瀏覽器,可以看到此時(shí)div是顯示的:
4、點(diǎn)擊一下,div就會(huì)隱藏了,可以來(lái)回點(diǎn)擊切換顯示和隱藏:
定義和用法:
當(dāng)點(diǎn)擊元素時(shí),會(huì)發(fā)生 click 事件。
當(dāng)鼠標(biāo)指針停留在元素上方,然后按下并松開鼠標(biāo)左鍵時(shí),就會(huì)發(fā)生一次 click。
click() 方法觸發(fā) click 事件,或規(guī)定當(dāng)發(fā)生 click 事件時(shí)運(yùn)行的函數(shù)。
鼠標(biāo)事件是在用戶移動(dòng)鼠標(biāo)光標(biāo)或者使用任意鼠標(biāo)鍵點(diǎn)擊時(shí)觸發(fā)的。
1、click事件:點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)
$('p').click(function(){});
示例:
123 $('p').click(function(){ ? ? ? ?alert('click function is running !'); ? ? ? });
2、dbclick事件:迅速連續(xù)的兩次點(diǎn)擊時(shí)觸發(fā)
$('p').dbclick(function(){});
示例:
123 $("button").dblclick(function(){ $("p").slideToggle();});
3、mousedown事件:按下鼠標(biāo)時(shí)觸發(fā)
$('p').mousedown(function(){});
示例
123 $("button").mousedown(function(){ $("p").slideToggle();});
4、mouseup事件:松開鼠標(biāo)時(shí)觸發(fā)
$('p').mouseup(function(){});
示例:
123 $("button").mouseup(function(){ $("p").slideToggle();});
5、mouseover事件:鼠標(biāo)從一個(gè)元素移入另一個(gè)元素時(shí)觸發(fā)
mouseout事件:鼠標(biāo)移出元素時(shí)觸發(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事件:鼠標(biāo)移入元素時(shí)觸發(fā)
mouseleave事件:鼠標(biāo)移出元素時(shí)觸發(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事件:鼠標(biāo)點(diǎn)擊切換事件
$('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綁定點(diǎn)擊事件可以使用其綁定事件函數(shù)
jquery中四個(gè)事件綁定方式(bind,live,delegate,on)
1、bind()????
簡(jiǎn)要描述
bind()向匹配元素添加一個(gè)或多個(gè)事件處理器。
使用方式
$(selector).bind(event,data,function)
event:必需項(xiàng);添加到元素的一個(gè)或多個(gè)事件,例如 click,dblclick等;
單事件處理:例如?$(selector).bind("click",data,function);
多事件處理:
1.利用空格分隔多事件,例如?$(selector).bind("click dbclick mouseout",data,function);
2.利用大括號(hào)靈活定義多事件,例如?$(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式:綁定較為死板,不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況;
大括號(hào)替代方式:綁定較為靈活,可以給事件單獨(dú)
綁定函數(shù);
data:可選;需要傳遞的參數(shù);
function:必需;當(dāng)綁定事件發(fā)生時(shí),需要執(zhí)行的函數(shù);
適用Jquery版本
適用所有版本,但是根據(jù)官網(wǎng)解釋,自從jquery1.7版本以后bind()函數(shù)推薦用on()來(lái)代替。
2、live()? ?
簡(jiǎn)要描述
live()?向當(dāng)前或未來(lái)的匹配元素添加一個(gè)或多個(gè)事件處理器;
使用方式
$(selector).live(event,data,function)
event:必需項(xiàng);添加到元素的一個(gè)或多個(gè)事件,例如 click,dblclick等;
單事件處理:例如?$(selector).live("click",data,function);
多事件處理:1.利用空格分隔多事件,例如?$(selector).live("click dbclick mouseout",data,function);
2.利用大括號(hào)靈活定義多事件,例如?$(selector).live({event1:function, event2:function, ...})
3.空格相隔方式:綁定較為死板,不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況;
大括號(hào)替代方式:綁定較為靈活,可以給事件單獨(dú)綁定函數(shù);
data:可選;需要傳遞的參數(shù);
function:必需;當(dāng)綁定事件發(fā)生時(shí),需要執(zhí)行的函數(shù);
適用Jquery版本
jquery1.9版本以下支持,jquery1.9及其以上版本刪除了此方法,jquery1.9以上版本用on()方法來(lái)代替。
3、delegate()
簡(jiǎn)要描述
delegate()?為指定的元素(被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來(lái)的元素(比如由腳本創(chuàng)建的新元素)。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector:?必需項(xiàng);需要添加事件處理程序的元素,一般為selector的子元素;
event:必需項(xiàng);添加到元素的一個(gè)或多個(gè)事件,例如 click,dblclick等;
單事件處理:例如?$(selector).delegate(childselector,"click",data,function);
多事件處理:1.利用空格分隔多事件,例如?$(selector).delegate(childselector,"click?dbclick mouseout",data,function);
2.利用大括號(hào)靈活定義多事件,例如?$(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式:綁定較為死板,不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況;
大括號(hào)替代方式:綁定較為靈活,可以給事件單獨(dú)綁定函數(shù);
data:可選;需要傳遞的參數(shù);
function:必需;當(dāng)綁定事件發(fā)生時(shí),需要執(zhí)行的函數(shù);
適用Jquery版本
jquery1.4.2及其以上版本;
4、on()
簡(jiǎn)要描述
on()?為指定的元素,添加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 on() 方法的事件處理程序適用于當(dāng)前或未來(lái)的元素(比如由腳本創(chuàng)建的新元素)。
使用方式
$(selector).on(event,childselector,data,function)
event:必需項(xiàng);添加到元素的一個(gè)或多個(gè)事件,例如 click,dblclick等;
單事件處理:例如?$(selector).on("click",childselector,data,function);
多事件處理:1.利用空格分隔多事件,例如?$(selector).on("click?dbclick mouseout",childseletor,data,function);
2.利用大括號(hào)靈活定義多事件,例如?$(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式:綁定較為死板,不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況;
大括號(hào)替代方式:綁定較為靈活,可以給事件單獨(dú)綁定函數(shù);
childSelector:?可選;需要添加事件處理程序的元素,一般為selector的子元素;
data:可選;需要傳遞的參數(shù);
function:必需;當(dāng)綁定事件發(fā)生時(shí),需要執(zhí)行的函數(shù);
適用Jquery版本
jquery1.7及其以上版本;jquery1.7版本出現(xiàn)之后用于替代bind(),live()綁定事件方式;
四種方式的異同和優(yōu)缺點(diǎn)
相同點(diǎn):
1.都支持單元素多事件的綁定;空格相隔方式或者大括號(hào)替代方式;
2.均是通過(guò)事件冒泡方式,將事件傳遞到document進(jìn)行事件的響應(yīng);
比較和聯(lián)系:
1.bind()函數(shù)只能針對(duì)已經(jīng)存在的元素進(jìn)行事件的設(shè)置;但是live(),on(),delegate()均支持未來(lái)新添加元素的事件設(shè)置;
2.bind()函數(shù)在jquery1.7版本以前比較受推崇,1.7版本出來(lái)之后,官方已經(jīng)不推薦用bind(),替代函數(shù)為on(),這也是1.7版本新添加的函數(shù),同樣,可以
用來(lái)代替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é)
如果項(xiàng)目中引用jquery版本為低版本,推薦用delegate(),高版本jquery可以使用on()來(lái)代替,以上僅為個(gè)人看法