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 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 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 mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
php二分查找二种实现示例
2014/03/12 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
window.onresize 多次触发的解决方法
2013/11/08 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python的urllib模块显示下载进度示例
2014/01/17 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
教师新年寄语
2014/04/03 职场文书
IT工程师岗位职责
2014/07/04 职场文书
工商管理自荐书
2014/07/06 职场文书
主题党日活动总结
2014/07/08 职场文书
党员对照检查材料
2014/09/22 职场文书
客房服务员岗位职责
2015/02/09 职场文书
五四青年节活动总结
2015/02/10 职场文书
绿色环保倡议书
2015/04/28 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书