我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

jquery点击时间,jQuery点击时间先初始化

jquery,点击一个节点,执行某一事件,再次点击,执行另一个事件,要能循环.

1、新建一个html文件,命名为test.html,用于讲解gt;怎么让jquery事件执行一次。

成都创新互联公司网站建设公司,提供网站制作、做网站,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!

2、在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。

3、在test.html文件内,使用p标签创建一行文字,文字内容为“这是一段测试的文字”,并设置其class为mypp。

4、在js标签内,在页面加载完成时,通过class(mypp)获得p元素对象,使用one()方法给对象绑定click点击事件,当p元素被点击时,执行function()方法一次。

5、在function()方法内,使用$(this)获得p标签对象,使用text()方法取得p标签内的值,把值保存在ny变量中。

6、在function()方法内,使用alert()方法将获得的内容输出来。

7、在浏览器打开test.html文件,点击文字,查看实现的效果。

jquery鼠标点击事件是什么?

定义和用法:

当点击元素时,会发生 click 事件。

当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。

click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。

1、click事件:点击鼠标左键时触发

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

示例:

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

2、dbclick事件:迅速连续的两次点击时触发

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

示例:

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

3、mousedown事件:按下鼠标时触发

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

示例

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

4、mouseup事件:松开鼠标时触发

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

示例:

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

5、mouseover事件:鼠标从一个元素移入另一个元素时触发

mouseout事件:鼠标移出元素时触发

$('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事件:鼠标移入元素时触发

mouseleave事件:鼠标移出元素时触发

$('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:必需;当绑定事件发生时,需要执行的函数;

适用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:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

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

3、delegate()

简要描述

delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式 

$(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:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

jquery1.4.2及其以上版本;

4、on()

简要描述

on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式 

$(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:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

四种方式的异同和优缺点

相同点:

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()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些

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

总结

如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替,以上仅为个人看法

《JQuery》如何触发click事件?

不能触发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://mswzjz.cn/article/dseesei.html

其他资讯