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数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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翻页类
2009/06/01 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
javascript语言结构小记(一)
2011/09/10 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
Python实现的Excel文件读写类
2015/07/30 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python之reload流程实例代码解析
2018/01/29 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
天巡全球:Skyscanner Global
2017/06/20 全球购物
500字作文之难忘的同学
2019/12/20 职场文书
python b站视频下载的五种版本
2021/05/27 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python