jQuery学习之------元素样式的操作
jQuery学习之------元素样式的操作
一、.addClass( className )方法----增加样式
1.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
<head>
<style>
/*css样式代码*/
.soulsjie{
background:red;
}
.newstyle{
height:100px;
width:100px;
}
.newsty2{
font-size:16px;
}
</style>
<!--引入jQuery-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<div class="soulsjie">内容</div> <script type="text/javascript">
//利用addClass（）给div增加样式，可增加一个或者多个
$('.soulsjie').addClass('newstyle newsty2')
</script>
</body>
2.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
.soulsjie{
background:red;
}
.cs1{
background:#f0f;
}
.cs2{
background:#ff0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="soulsjie">内容</div>
<script type="text/javascript">
var aa=1;
//利用addClass（）给div增加样式
$('.soulsjie').addClass(function(){
if(aa%2==2){
$(this).addClass('cs1');
}
else{
$(this).addClass('cs2') ;
}
})
</script>
</body>
二、.removeClass( )方法-----移除元素的css样式
1.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
.soulsjie{
background:red;
}
.cs1{
background:#f0f;
}
.cs2{
background:#ff0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="soulsjie cs1 cs2">内容</div>
<script type="text/javascript">
var aa=1;
//利用removeClass（）移除元素上的样式
$('.soulsjie').removeClass('soulsjie')
</script>
</body>
2.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名
.soulsjie{
background:red;
}
.cs1{
background:#f0f;
}
.cs2{
background:#ff0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="soulsjie cs1 cs2">内容</div>
<script type="text/javascript">
var aa=1;
//利用removeClass（）移除元素上的样式
var aa=1;
$('.soulsjie').removeClass(function(){
if(aa%2==0){
return 'cs1';
}
else{
return 'cs2';
}
})
</script>
</body>
三.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
- .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
- .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
- .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
- .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
<!DOCTYPE HTML>
<html> <head>
<meta charset="utf-8">
<title>隔行换色的例子</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
body,
table,
td,
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
} .dise {
background: #ebebeb;
}
</style>
</head> <body>
<div>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>vv</td>
<td>vv</td>
</tr>
<tr>
<td>vv</td>
<td>vv</td>
</tr>
<tr>
<td>vv</td>
<td>vv</td>
</tr>
<tr>
<td>ss</td>
<td>ss</td>
</tr>
<tr>
<td>ww</td>
<td>ww</td>
</tr>
</table>
</div>
<script type="text/javascript">
//给所有的tr元素加一个class="dise"的样式
$("#table tr").toggleClass("dise");
</script>
<script type="text/javascript">
//给所有的偶数tr元素切换class="dise"的样式
//所有基数的样式保留，偶数的被删除
$("#table tr:odd").toggleClass("dise");
</script>
<script type="text/javascript">
//第二个参数判断样式类是否应该被添加或删除
//true，那么这个样式类将被添加;
//false，那么这个样式类将被移除
//所有的奇数tr元素，应该都保留class="dise"样式
$("#table tr:even").toggleClass("dise", true); //这个操作没有变化，因为样式已经是存在的
</script>
</body> </html>
四、.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性
获取：
- .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
- .css( propertyNames )：传递一组数组，返回一个对象结果
<style>
.cs1{
height:50px;
width:50px;
background:#f00;
}
.cs2{
height:50px;
width:50px;
background:#ff0;
}
.cs3{
height:50px;
width:50px;
background:#00f;
font-size:30px;
}
</style>
</head>
<body>
<h4>css()获取样式的属性值</h4>
<div class="cs1">1</div>
<P></P>
<div class="cs2">2</div>
<P></P>
<div class="cs3">3</div>
<P></P> <script type="text/javascript">
//background-color:blue; => rgb(0, 0, 255)
//颜色都会转化成统一的rgb标示
$('p:eq(0)').text( $('.cs1').css("background-color") ) </script> <script type="text/javascript">
//字体大小都会转化成统px大小 em=>px
$('p:eq(1)').text( $('.cs2').css("font-size") )
</script> <script type="text/javascript">
//获取尺寸，传入CSS属性组成的一个数组
//{width: "60px", height: "60px"}
var value = $('.cs3').css(['width','height']);
//因为获取的是一个对象，取到对应的值
$('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height )
</script>
设置：
- .css(propertyName, value )：设置CSS
- .css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
- .css( properties )：可以传一个对象，同时设置多个样式
<body>
<h4>css()设置元素样式</h4>
<div class="cs1">1</div>
<div class="cs2">2</div>
<div class="cs3">3</div>
<script type="text/javascript">
//多种写法设置颜色
$('.cs3').css("background-color","red");
$('.cs1').css("backgroundColor","blue");
</script> <script type="text/javascript">
//多种写法设置字体大小
$('.cs3').css("font-size","23px");
$('.cs1').css("fontSize","0.9em");
</script> <script type="text/javascript">
//获取到指定元素的宽度，在回调返回宽度值
//通过处理这个value，重新设置新的宽度
$('.cs2').css("width",function(index,value){
//value带单位，先分解
value = value.split('px');
//返回一个新的值，在原有的值上，增加50px
return (Number(value[0]) + 50) + value[1];
})
</script> <script type="text/javascript">
//合并设置,通过对象传设置多个样式
$('.cs1').css({
'font-size' :"15px",
"background-color" :"#40E0D0",
"border" :"1px solid red"
})
</script> </body>
jQuery学习之------元素样式的操作的更多相关文章
- jQuery学习之旅 Item3 属性操作与样式操作
本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...
- jquery学习笔记----元素筛选
1.eq() 筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有指定的类5.filter() 筛 ...
- DOM访问元素样式和操作元素样式
在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...
- jQuery学习笔记2——表单操作
一.获取和设置表单的值:val()和text() 1. 获取表单的值: $("#username").val(); 2. 设置表单的值: $("#username&quo ...
- jQuery改变兄弟元素样式，及:not([class="allclassname"])筛选小结
以前一直对于jquery感到很畏惧,最近做点击图表变色,将其他元素图片复位的小需求,总结了一下一点小心得. 主要两点是:1.将所有兄弟元素的样式设置为一样,对于子元素的遍历: 2.对于特殊不需要变化的 ...
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- jQuery的基础dom和css操作
1.元素以及内容操作 $(function () { // alert($("a").html()); // 获取元素中间的html内容,包括标签和文本内容 // alert($( ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- jquery学习笔记(二)：DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...
随机推荐
- 牛客小白月赛5-J-时间(time) （简单模拟）
题目描述 Apojacsleam是一个喜欢特殊时刻的人. 他定义了一个时刻,若电子表显示ab:ba(24小时制),则该时刻为“回文时刻”(可以有前导零).例如00:00就是回文时刻. 给定一个时刻,求 ...
- static属性
static 属于全局,也就是类的属性 和方法,换句话说 一个类,不管有多少个实例,却只有一个全局变量 用static修饰的属性和方法称为静态属性和方法 需要注意的是 静态属性和方法属于类方法,加载类 ...
- Eclipse快捷键集合
***eclipse查看哪个方法被调用:选中,右键选择Open call Hierarchy 选择要查看的方法: ctrl + alt + h 查看一个类被那些类继承或者实现: F ...
- 移动web开发填坑（一）
上周开始接触移动web开发,默默的掉进了很多坑里面.本文主要总结本周遇到的坑以及如何填坑. 1.px与rem换算. 设计稿的宽度一般是640px,而iphone是320px,所以测量设计稿的结果首先要 ...
- ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第三天(非原创）
文章大纲 一.课程介绍二.简单功能实现三.图片上传功能实战四.项目源码与资料下载五.参考文章 一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Svn的使用. ...
- Oracle 表-初步涉水不深（第一天）
oracle 关系型数据库 注释:面对大型数据处理,市场占有率40%多(但是目前正往分布式转换) 故事:本来一台大型计算机才能处理的数据,美国科学家用100台家用电脑连接,成功处理了数据.. tabl ...
- [Luogu1345][USACO5.4]Telecowmunication 最大流
题目链接:https://www.luogu.org/problem/show?pid=1345 求最小割点集的大小,直接拆点转化成最小割边.把一个点拆成出点入点,入点向出点连一条容量为1的边,其他的 ...
- 【PostgreSQL-9.6.3】启动，登录，退出，关闭
当我们费尽千辛万苦安装完数据库后,一定会迫不及待的想使用它.骚年,不要着急,且看我为您解析PostgreSQL的启动,登录,退出,关闭过程. 一 启动数据库服务器 1. 没有设置环境变量的情况下 po ...
- [转载]迅为4418开发板Qt移植移动4G模块第一部分
本文转自迅为论坛:http://topeetboard.com 平台:iTOP-4418开发板 1.首先要配置内核,这个一步和Android系统移植3G或者4G模块是一样的.一般模块的 ...
- blockdev - 从命令行调用区块设备控制程序
总览(SYNOPSIS) blockdev [options] commands devices 描述(DESCRIPTION) blockdev 工具允许从命令行调用区块设备控制程序. 选项(OPT ...