jquery中用函数来设置css样式


Posted in Javascript onDecember 22, 2016

1.jquery语法

$(selector).css(name,function(index,value))

name:必需。规定 CSS 属性的名称

function(index,value)

规定返回CSS属性新值的函数。

  • index - 可选。接受选择器的index位置
  • value - 可选。接受CSS属性的当前值

2.function(index,value)的用途

相当于对通过选择符“selector”选择到的所有对象进行一次遍历,并设置相应的css属性值,其中index和value这两个参数可有可无。

如果直接引用已有的函数,如下:

//函数colorStr()为td标签的背景色提供一个随机的背景色
$("td").css("background-color",colorStr()); 
//上面的代码就相当于直接给所有td背景色赋同一个颜色值,就像下面的代码
$("td").css("background-color","green");

以上情况不会遍历td对象,而会将所有的td设置成一样的颜色,如下图,都变成了绿色

jquery中用函数来设置css样式

如果通过function遍历就会将每个td背景色设置成不一样的颜色,代码如下:

//通过function函数调用colorStr函数,从而遍历所有的td标签,使每个td的背景色都不一样
$("td").css("background-color",function(){return colorStr()});

效果图如下:

jquery中用函数来设置css样式

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
C++中的string类的用法小结
Aug 07 Javascript
简单分析javascript中的函数
Sep 10 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
JsChart组件使用详解
Mar 04 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 #Javascript
js数组去重的hash方法
Dec 22 #Javascript
JavaScript生成.xls文件的代码
Dec 22 #Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 #Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 #Javascript
JS闭包与延迟求值用法示例
Dec 22 #Javascript
jQuery实现两个select控件的互移操作
Dec 22 #Javascript
You might like
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
追悼词范文大全
2015/06/23 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python