JQuery给元素动态增删类或特性
2015-07-29 22:44
681 查看
背景:通过JQuery动态给Html元素增加、删除类或属性,使Html元素在不同的时刻呈现不同的样式,给用户更好的体验感觉。
如存在以下p片段和button按钮,代码如下:
存在如下css代码:
存在如下JS代码:
如上代码,当点击按钮以后,给$("#pDisplay")元素添加或移除css类colorRed,效果如下:
同理,可应用于attr()和removeAttr(),代码如下:
如存在以下p片段和button按钮,代码如下:
<p id="pDisplay">现在的背景颜色是白色,点击按钮以后背景变为红色</p> <button id="changeColor">更改颜色</button>
存在如下css代码:
<style> .colorRed{ background-color:red; } </style>
存在如下JS代码:
$("#changeColor").toggle(function () { $("#pDisplay").addClass("colorRed"); }, function () { $("#pDisplay").removeClass("colorRed"); });
如上代码,当点击按钮以后,给$("#pDisplay")元素添加或移除css类colorRed,效果如下:
同理,可应用于attr()和removeAttr(),代码如下:
//Disabled 设置元素不可用: $(this).attr("disabled","disabled") //移除push元素的diasble特性: $("#push").removeAttr('disabled')
相关文章推荐
- javascript/jquery判断是否为undefined或是null!
- jQueryDOM操作
- jquery常用技巧及常用方法列表集合
- jQuery 2种扩展
- jQuery 学习笔记
- jquery插件编写(以折叠面板为例)
- 【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once
- 如何使用jQuery技术开发ios风格的页面导航菜单
- jquery中的each
- jquery插件大全
- jquery中attr和prop的区别
- JQuery.on()事件绑定
- 会用到的 多文件 flash上传 Web前端 推荐一个Jquery 插件 Uploadify
- 使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象
- jquery轮播图
- jquery中attr和prop的区别
- jQuery学习之元素包装集
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
- 利用jQuery扩展接口为jQuery框架定义了两个自定义函数,然后调用这两个函数
- jquery的$.extend和$.fn.extend作用及区别