jquery 操作css 选择器
.addClass() 为每个匹配的元素添加指定的样式类名 .addClass(className) className 为每个匹配元素所有增加的一个或多个样式名 .addClass(function(index,currentClass)) 函数返回一个或者多个用空格隔开, index 表示参数匹配中的索引位置 this 指向匹配元素集合中的当前元素。 $("p").addClass("myClass yourClass"); 给p 这个元素添加这两个类名样式。 $("ul li:last").addClass(function(index){ return "item-"+index; }) 在最后一个<li> 元素上加上“item-1”样式。
.css() 获取匹配元素集合中的第一个元素的样式属性计算值或设置每一个匹配元素的一个或多个 css属性。
.css(propertyName) propertyName 一个css 属性名 。 一个或者多个css 属性组成的数组。 $(this).css("background-color"); 获取当前元素的背景颜色。 $(this).css(["width","height",color]) 获取当前元素的 宽 高 字体颜色。 .css(propertyName,value) propertyName 一个css 属性名。 value 设置这个css 的属性值。 .css(propertyName,function) propertyName 一个css 属性名。 function 一个用来返回设置值的函数。this,是当前元素。
$('div.example').css('width',function(index){ return index*50; }) 设置一个匹配元素的宽度增加到较大的值。 $("p").mouseover(function(){ $(this).css("color","red"); }) 当鼠标经过p 元素时文字变成红色。 $("#box").one("click",function(){ $(this).css("width","+=200") }) 增加#box 的宽度为200像素。
.hasClass() 确定任何一个匹配的元素是否有被分配给定的(样式类) .hasClass(className) className 要查询的样式名。 $("#mydiv").hasClass("foo") 匹配的元素是否含有 foo这个样式 如果有这个样式那么就返回true 如果没有那么就返回false
.removeClass() 移除匹配的元素上面的样式。 .removeClass([className]) 每个匹配元素移除的一个或者多个用空格隔开的样式名。 $("p").removeClass("myClass yourClass") .removeClass(function(index,class)) 一个函数,返回一个或多个要移除的元素,index 所有匹配的元素集合中的当前的元素。
.toggleClass() 在匹配的元素集合中的每个元素上切换样式名 .toggleClass(className) className 在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名。 .toggleClass(className,switch) switch 一个布尔值,用于判断样式是否应该被添加或移除。 .toggleClass([switch]) switch 一个用来判断样式类天添加还是移除的布尔值。
$('#foo').toggleClass(className,add0rRemove) 就等同于 if(add0rRemove){ $('#foo').addClass(className); }else{ $('#foo').removeClass(className) }
$("p").click(function(){ $(this).toggleClass("highlight"); //点击当前的p 标签的时候切换样式。 })
- POJ 3154 Graveyard【多解,数论,贪心】
- HDU 1010 Tempter of the Bone【DFS经典题+奇偶剪枝详解】
- Ethereum - 以太坊项目
- COGS 144. [USACO Dec07] 魅力手镯【01背包复习】
- SQL Server 使用全文索引进行页面搜索
- HDU 1003 Max Sum【动态规划求最大子序列和详解 】
- HDU 1005 Number Sequence【多解,暴力打表,鸽巢原理】
- HDU 1019 Least Common Multiple【gcd+lcm+水+多个数的lcm】
- HDU 1017 A Mathematical Curiosity【水,坑】
- 比特币项目
- HDU 1014 Uniform Generator【GCD,水】
- 【AlphaGo Zero 核心技术-深度强化学习教程代码实战05】SARSA(λ)算法实现
- 区块链应用场景:物联网和物流供应链
- HDU 1012 u Calculate e【暴力打表,水】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 从安全切面到Security Mesh
- SpringBoot源码学习(十一) - bean的实例化过程
- 每天一杯力扣快乐水
- Typescript的tsconfig.json
- python和R语言计算蛋白质内部氨基酸相互作用
- 超文本传输协议 - 白话篇
- 为什么你的简历没人看?7份案例分析
- 浅析动态切换数据源的原理(接上篇)
- SpringBoot源码解析(十二)- Autowired是如何注入的
- 项目要实现多数据源动态切换,咋搞?
- 这一次,带你全面了解锁机制!
- GitHub标星1w+超牛的微服务项目,开发脚手架
- Redis中hash、set、zset的底层数据结构原理
- Redis中string、list的底层数据结构原理
- Redis中字符串的表示