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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 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
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python操作Word批量生成文章的方法
2015/07/28 Python
使用Python对MySQL数据操作
2017/04/06 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
Python编程之string相关操作实例详解
2017/07/22 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python的数学算法函数及公式用法
2020/11/18 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
省级青年文明号申报材料
2014/05/23 职场文书
2014年个人售房协议书
2014/10/30 职场文书
党员个人总结范文
2015/02/14 职场文书