基础DOM和CSS操作(二)
元素样式操作
元素样式操作包括了直接设置CSS样式、增加CSS类别、类别切换、删除类别这几种操作方法。而在整个jQuery使用频率上来看，CSS样式的操作也是极高的，所以需要重点
掌握。
CSS操作方法
| 方法名 | 描述 |
| css(name) | 获取某个元素行内的css样式 |
| css([name1,name2,name3]) | 获取某个元素行内多个css样式 |
| css(name,value) | 设置某个元素行内的css样式 |
| css(name,function(index,value) {}) | 设置某个元素行内的css样式 |
| css({name1:value1,name2:value2}) | 设置某个元素行内多个css样式 |
| addClass(class) | 给某个元素添加一个css类 |
| addClass(class1 class2 class3...) | 给某个元素添加多个css类 |
| removeClass(class) | 删除某个元素的一个css类 |
| removeClass(class1 class2 class3...) | 删除某个元素的多个css类 |
| toggleClass(class) | 来回切换默认样式和指定样式 |
| togggleClass(class1 class2 class3...) | 同上 |
| toggleClass(class,switch) | 来回切换样式的时候设置切换频率 |
| toggleClass(function() {}) | 通过匿名函数设置切换的规则 |
| toggleClass(function() {},switch) | 在匿名函数设置时也可以设置频率 |
| toggleClass(function(i,c,s) {},switch) | 在匿名函数设置时传递三个参数 |
有html代码(部分)如下：
<div style="color: red;">
<strong>www.ycku.com</strong>
</div>
jQuery代码：
alert($("div").css("color")); //获取元素行内CSS样式的颜色 弹出rgb(255,0,0)
有html代码(部分)如下：
<div>
<strong>www.ycku.com</strong>
</div>
jQuery代码：
$("div").css("color", "red"); //设置元素行内CSS样式颜色为红色
有html代码(部分)如下：
<div style="color: red; width: 200px; height: 200px;">
<strong>www.ycku.com</strong>
</div>
在CSS获取上，我们也可以获取多个CSS样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用for in遍历。
jQuery代码：
var box = $("div").css(["color","height","width"]); //返回原生的DOM对象数组
得到多个CSS样式的数组对象，我觉得应该是这种形式：
{
color:"red",
width:"200px",
height:"200px"
}
所以：alert(box[0]);会返回undefined。alert(box["width"]);才会返回正确的值——200px。
所以才说如果用传统方式进行解析需要使用for in遍历。
for(var key in box) {
alert(key+":"+box[key]);
}
jQuery提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。
$.each(box, function(attr,value) { //遍历JavaScript原生态的对象数组
alert(attr+":"+value);
});
使用$.each()可以遍历原生的JavaScript对象数组，如果是jQuery对象的数组怎么使用.each()方法呢？
html代码如下：
<div title="aaa">
<strong>www.ycku.com</strong>
</div> <div title="bbb">
<strong>www.ycku.com</strong>
</div>
jQuery代码：
alert($("div")[0]);// 原生的DOM对象
$("div"); //jQuery对象数组
jQuery对象的数组使用.each()方法如下：
$("div").each(function(index, element) { //element是原生的DOM对象
alert(index+":"+element);
});
在需要设置多个样式的时候，我们可以传递多个CSS样式的键值对即可。之前我们是这样写的：
$("div").css("color", "red").css("background", "#ccc");
此刻我们可以这样写了：
$("div").css({
"color":"blue",
"background":"#eee",
"width":"200px",
"height":"30px"
});
如果想设置某个元素的CSS样式的值，但这个值需要计算，我们可以传递一个匿名函数。之前的做法如下：
var w = xxx;
w + x = 20;
w = w + 20 * 20; //全局很难受
$("div").css("width", w + "px");
但此刻的做法如下：
$("div").css("width", function(index, value) {
//局部函数，很舒服
return parseInt(value) - 500 + "px";
});
除了行内CSS设置，我们也可以直接给元素添加CSS类，可以添加单个或多个，并且也可以删除它。
有html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础DOM和CSS操作</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div title="aaa">
<strong>www.ycku.com</strong>
</div>
</body>
</html>
style.css：
.red {
color: red;
}
.green {
color: green;
}
.bg {
background-color: #ccc;
}
.size {
font-size: 20px;
}
jQuery代码：
$("div").addClass("red"); //添加一个CSS类
$("div").addClass("red bg size"); //添加多个CSS类
$("div").removeClass("bg"); //删除一个CSS类
$("div").removeClass("red size"); //删除多个CSS类
我们还可以结合事件来实现CSS类的样式切换功能。
$("div").click(function() {
$(this).toggleClass("red size"); //两个样式之间的切换，并且是默认样式和指定样式之间的切换
});
.toggleClass()方法的第二个参数可以传入一个布尔值， true表示执行切换到class类， false表示执行回默认class类(默认的是空class)，运用这个特性，我们可以设置切换的频率。
上面的代码类似于：
var count = 0;
$("div").click(function() {
$(this).toggleClass("red size", count++ % 2 == 0); //产生频率问题
});
默认的CSS类切换只能是无样式和指定样式之间的切换，如果想实现样式1和样式2之间的切换还必须自己写一些逻辑。
html代码(部分)如下：
<div title="aaa" class="green">
<strong>www.ycku.com</strong>
</div>
jQuery代码如下：
$("div").click(function() {
//这里只是click的局部，而又是toggleClass的全局
$(this).toggleClass("red"); //一开始切换到样式red
if($(this).hasClass("red")) { //判断样式red存在后
$(this).removeClass("green"); //删除样式green
} else {
$(this).toggleClass("green"); //删除样式red，addClass()也是一样的
}
});
上面的方法较为繁琐，.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要切换的规则。
$("div").click(function() {
$(this).toggleClass(function() {
return $(this).hasClass("red") ? "green" : "red"; //有小缺陷
});
});
注意：上面虽然一句话实现了这个功能，但还是有一些小缺陷，因为原来的class类没有被删除，只不过被替代了而已，所以需要改写一下。
$("div").click(function() {
$(this).toggleClass(function() {
//toggleClass的局部
if($(this).hasClass("red")) {
$(this).removeClass("red");
return "green";
} else {
$(this).removeClass("green");
return "red";
}
});
});
我们也可以在传递匿名函数的模式下，增加第二个频率参数。
var count = 0;
$("div").click(function() {
$(this).toggleClass(function() {
//toggleClass的局部
if($(this).hasClass("red")) {
$(this).removeClass("red");
return "green";
} else {
$(this).removeClass("green");
return "red";
}
}, count++ % 2 == 0); //出现问题
});
对于.toggleClass()传入匿名函数的方法，还可以传递index索引、class类两个参数以及频率布尔值，可以得到当前的索引、class类名和频率布尔值。
var count = 0;
$(document).click(function() {
$("div").toggleClass(function(index, className, switchBool) {
alert(index + ":" + className + ":" + switchBool);
//toggleClass的局部
if($(this).hasClass("red")) {
$(this).removeClass("red");
return "green";
} else {
$(this).removeClass("green");
return "red";
}
}, count++ % 2 == 0);
});
最后总结一下：jQuery中有三种方法能元素的类进行操作，这三种方法分别是：.addClass(),.removeClass(),.toggleClass()。这三种方法共同点都是能对元素的类进行操作，那么他们不同之处是：
- .addClass("className")方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；
- .removeClass("className")方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；
- .toggleClass("className")方法是用来给指定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如果元素存在样式则去掉，如果不存在则加上样式）。
基础DOM和CSS操作(二)的更多相关文章
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- 基础DOM和CSS操作(三)
CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...
- 基础DOM和CSS操作(一)
DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...
- jQuery基础DOM和CSS操作
$('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...
- Jquery5 基础 DOM 和 CSS 操作
学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 DOM 是一种文档对象模型.方便开发者对HTML 结构元素内容进行展示和修改.在 JavaScr ...
- jQuery的基础dom和css操作
1.元素以及内容操作 $(function () { // alert($("a").html()); // 获取元素中间的html内容,包括标签和文本内容 // alert($( ...
- jQuery(基础dom及css操作)
设置元素内容 元素属性操作 ---------- 元素样式操作 ---------------- 对象数组的遍历 测试代码: $(function () { var v=$('div').css([' ...
- 第 5 章 基础 DOM 和 CSS 操作
在常规的 DOM 元素中,我们可以使用 html()和 text()方法获取内部的数据.html()方法 可以获取或设置 html 内容,text()可以获取或设置文本内容. $('#box').ht ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
随机推荐
- hdu 4217 Data Structure?/treap
原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4217 可用线段树写,效率要高点. 这道题以前用c语言写的treap水过了.. 现在接触了c++重写一遍 ...
- OpenStack: 安装准备
>安装准备1. 安装MySQL# apt-get install python-mysqldb mysql-server将/etc/mysql/my.cnf修改bind-address为&quo ...
- UITableView表视图以及重建机制
表视图UITableView 表视图UITableView,是IOS中最重要的视图,随处可见 表视图通常用来管理一组具有相同数据结构的数据 UITableView继承自UIScrollView,所 ...
- [Linq Expression]练习自己写绑定
源代码:TypeMapper.zip 背景 项目中,我们会经常用到各种赋值语句,比如把模型的属性赋值给UI,把视图模型的属性拷贝给Entity.如果模型属性太多,赋值也会变成苦力活.所以,框架编程的思 ...
- Jquery Mobile局部刷新后js和css失效，需局部渲染
$(function () { $("#submit").click(function(){ var storage = window.localStorage; ...
- 认识Linux
Linux的内核版本 1.如何查看Linux的内核版本 # uname -r -.el6.i686 2. 2.6.32-358的含义 主版本.次版本.释出版本-修改版本 3.主次版本编号规则 ...
- 为什么Linux的fdisk分区时第一块磁盘分区的First Sector是2048？
这个问题曾经困扰我很久,在了解了MBR之后,我曾认为第一块分区之前为一个block.但是用fdisk查看是2048,一直不了解其中的缘由,今天查了一下资料,大概了解了,其中的细节留着慢慢去了解. 最直 ...
- 反向Ajax，第2部分：WebSocket
转自:http://kb.cnblogs.com/page/112616/ 前言 时至今日,用户期待的是可通过web访问快速.动态的应用.这一文章系列展示了如何使用反向Ajax(Reverse Aja ...
- Angularjs 如何在 post 请求时去掉因 ng-repeat 产生的 $$hashkey？
序列化的时候用 angular.toJson 和 angular.fromJson ,不要用 Json.parse 和 JSON.stringify 就可以了.
- POJ 2960 博弈论
题目链接: http://poj.org/problem?id=2960 S-Nim Time Limit: 2000MS Memory Limit: 65536K 问题描述 Arthur and h ...