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 标签的时候切换样式。 })
- 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 数组属性和方法
- 浅谈keras使用中val_acc和acc值不同步的思考
- PHP安装BCMath扩展的方法
- keras实现多GPU或指定GPU的使用介绍
- 浅谈keras中的keras.utils.to_categorical用法
- python 使用多线程创建一个Buffer缓存器的实现思路
- keras.utils.to_categorical和one hot格式解析
- Python OpenCV读取中文路径图像的方法
- Java如何基于wsimport调用wcf接口
- Python装饰器结合递归原理解析
- Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
- 浅谈keras通过model.fit_generator训练模型(节省内存)
- PHP实现通过文本文件统计页面访问量功能示例
- 解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
- python里的单引号和双引号的有什么作用
- 在PHP中输出JS语句以及乱码问题的解决方案