jQuery操作样式知识总结
css操作
功能:设置或者修改样式,操作的是style属性。
设置单个样式
//name:需要设置的样式名称
//value:对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色
设置多个样式
//参数是一个对象,对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
"background":"gray",
"width":"400px",
"height":"200px"
});
获取样式
//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");
注意:获取样式操作只会返回第一个元素对应的样式值。
添加样式类
//name:需要添加的样式类名,注意参数不要带点.
addClass(name);
//例子,给所有的div添加one的样式。
$("div").addClass("one");
移除所有样式类
//不带参数,移除所有的样式类
removeClass()
//例子,移除div所有的样式类
$("div").removeClass();
移除单个样式类
//name:需要移除的样式类名
removeClass("name");
//例子,移除div中one的样式类名
$("div").removeClass("one");
判断是否有样式类
//name:用于判断的样式类名,返回值为true false
hasClass(name)
//例子,判断第一个div是否有one的样式类
$("div").hasClass("one");
切换样式类
//name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
toggleClass(name);
//例子
$("div").toggleClass("one");
经验总结:
- 如果操作到的样式非常少,可以考虑css方法
- 如果操作到的样式非常多,那么可以通过class方法来操作,将样式写到一个class类里面。
- 如果考虑到后期维护方便,将css从js中分离出来,那么推荐使用class的方式来操作。
jQuery操作样式知识总结的更多相关文章
- 测开之路一百零四:jquery操作样式
jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...
- JQuery操作样式以及JQuery事件机制
1.操作样式 1.1 css的操作 功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...
- jQuery操作DOM知识总结
jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span> ...
- Jquery操作样式
1.CSS(name,value) 修改单个样式 $(function(){ $(".divcontent").css("background","r ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- jquery 操作
Jquery使用时要引用,引用时放在最前. Jquery: $代表选择器, $(document) ready(function(e){}):找到页面,页面加载完成后执行. JS选取元素操作内容操作属 ...
- JQuery操作DOM(8)
一.jQuery操作样式 1.设置和获取样式 /* 单个样式 */ $(selector).css(属性,值): /* 多个样式 */ $(selector).css({属性:值,属性:值}); /* ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
随机推荐
- Git创建本地分支并关联远程分支(二)
创建本地分支git branch 分支名 例如:git branch dev,这条命令是基于当前分支创建的本地分支,假设当前分支是master(远程分支),则是基于master分支创建的本地分支dev ...
- 【剑指Offer】6、旋转数组的最小数字
题目描述: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5 ...
- Java 8 集合不完全一览
JDK 8 List 名称 线程安全 数据结构 允许 null 默认初始容量 扩容策略 备注 ArrayList 不安全 数组 允许 10 1.5 * old LinkedList 不安全 双链表 允 ...
- 程序包管理rpm和yum
Linux程序包管理: API:Application Programming Interface源码包 POSIX:Portable OS 程序源代码 --> 预处理 --> 编译 -- ...
- Python学习笔记之异常处理
1.概念 Python 使用异常对象来表示异常状态,并在遇到错误时引发异常.异常对象未被捕获时,程序将终止并显示一条错误信息 >>> 1/0 # Traceback (most re ...
- 将会改变未来IT世界的十种编程语言
这里要说的都是革新,说这些的目的就是要保持关注最新技术.如果你是一个程序员,想要探寻未来技术,那这篇文章就是你的必读之选.我们这里列出了10种编程语言,10种将会改变IT世界工作方式的编程语言.这些语 ...
- reset清除所有浏览器默认样式
温馨提示 reset 的目的不是清除浏览器的默认样式, 这仅是部分工作. 清除和重置是紧密不可分的.reset 的目的不是让默认样式在所有浏览器下一致, 而是减少默认样式有可能带来的问题.reset ...
- Spring boot 前后台分离项目 怎么处理spring security 抛出的异常
最近在开发一个项目 前后台分离的 使用 spring boot + spring security + jwt 实现用户登录权限控制等操作.但是 在用户登录的时候,怎么处理spring securi ...
- POJ 2762 Going from u to v or from v to u?(强联通,拓扑排序)
id=2762">http://poj.org/problem?id=2762 Going from u to v or from v to u? Time Limit: 2000MS ...
- Object对象具体解释(二)之clone
clone方法会返回该实例对象的一个副本,通常情况下x.clone() != x || x.clone().getClass() == x.getClass() || x.clone().equals ...