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 ...
随机推荐
- [ZJOI2011]道馆之战
Description 口袋妖怪(又名神奇宝贝或宠物小精灵)红/蓝/绿宝石中的水系道馆需要经过三个冰地才能到达馆主的面前,冰地中的每一个冰块都只能经过一次.当一个冰地上的所有冰块都被经过之后,到下一个 ...
- 解题报告：hdu 1556 Color the ball（区间修改，单点查询）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1556 Problem Description N个气球排成一排,从左到右依次编号为1,2,3....N ...
- 【转载】WebConfigurationManager和ConfigurationManager
原文链接 今天在写程序时偶然发现有的示例代码中是用WebConfigurationManager获取web.config中的配置信息的,因为之前一直都是用的ConfigurationManager,所 ...
- js中toFixed重写
在测试原生的toFixed发现,它在个浏览器上表现不一致,并且有些值在保留小数时得到的结果并不是想要,如在chrome下测试: 所以针对toFixed方法不准的问题,我们进行方法改造: 主要思路是:对 ...
- 转 SQL*PLUS中的替换变量(& &&)
今天oracle support提供一个脚本,大致如下: PROMPT ROUTING_SEQUENCE_ID = &ROUT_SEQ_ID PROMPT OPERATION_SEQUENCE ...
- 459 Repeated Substring Pattern 重复的子字符串
给定一个非空的字符串,判断它是否可以由它的一个子串重复多次构成.给定的字符串只含有小写英文字母,并且长度不超过10000.示例 1:输入: "abab"输出: True解释: 可由 ...
- Ubuntu卸载软件包
sudo apt-get autoremove --purge mysql-server-5.0 ,purge连同配置文件一起删除,autoremove自动卸载依赖包sudo apt-get remo ...
- Xml学习笔记（1）
不同的xml文档构可能要用到不同的方法进行解析这里用到的是例如<student name="张三" id="1" sex="男"/&g ...
- $.ajax json 在本地正常 上传服务器不正常
$.ajax( { url:"url",// 跳转到 action data:{name ...
- Android 图片文件和Bitmap之间的转换
String filePath="c:/01.jpg"; Bitmap bitmap=BitmapFactory.decodeFile(filePath); 如果图片过大,可能导致 ...