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");

经验总结:

  1. 如果操作到的样式非常少,可以考虑css方法
  2. 如果操作到的样式非常多,那么可以通过class方法来操作,将样式写到一个class类里面。
  3. 如果考虑到后期维护方便,将css从js中分离出来,那么推荐使用class的方式来操作。

jQuery操作样式知识总结的更多相关文章

  1. 测开之路一百零四:jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...

  2. JQuery操作样式以及JQuery事件机制

    1.操作样式     1.1 css的操作     功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

  3. jQuery操作DOM知识总结

    jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span> ...

  4. Jquery操作样式

    1.CSS(name,value) 修改单个样式 $(function(){ $(".divcontent").css("background","r ...

  5. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  6. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  7. jquery 操作

    Jquery使用时要引用,引用时放在最前. Jquery: $代表选择器, $(document) ready(function(e){}):找到页面,页面加载完成后执行. JS选取元素操作内容操作属 ...

  8. JQuery操作DOM(8)

    一.jQuery操作样式 1.设置和获取样式 /* 单个样式 */ $(selector).css(属性,值): /* 多个样式 */ $(selector).css({属性:值,属性:值}); /* ...

  9. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

随机推荐

  1. Git创建本地分支并关联远程分支(二)

    创建本地分支git branch 分支名 例如:git branch dev,这条命令是基于当前分支创建的本地分支,假设当前分支是master(远程分支),则是基于master分支创建的本地分支dev ...

  2. 【剑指Offer】6、旋转数组的最小数字

      题目描述:   把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5 ...

  3. Java 8 集合不完全一览

    JDK 8 List 名称 线程安全 数据结构 允许 null 默认初始容量 扩容策略 备注 ArrayList 不安全 数组 允许 10 1.5 * old LinkedList 不安全 双链表 允 ...

  4. 程序包管理rpm和yum

    Linux程序包管理: API:Application Programming Interface源码包 POSIX:Portable OS 程序源代码 --> 预处理 --> 编译 -- ...

  5. Python学习笔记之异常处理

    1.概念 Python 使用异常对象来表示异常状态,并在遇到错误时引发异常.异常对象未被捕获时,程序将终止并显示一条错误信息 >>> 1/0 # Traceback (most re ...

  6. 将会改变未来IT世界的十种编程语言

    这里要说的都是革新,说这些的目的就是要保持关注最新技术.如果你是一个程序员,想要探寻未来技术,那这篇文章就是你的必读之选.我们这里列出了10种编程语言,10种将会改变IT世界工作方式的编程语言.这些语 ...

  7. reset清除所有浏览器默认样式

    温馨提示 reset 的目的不是清除浏览器的默认样式, 这仅是部分工作. 清除和重置是紧密不可分的.reset 的目的不是让默认样式在所有浏览器下一致, 而是减少默认样式有可能带来的问题.reset ...

  8. Spring boot 前后台分离项目 怎么处理spring security 抛出的异常

    最近在开发一个项目 前后台分离的 使用 spring boot + spring security + jwt 实现用户登录权限控制等操作.但是 在用户登录的时候,怎么处理spring  securi ...

  9. 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 ...

  10. Object对象具体解释(二)之clone

    clone方法会返回该实例对象的一个副本,通常情况下x.clone() != x || x.clone().getClass() == x.getClass() || x.clone().equals ...