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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery实现全选按钮
Jan 01 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实现简单的协程任务调度demo示例
2020/02/01 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
诚信考试标语
2014/06/24 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
天下第一关导游词
2015/02/06 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL