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. Appium Desired Capabilities信息配置

    编写APPium脚本,必须要配置Desired Capabilities信息 Desired Capabilities 在启动 session 的时候是必须提供的. Desired Capabilit ...

  2. C 预处理程序指令(CPP)

    #include 文件 提供的东西 stdio 提供 FILE.stdin.stdout.stderr 和 fprintf() 函数系列 stdlib 提供 malloc().calloc()和 re ...

  3. [adb]查看 App的appPackage和appActivity

    最近在写app的UI框架,写脚本之前需要知道app的包名和activity,如果获取呢: 需求配置abdrioid sdk环境 方法1:abd log 1. 打开cmd命令窗口2.在命令窗口中输入,a ...

  4. C++ 对象创建的问题

    一.C++对象的创建: 对象创建的注意事项: 1.对象数组里的个数,就是创建对象的个数,普通数组一样:下标从0 到数组里数字 -1: 2.类名*  对象指针   <-->  这里只是一个指 ...

  5. python-写入csv 文件

    项目要做一个导出客户信息的功能,需要写入csv: 注意文件写入的方式  例如   write open(‘w’) 从头开始写,之前写的会被替换  write open(‘a’) 则代表追加,文件指针放 ...

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

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

  7. VIM 使用 匹配替换命令配合表达式 实现 递增替换

    :let n=100 | g/while/s/\d/\=n / | let n=n+1 before 10 void *thread_function_1(void *arg) { 11 int i; ...

  8. POJ 2914

    无向图全局最小割算法 求 G=(V, E)中任意 s-t 最小割的算法: 定义w(A, x) = ∑w(v[i], x),v[i]  A ∈  定义 Ax 为在x 前加入 A 的所有点的集合(不包括 ...

  9. HDUOJ--4888--Redraw Beautiful Drawings【isap】网络流+判环

    链接:http://acm.hdu.edu.cn/showproblem.php? pid=4888 题意:一个矩阵.限定每行行和.列和,每一个格子数字不超过k,问矩阵是否存在,如存在推断有单解还是多 ...

  10. Keil5.15使用GCC编译器链接.a库文件

    我们知道,当使用第三方的代码时,人家有可能会扔个Lib文件给你.这时候,别人仅仅要提供header文件给你,则你就能够通过Lib文件及header的函数声明,对Lib中的函数进行调用.在Keil中假设 ...