14、样式类修改、JSON
1、修改对象的样式类
案例：可以对对象的样式类进行修改，包括增加样式类、删除样式类、查找是否含有此样式类以及切换是否有此样式类。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.b1{
width:100px;
height:100px;
background-color: yellow;
}
.b2{
height:200px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
var btn01 = document.getElementById("btn01");
//为按钮绑定单击响应函数
btn01.onclick = function(){
//修改box的class属性
/*
* 我们可以通过修改元素的class属性来间接修改样式
* 这样一来，我们只需要修改一次，即可同时修改多个样式
* 浏览器只需要重新渲染一次，性能比较好
* 并且这种方式，可以使表现和行为进一步分离
*
* 通过style属性来修改元素的样式，每修改一个样式，浏览器需要重新渲染一次页面
*/
//box.className = "b2";//直接修改对象的样式类
//box.className += " b2";//增加对象的样式类
//addClass(box,"hello");
//alert(hasClass(box,"hello"));
//removeClass(box,"b1");
toggleClass(box,"hello");
}
}
//定义一个函数，用来向一个元素中添加指定的class属性
/*
* 参数：
* obj： 要添加的class属性的元素
* cn：要添加的class值
*/
function addClass(obj,cn){
//检查obj中是否含有cn
if(!hasClass(obj,cn)){
obj.className += " "+cn;
}
}
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class，则返回true，没有则返回false
*/
function hasClass(obj,cn){
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*
* 删除一个元素中指定的class属性
*/
function removeClass(obj,cn){
//创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
//删除class
obj.className = obj.className.replace(reg,"");
}
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类，则删除
* 如果元素中没有该类，则添加
*/
function toggleClass(obj,cn){
//判断obj中是否含有cn
if(hasClass(obj,cn)){
//有，则删除
removeClass(obj,cn);
}else{
//没有，则添加
addClass(obj,cn);
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后修改box的样式</button><br /><br />
<div id="box" class="b1"></div>
</body>
</html>
2、二级目录案例
案例介绍：一级目录、二级目录，点击一级目录展开折叠二级目录
文件结构：
- test08文件代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style-type: none;
}
a, img{
border:0;
text-decoration: none;
}
body{
font:12px/180% Arial,helvetica,sans-serif,"新宋体";
}
</style>
<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript">
window.onload = function(){
/*
* 我们的每一个菜单都是一个div
* 当div具有collapsed这个类时，div就是折叠的状态
* 当div没有这个类时，div就是展开的状态
*/
/*
* 点击菜单，切换菜单的显示状态
*/
//获取所有的class为menuSpan的元素
var menuSpan = document.querySelectorAll(".menuSpan");
//定义一个变量，来保存当前打开的菜单
var openDiv = menuSpan[0].parentNode;
//为span绑定单击响应函数
for(var i=0;i<menuSpan.length;i++){
menuSpan[i].onclick = function(){
//this代表我当前点击的span
//获取当前span的父元素
var parentDiv = this.parentNode;
//切换菜单显示状态
toggleMenu(parentDiv);
//判断openDiv和parentDiv是否相同
if(openDiv != parentDiv && !hasClass(openDiv,"collapsed")){
//打开菜单以后，应该关闭之前打开的菜单
//为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
//addClass(openDiv,"collapsed");
//此处toggleClass（）不具有移除的功能
//toggleClass(openDiv,"collapsed");
toggleMenu(openDiv);
}
//修改openDiv为当前打开的菜单
openDiv = parentDiv;
}
};
//切换菜单显示状态（附加动画效果）
function toggleMenu(obj){
//在切换类之前，获取元素的高度
var begin = obj.offsetHeight;
//切换parentDiv是否显示
toggleClass(obj,"collapsed");
//在切换类之后获取一个高度
var end = obj.offsetHeight;
//动画效果就是将高度从begin向end过渡
//将元素的高度重置为begin
obj.style.height = begin + "px";
//执行动画，从begin向end过渡
move(obj,"height",end,10,function(){
//动画执行完毕，内联样式已经没有存在的意义，删除之
obj.style.height = "";
});
}
}
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在线工具</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图表生成器</a>
<a href="#">邮件</a>
<a href="#">htaccess密码</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">推荐我们</a>
<a href="#">链接我们</a>
<a href="#">网络资源</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">JavaScript工具包</a>
<a href="#">CSS驱动</a>
<a href="#">CodingForums</a>
<a href="#">CSS例子</a>
</div>
<div class="collapsed">
<span class="menuSpan">测试电流</span>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
</div>
</div>
</body>
</html>
- sdmenu文件代码
@charset "utf-8";
/* sdmenu */
div.sdmenu {
width: 150px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
height: 15px;
line-height: 15px;
overflow: hidden;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background: #ccc;
}
div.sdmenu div a:hover {
background: #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
- tools文件代码
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数
* obj： 要获取的样式的元素
* name：要获取的样式名
*/
function getStyle(obj,name){
//方法一
if(window.getComputedStyle){
//正常浏览器方式
return getComputedStyle(obj,null)[name];
}else{
//IE8方式
return obj.currentStyle[name];
}
}
//执行简单动画的move函数
/*
* 参数：
* obj：要执行动画的对象
* attr：要执行动画的样式，比如left top width height
* target：执行动画的目标位置
* speed：移动的速度（不考虑正负）
* callback:回调函数，在动画执行完毕以后执行
*/
function move(obj,attr,target,speed,callback){
//关闭上一个定时器
clearInterval(obj.timer);
var current = parseInt(getStyle(obj,attr));
//判断速度的正负值
//如果从0向800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target){
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer对象，用来保存它自己的定时器标识
obj.timer = setInterval(function(){
//获取box1原来的left值
var oldValue = parseInt(getStyle(obj,attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//向左移动时，判断newValue是否小于target
//向右移动时，判断newValue是否大于target
if(speed < 0 && newValue < target || speed > 0 && newValue > target){
newValue = target;
}
//将新值赋值给box1
obj.style[attr] = newValue + "px";
//当元素移动到800px时，使其停止执行动画
if(newValue === target){
clearInterval(obj.timer);
//动画执行完毕，执行回调函数
callback && callback();
}
},30)
};
//定义一个函数，用来向一个元素中添加指定的class属性
/*
* 参数：
* obj： 要添加的class属性的元素
* cn：要添加的class值
*/
function addClass(obj,cn){
//检查obj中是否含有cn
if(!hasClass(obj,cn)){
obj.className += " "+cn;
}
}
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class，则返回true，没有则返回false
*/
function hasClass(obj,cn){
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*
* 删除一个元素中指定的class属性
*/
function removeClass(obj,cn){
//创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
//删除class
obj.className = obj.className.replace(reg,"");
}
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类，则删除
* 如果元素中没有该类，则添加
*/
function toggleClass(obj,cn){
//判断obj中是否含有cn
if(hasClass(obj,cn)){
//有，则删除
removeClass(obj,cn);
}else{
//没有，则添加
addClass(obj,cn);
}
}
运行截图：
附上我找到的此教程的源码、课件及大佬笔记，戳我下载
3、JSON
- JS中的对象只有JS自己认识，其他的语言都不认识
- JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换成任意语言中的对象，JSON在开发中主要用来数据的交互
- JSON（JavaScript Object Notation）：JS对象表示法。JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一致。
- JSON分类：
对象{}
数组[ ] - JSON中允许的值：
字符串
数值number
布尔值
null
对象（普通对象，不包含函数）
数组 - 在JS中，有一个工具类叫JSON，用于将JSON字符串转换为JS对象，也可以将一个JS对象转换为JSON
- json------》js对象
JSON.parse( )
可以将JSON字符串转换为js对象
它需要一个JSON字符串作为参数，会将该字符串转换为JS对象
<script type="text/javascript">
var obj = '{"name":"孙悟空","age":18,"gender":"女"}';
var arr = '[1,2,3,"hello",true]';
var chanObj = JSON.parse(obj);
var chanArr = JSON.parse(arr);
console.log(chanObj.gender);
console.log(chanArr);
</script>
- JS对象-----》JSON
JSON.stringify( )
可以将一个JS对象转换为JSON字符串
需要一个js对象作为参数，会返回一个JSON字符串
<script type="text/javascript">
var obj3 = {name:"猪八戒",age:28,gender:"男"};
var str = JSON.stringify(obj3);
console.log(str);
</script>
- eval函数介绍
eval（）函数可以用来执行一段字符串形式的JS代码，并将执行结果返回；
如果使用eval（）执行的字符串中含有{}，它会将{}当成是代码块，如果不希望将其当成代码块解析，则需要在字符串前后各加一个（）。
eval（）这个函数的功能很强大，可以直接执行一个字符串中的js代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患。
<script type="text/javascript">
var str = '{"name":"猪八戒","age":28,"gender":"男"}';
var obj = eval("("+str+")");
console.log(obj.name);
</script>
- JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
- 如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理。
<script type="text/javascript" src="js/json2.js"></script>
附：json2.js文件请从本文第二部分附注链接中day18文件夹中js子文件夹中查找。
921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
