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 相关文章推荐
setTimeout和setInterval的深入理解
Nov 08 Javascript
7个jQuery最佳实践
Jan 12 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
vue之延时刷新实例
Nov 14 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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获取网站访客的所在地位置
2017/01/18 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
js选项卡的制作方法
2017/01/23 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
学习python类方法与对象方法
2016/03/15 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python异常和文件处理机制详解
2016/07/19 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
十佳少年事迹材料
2014/12/25 职场文书
紧急迫降观后感
2015/06/15 职场文书
高中化学教学反思
2016/02/22 职场文书
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技