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 remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
浅析js封装和作用域
2013/07/09 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
极简的Python入门指引
2015/04/01 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Python Flask-web表单使用详解
2017/11/18 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Python实现数值积分方式
2019/11/20 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
python集合能干吗
2020/07/19 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
外贸业务员工作职责
2014/01/06 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
介绍信怎么写
2015/01/30 职场文书
荒岛余生观后感
2015/06/09 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库