jQuery动态移除与增加onclick属性的方法详解


Posted in jQuery onJune 07, 2018

本文实例讲述了jQuery动态移除与增加onclick属性的方法。分享给大家供大家参考,具体如下:

这里给大家介绍利用jquery的removeAttrattr事件来给a标签增加与删除onclick事件的具体操作方法,有需要了解的朋友可参考。

要实现效果:点击链接先去掉onclick属性,3秒后再自动加上该标签中的onclick属性

jQuery中,针对标签属性的操作都是使用attr()方法来实现的,比如:$("a").attr("onclick")可获得a标签的onclick属性,对应的:

增加事件

$(选择器).attr(属性名) 它的作用就是获取指定元素( $(选择器)部分 )的指定属性的值

如设置onclick属性:

$("a").attr("onclick","test();");

删除事件

$(selector).removeAttr(attribute)

例如 删除onclick属性:

$("a").removeAttr("onclick");

理论上上面的代码没问题,但实际上上面语句不执行也不报错,后来发现原因:

jquery 1.6之前的版本并不支持attr()方法对标签onclick属性的相关操作!

换句话说要使用attr()方法操作标签中的onclick属性必须使用jq库1.6或更新的库版本!

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $(".b").click(function(){
 $(this).removeAttr("onclick");
 setTimeout(function(){
  $(".b").attr("onclick","test();");
  },3000)
 })
 })
function test(){}
</script>
<p>
 <a class="b" href="#" rel="external nofollow" onclick="test();">点击去掉该链接的onclick属性,3秒后再自动加上该onclick属性</a>
</p>

jquery中删除属性的关键词是: removeAttr 注意A是大写

jquery还有一个解除事件委派的方法:unbind([eventType])。参数是可选的,如果不选,则表示移除节点所有已绑定事件。

这里你只需要解除click事件,可以用$("#s1").unbind("click")来处理。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
You might like
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python区块及区块链的开发详解
2019/07/03 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Linux的主要特性
2014/10/06 面试题
合作投资意向书
2014/04/01 职场文书
作文评语集锦大全
2014/04/23 职场文书
小学生倡议书范文
2014/05/13 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
15个值得收藏的JavaScript函数
2021/09/15 Javascript
Java中的随机数Random
2022/03/17 Java/Android
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS