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 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python调用webservice接口的实现
2019/07/12 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
PHP经典面试题
2016/09/03 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
鸦片战争观后感
2015/06/09 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS