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 问答知识整理
Feb 11 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
js字符串转成JSON
Nov 07 Javascript
js中this的用法实例分析
Jan 10 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php通过字符串调用函数示例
2014/03/02 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Jquery 自定义动画概述及示例
2013/03/29 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python调用java的Webservice示例
2014/03/10 Python
Python反转序列的方法实例分析
2018/03/21 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
演讲稿祖国在我心中
2014/05/04 职场文书
校园环保建议书
2014/05/14 职场文书
2014年公司工作总结
2014/11/22 职场文书
运动会表扬稿范文
2015/05/05 职场文书
道歉信怎么写
2015/05/12 职场文书
Python基础详解之邮件处理
2021/04/28 Python