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 标签的时候切换样式。
})
jquery 操作css 选择器的更多相关文章
- JQuery:JQuery操作CSS类
JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- jquery操作css样式的方法
jquery操作css样式的方法(设置和获取)
- jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...
- JQUERY操作css与css()方法、获取设置尺寸;
一.jQuery addClass() 方法 向不同的元素添加 class 属性.在添加类时,您也可以选取多个元素 <style> .aa { color:red; }; </sty ...
- jquery操作CSS样式全记录
$(this).click(function(){ if($(this).hasClass(“zxx_fri_on”)){ $(this).removeClass(“zxx_fri_on”); ...
- jQuery操作css
jQuery addClass() 方法 向被选中元素添加class属性,参数为属性值 $("div").addClass("imp"); 也可以同时向多个元素 ...
- Jquery操作属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jquery操作层级选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- svn使用&&常用操作&&问题处理
第一部分: SVN使用 svn介绍 即subversion的简称. 版本控制系统(CVS)包括集中式版本控制系统(CVCS)和分布式版本控制系统(DCVS).svn是集中式版本控制系统. 可以用于团队 ...
- Spring核心-IOC-AOP-模版
1. POM- 1.1 中央仓库 1.2 各包作用 spring-core.jar 核心工具类 spring-beans.jar 是所有应用都要用到的,它包含访问配置文件.创建和管理bean 以及进行 ...
- Missing artifact jdk.tools:jdk.tools:jar:1.6
今天从svn上面下载了一个mavan项目,出现Missing artifact jdk.tools:jdk.tools:jar:1.6 这个错误. 怎么解决了,在我的根pom.xml 下加入这个依赖就 ...
- Ubuntu15.10下安装Docker
1.首先查看linux系统版本 head -n 1 /etc/issue 2.升级包管理器 sudo apt-get update sudo apt-get install apt-transport ...
- Sql 本周当天本期日期转换
--查询当天: --查询24小时内的: --info为表名,datetime为数据库中的字段值 --查询当天: --查询24小时内的: select * from table where DateDi ...
- iOS 上滑隐藏导航,下滑显示导航,仿斗鱼导航效果
UItableView或 UIcollectionView 都是继承UIScrollView 滑动的时候,判断是上滑还是下滑 使用 UIScrollView 的代理方法 func scrollView ...
- .net core 共享 .Net Forms Authentication cookie
Asp.net 项目迁移到 asp.net core 项目后需要 兼容以前老的项目的登录方式. Forms Authentication cookie 登录. 从网上搜集到关于这个问题的解决思路都没有 ...
- vue学习第一天 ------ 临时笔记
学习链接 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述 http://blog.csdn.net/fungleo/article/detai ...
- Python基础 整形、布尔值、if条件判断、while循环、运算符、格式化输出
1,计算机基础.2,python历史. 宏观上:python2 与 python3 区别: python2 源码不标准,混乱,重复代码太多, python3 统一 标准,去除重复代码.3,python ...
- 工作中遇到的vscode配合eslint完成保存为eslint格式
vscode个人设置 // vscode的个人设置配置 { "workbench.iconTheme": "vscode-icons", "workb ...