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 ...
随机推荐
- XML To Linq 读取Sharepoint列表中的附件列信息
通过页面查看,列表附件信息列的内容如下: var x = @"<div class='ExternalClass9936DCD1F074427B891D09CFCEFC2AB6'> ...
- CSS ul li a 背景图片与文字对齐
<div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...
- AJPFX总结FileWriter类的write方法
FileWriter从类OutputStreamWriter继承的 1.public void write(int c) throws IOException写入单个字符. ...
- 2017团体程序设计天梯赛大区赛 L3-3 球队“食物链”
思路: 状压dp. 实现: #include <iostream> #include <cstdio> #include <cstring> using names ...
- IIS 安装了.net framework 4.0/4.5 却找不到相应应用程序池
通常情况下是因为没注册造成的,有些安装包会自己帮你注册上有些不会,感觉略坑. 注册方法:在计算机中点击 开始菜单–>运行 拷贝以下内容运行一下即可. C:\WINDOWS\Microsoft.N ...
- git ---合并和删除分支
git merge 分支名 //合并子分支到当前分支 git branch -d 分支名//删除分支
- iOS Programming UINavigationController
iOS Programming UINavigationController the Settings application has multiple related screens of info ...
- Python学习 Day 2-数据类型和变量
数据类型和变量 在Python中,能够直接处理的数据类型有以下几种: 整数 Python可以处理任意大小的整数,当然包括负整数,在程序中的表示方法和数学上的写法一模一样,例如:1,100,-8080, ...
- java 对sql格式化
public class SqlFormat{ public static void main(String[] args){ String sql=""; sqlFormat(s ...
- 常用css属性拓展
text-overflow:clip | ellipsis(默认值:clip)clip:当内联内容溢出块容器时,将溢出部分裁切掉.ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...). ...