JQuery给元素动态增删类或特性
背景:通过JQuery动态给Html元素增加、删除类或属性,使Html元素在不同的时刻呈现不同的样式,给用户更好的体验感觉。
如存在以下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')
JQuery给元素动态增删类或特性的更多相关文章
- Jquery 页面元素动态添加后绑定事件丢失方法,非 live
代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="A ...
- 用JQuery动态为选中元素添加/删除类
在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...
- (Jquery)关于给动态加载的页面元素,绑定事件
如果使用Jquery给元素绑定事件,一般会用bind,或者类似click函数来直接绑定. 但是对于动态生成的元素,会发现常规绑定无法生效,比如: <div class'div'></ ...
- jQuery on()绑定动态元素出现的问题小结
jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友 ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
- jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸
jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...
- jquery利用appendTo动态创建元素
动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
随机推荐
- iOS RSA (Objc)
/* RSA.h @author: ideawu @link: https://github.com/ideawu/Objective-C-RSA */ #import <Foundation/ ...
- PHP函数技巧篇
可变参数 Php提供3个函数用于检索在函数中所传递的参数. $array = func_get_args(); //返回一个提供给函数的所有参数的数组 $count = func_num_args() ...
- JSP分页技术的实现(利用当前页进行前后加减,并利用href进行当前页面传值,传值当然是那个当前值变量)
一.可滚动结果集 Connection con = DriverManager.getConnection(); PreparedStatement stmt = con.prepareStat ...
- PV,UV,IP概念
PV是网站分析的一个术语,用以衡量网站用户访问的网页的数量.对于广告主,PV值可预期它可以带来多少广告收入.一般来说,PV与来访者的数量成正比,但是PV并不直接决定页面的真实来访者数量,如同一个来访者 ...
- angularjs之ng-mode获取lobject类型里的键值
有时候数据库定义的时候,用一个对象来代表某个属性,之后直接访问对象就可以获取全部该对象的属性,但是有时需求访问对象中包含中的键值,引用键值的时候可以直接用.来获取对象的键值,比如 对象points: ...
- Ubuntu16.04常用操作命令总结ing
查看软件安装目录:whereis 软件名称(如:whereis mysql,where is sqlite3等) 安装软件:apt/apt-get install 软件名称(如:apt/apt-get ...
- 原创:E325: ATTENTION vim超完整超给力的问题与解决方法
又到了老葵花哥哥开课的时间 这是给大家提供一个企业常见的错误 我相信大家生活还编程中会长期使用接触这个错误 这里我们经常用的两个选项 (E)dit any way 编辑原来的文件,忽略刚刚做的修改 ( ...
- Android(java)学习笔记161:开发一个多界面的应用程序之人品计算器的简单实现
1.开启新的Activity的方法: (1)Intent 意图 (2)intent.setAction("自定义") 记得在清单文件中声明 (3)intent.setData(前 ...
- (四)docker创建私人仓库
(一) 简介 仓库(Repository)是集中存放镜像的地方.仓库可以 被认为是一个具体的项目或目录.例如对于仓库地址 docker.sina.com.cn/centos:centos63 来说,d ...
- vscode F12 不能用,原来是快捷键冲突了。
vscode F12 不能用,原来是快捷键冲突了.