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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery中DOM操作原则实例分析
Aug 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 intval的测试代码发现问题
2008/07/27 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
js验证表单大全
2006/11/25 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python中format()函数的简单使用教程
2018/03/14 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
Python关于反射的实例代码分享
2020/02/20 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
python 调整图片亮度的示例
2020/12/03 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
解除劳动合同协议书范本
2014/04/14 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android