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 ...
随机推荐
- _bzoj1051 [HAOI2006]受欢迎的牛【强联通】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1051 保存tarjan模版. 求强联通分量,缩点. #include <cstdio& ...
- [ZPG TEST 108] Antimonotonicity【贪心】
T2:Antimonotonicity (Antimonotonicity.pas/in/out 128M 1s) 给你1-N的一个排列,数列中的数字互不相等,要求找出最长的子序列a,满足a1> ...
- Linux tcpdump命令英文文档
https://www.computerhope.com/unix/tcpdump.htm
- android将对象序列化到文件：直接写文件与用Serializable接口的对比
1.用文件读写1024个对象的日志 10-09 16:12:44.493 6385-6385/com.example.tt.downtest D/Serializable_TAG: write 102 ...
- C# winform与Javascript的相互调用[转]
原文链接<html> <head> <meta http-equiv="Content-Language" content="zh-cn&q ...
- 转【Python】Python-skier游戏[摘自.与孩子一起学编程]
http://www.cnblogs.com/zhaoxd07/p/4914818.html 我遇到的问题 问题1 self.image=pygame.image.load("skier_d ...
- jmeter（十六）Jmeter之Bean shell使用(一)
一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...
- 208 Implement Trie (Prefix Tree) 字典树（前缀树）
实现一个 Trie (前缀树),包含 insert, search, 和 startsWith 这三个方法.注意:你可以假设所有的输入都是小写字母 a-z.详见:https://leetcode.co ...
- 用jquery的.val() 给具有style="display:none;" 属性的标签写值的问题。
今天写项目, 碰到奇怪现象, 用jquery的val()函数怎么都无法给标签赋值,而我确定是否赋值是通过浏览器控制台来看的.其实这种方式不准确,因为具有 style="display:non ...
- 学习笔记 第十二章 CSS3+HTML5网页排版
第12章 CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1 使用结构标签 在制作网页时,不仅需要使用< ...