基础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 ...
随机推荐
- linux清除swap
执行top会显示Cpu(s): 0.7%us, 0.3%sy, 0.0%ni, 99.0%id, 0.0%wa, 0.0%hi, 0.0%si, 0.0%stMem: 2044500 ...
- Django+Nginx+MongoDB+Mysql+uWsgi的搭建
搭建目标如下: 图:系统架构图 这个系统可以提供web服务及其它查询应用服务,我用其做一个二手房信息搜集.处理及分发的系统,可以通过浏览器访问,也可以通过定制的客户端进行访问. 一.安装篇 1.下载安 ...
- iOS学习之C语言函数
一.函数的定义 返回值类型 函数名(参数类型 参数名, ...) { 功能语句; return 返回值; } 按照返回值和参数划分: 第一种: 无返回值 无参 void sayHello() { pr ...
- 重装win7系统的方法
1.当电脑可以运行的情况下重装系统: 用傻瓜似的重装系统就可以了,这个简单,不在累赘. 2.当电脑打不看的情况下: 2.1 用光盘安装系统,这个有好多教程,不在累赘. 2.2 用U盘安装方法: 2.2 ...
- UIScrowView swift
// // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...
- mysql安装/启动报错汇总
2016/9/6补充 初始化报错: # /usr/local/mysql/scripts/mysql_install_db --user=mysql --basedir=/usr/local/mysq ...
- SFI（段文件描述符存在的理由与意义）
SFI:short file identifier,短文件描述符 SFI的取值必须在0001-001E之间,即0-30 SFI存在的理由:有些COS命令可以不需要事先选择文件而直接通过SFI快速访问文 ...
- Android -- 倒计时的实现
CountDownTimer CountDownTimer这个 ...
- 8、android代码优化技术记录
1.length.length().size的优化 举例: int array_one[] = {1,2,3,4,5,6,7,8,9,10}; int array_two[] = {1,2,3,4,5 ...
- linux 安装memcached
1.下载文件wget http://www.monkey.org/~provos/libevent-1.4.12-stable.tar.gzwget http://www.memcached.org/ ...