jq on()怎么绑定多个事件

最新推荐文章于 2022-09-20 16:37:28 发布
最新推荐文章于 2022-09-20 16:37:28 发布
阅读量746 收藏 1
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/hilxj/p/11110129.html
版权

 

<!DOCTYPE html >
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
<title>评分效果 </title>
<script src= "../js/jquery.min.js" > < /script>
<style>
ul li{ padding: 0; list-style: none}
li{ width: 30px; height: 30px; border: 1px solid #333; float: left; margin-right: 10px}
< /style>
</head>
<body>
<ul class= "ul01" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
$( function(){
$( "li").on({
mouseover: function(){
if($( this).css( "backgroundColor") == '#ff0000'){
$( this).css( "background", "");
console.log($( this).css( "backgroundColor"))
} else{
$( this).css( "background", "red").prevAll( "li").css( "background", "red");
console.log($( this).css( "backgroundColor"))
}
},
mouseout: function(){
$( this).css( "background", "")
},
click: function(){
$( this).off( "mouseout")
$( this).css( "background", "red").prevAll( "li").css( "background", "red");
}
})
})
< /script>
</body>
</html>


 

转载于:https://www.cnblogs.com/hilxj/p/11110129.html

weixin_30439131
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jq事件绑定：on事件、off事件、方法函数、one事件
YY的博客
11-11 2101
click（）、mouseover（）、mouseout（）、blur（）、change（）
jQuery事件中on实现绑定多个事件
极客神殿
04-06 8342
相信大家都知道在jQuery1.9版本中，已经去掉了live和delegate方法，从而将on方法的地位进一步提升。 jQuery如此推崇on方法，必有其独到的地方。所以我们就有必要了解这个on，并在代码中利用它，从而优化代码和提高性能。那么接下来我们就来看看on的使用方法 一、使用on进行普通事件绑定 1.1使用on绑定一个事件 语法结构： jq对象.on(“事件类型”,”事件处理函数”) 1....
jQuery事件处理 on() 绑定事件
vue_ajks的博客
08-12 1337
jQuery事件处理 on() 绑定事件
JQ中使用on()绑定多个事件
m0_50953782的博客
09-20 1288
1.多个事件绑定同一函数时，如：但点击或者移入时，被选中元素改变字体色。 2.多个事件绑定不同函数时，如：但点击时被选中元素字体变大（点击试也移入了故字体也变红，这里只是随意选择了两个事件），移入时字体色变为红色。
jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件
cheng1a的博客
09-05 8565
jQuery绑定点击事件和及监听改变事件的几种方式以及多个元素绑定多个事件
flag和jq on 的绑定多个对象和方法(必看)
08-31
下面小编就为大家带来一篇flag和jq on 的绑定多个对象和方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Jquery on方法绑定事件后执行多次的解决方法
10-22
下面小编就为大家带来一篇Jquery on方法绑定事件后执行多次的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Jquery on绑定的事件 触发多次实例代码
10-20
在jQuery中，`on()`函数是一个非常重要的事件处理方法，用于绑定事件监听器到元素上。然而，在某些情况下，如果使用不当，可能会导致事件被触发多次，就像标题和描述中提到的问题。这个问题通常发生在动态添加的元素...
jQuery使用bind函数实现绑定多个事件的方法
11-27
本文实例讲述了jQuery使用bind函数实现绑定多个事件的方法。分享给大家供大家参考，具体如下： 在jQuery中绑定多个事件名称是，使用空格隔开，举例如下： $("#foo").bind("mouseenter mouseleave", function() { $...
jquery一个控件绑定多个事件
weixin_34268579的博客
08-29 177
jQuery("#id").bind("click mouseover",function(){})  // 两个事件中间有空格      $("p").on({mouseover:function(){$("body").css("background-color","lightgray");}, mouseout:function(){$("body")
jquery on绑定多个事件
吃瓜群众的博客
12-22 7535
一、jquery为多个选择器绑定同一个事件 $("#start,#end").on("click",function(){ 　　　　alert("The paragraph was clicked."); }); 二、多个事件绑定同一个函数 $("p").on("mouseover mouseout",function(){ $("p").togg
jquery on()绑定事件无效
helloqqdd的博客
04-27 6168
今天在做项目的过程中遇到了jquery 动态生成的元素绑定事件的问题。 首先我目前所了解的是 (1)用bind或者直接给元素加事件（例如click）这种的是对于页面初始化就有的元素 (2)对于后面动态生成的元素无效,例如append(某动态生成元素),这种用以上的方法无效 为了使动态生成的元素能绑定事件,我网上查了一番,听说on可以动态绑定事件,我试了一下没有效果,纠结了很
jq使用on()方法绑定事件被执行多次的问题
m0_49016709的博客
04-14 556
jq中用on()方法绑定了事件之后，在代码执行过程中，可能会遇到事件被多次执行的情况。 <input id="bindEventBtn" type="button" value="给按钮绑定事件的按钮" /> js代码 $(function(){ $(‘#bindEventBtn‘).click(function () { $(‘#noEmotionBtn‘).on(‘click‘, function () { alert('绑定了事件');
jQuery事件之on()方法绑定多个选择器,多个事件
u012767263的专栏
02-22 8944
 这样一个需求，如果用live()方法实现的话 非常简单，容易理解。 $('nav li, #sb-nav li, #help li').live('click', function () {   // code...}); jquery在1.7版本后，建议大家用on方法代替之前的bind、live、delegate方法。 那上面一句如果用on的话，怎么写呢？ 其实查看live源码就
jquery之on()绑定事件和off()解除绑定事件
ahe82105的博客
10-08 870
on()函数 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。 on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 你还可以额外传递给事件处理函数一些所需的数据。 该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先...
jquery on()方法绑定多个选择器,多个事件
C赏心悦目
08-07 765
on(events,[selector],[data],fn) •events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。 •selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。 •data:当一个事件被触发时要传递event.data给事件处理函数。 •fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。 这样一个需.
jQuery_事件绑定如何用on实现事件委托
jiang7701037的博客
01-23 3724
*{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:400px; height:300px; back
jquery同一标签绑定多个事件的几种方式 && js实时监听input中值变化
热门推荐
到达的专栏
10-31 1万+
jquery同一标签绑定多个事件的几种方式 ①$(document).ready(function(){ $("button").bind({ click:function(){$("p").slideToggle()}, mouseover:function(){$("body").css("background-color","red");}, ...
jQuery中绑定事件的两个方法
weixin_43342105的博客
02-24 301
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jq的on绑定chang事件
最新发布
05-31
你可以使用以下代码来使用jQuery的on方法绑定change事件： ``` $(document).on('change', '#yourElementId', function() { // 处理change事件的代码 }); ``` 其中，`#yourElementId` 是你要绑定change事件的元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值