拖拽练习
- onmousedown 鼠标按钮被按下
- onmousemove鼠标被移动
- onmouseup鼠标按键被松开
- setCapture()这个方法将会把下一次所有的鼠标按下的相关事件捕获到自己身上。但如果chrome浏览器调用会报错。
拖拽流程
1.当鼠标在被拖拽元素上按下时，开始拖拽
2.当鼠标移动时被拖拽元素跟随鼠标移动
3.当鼠标松开时被拖拽元素固定在当前位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width:100px;
height:100px;
background:red;
position:absolute;
}
#box2{
width:100px;
height:100px;
background:navy;
position:absolute;
left:200px;
top:100px;
}
</style>
<script>
window.onload=function(){
// drug(box1);如果设置了drug函数就可以直接在这里调用
var box1=document.getElementById("box1");
box1.onmousedown=function(){
//在鼠标按下时就确定鼠标的位置，通过在鼠标移动时设置盒子的位置使其移动一定距离来实现保持鼠标在拖拽时一直是按下去的那个位置
var x=event.clientX-box1.offsetLeft;//此处设置的是div的偏移量
var y=event.clientY-box1.offsetTop;
// box1.setCapture&&box1.setCapture();为box1设置捕获
document.onmousemove=function(event){
var left=event.clientX-x;
var Top=event.clientY-y;//div
box1.style.left=left+"px";
box1.style.top=Top+"px";
};
//元素绑定鼠标松开事件,取消onmosemove事件
document.onmouseup=function(){
document.onmousemove=null;
//alert("sd");
document.onmouseup=null;//取消onmousemove这个事件
// box1.releaseCapture && box1.releaseCapture();为box1释放捕获
}; //这里是为document绑定的函数，原因是因为如果为box1绑定鼠标松开时的函数的话，在把box1移到和box2重合时，box1会被box2遮盖住，这时如果再往下移，鼠标是在box2上面的，再松开鼠标后在移动鼠标时就会出现box1并没有停止而是继续在跟随鼠标移动。这是因为这时触发的就是box2上面的鼠标释放的这个事件了。为了让box1避免这个情况所以我们为document绑定了鼠标松开时的函数。
return false;
};
</script>
</head>
<body>
<p>为v电饭煲</p>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索，如果不希望发生这个情况可以通过return false取消。但这个对IE8不起作用
在IE8中可以通过为box1来设置捕获和释放捕获来完成，但chrome浏览器不支持setCapture()这个方法。这时我们需要判断浏览器是否支持。
- 设置一个drug函数来实现这个拖拽
传一个参数：开启拖拽的元素
function drug(obj){
var obj=document.getElementById("box1");
obj.onmousedown=function(){
var x=event.clientX-obj.offsetLeft;
var y=event.clientY-obj.offsetTop;
//obj.setCapture&&obj.setCapture();
document.onmousemove=function(event){
var left=event.clientX-x;
var Top=event.clientY-y;
obj.style.left=left+"px";
obj.style.top=Top+"px";
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;//取消onmousemove这个事件
//obj.releaseCapture && obj.releaseCapture();
};
return false;
};
}
鼠标的滚轮事件
- onmousewheel鼠标滚轮滚动事件，会在滚轮滚动时触发，但火狐不支持该属性
- 在火狐中用DOMMouseScroll来绑定滚动事件，注意该事件需要通过addEventListener()函数来绑定。
- wheelDelta可以获取鼠标滚轮滚动的方向，向上滚会返回一个+120，向下滚会返回一个-120。但这个值不看大小只看正负，但在火狐中不支持该属性，在火狐中用detail来获取滚轮方向，向上滚是,-3，向下滚是+3，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width:100px;
height:100px;
background:red;
}
</style>
<script>
function bind(obj,eventStr,callback){
obj.addEventListener(eventStr,callback,false)
};
window.onload=function(){
var box1=document.getElementById("box1");
//为box1绑定一个鼠标滚轮滚动事件
box1.onmousewheel=function(){
if(event.wheelDelta>0||event.detail<0){
//向上滚，box1变短
box1.style.height=box1.clientHeight-10+"px";
}else{
//向下滚，box1变长
box1.style.height=box1.clientHeight+10+"px";
}
//当滚动时，如果浏览器有滚动条，滚动条会随之滚动，如果不希望发生可取消这个行为
//通过addEventListener()方法绑定响应函数，取消默认行为时不能使用return false，需要用event.preventDefault()来取消。但IE8不支持
event.preventDefault&&event.preventDefault();//判断是否支持，支持就使用
};
bind(box1,"DOMMouseScroll",box1.onmousewheel);//因为这里的回调函数要实现的样式和上面box1.onmousewheel响应函数要实现的样式相同，所以可以直接将响应函数设置为box1.onmousewheel
}
</script>
</head>
<body style="height:2000px">
<div id="box1"></div>
</body>
</html>
键盘事件
- onkeydown某个键盘被按下
对于onkeydown来说如果一直按着某个键不松手，则事件会一直触发，但当他连续触发时第一次和第二次之间会相隔稍微长一点，其他事件会一直触发的非常快这种设计是防止误操作的发生。 - onkeyup某个键盘被松开
- keyCode获取按键的编码，通过它可以获取那个按键被按下
键盘事件一般绑定给一些可以获取到焦点的对象（如点击input文本框会显示光标，或者按下键盘向里面添加元素就是获取焦点）或者是document
window.onload=function(){
document.onkeydown=function(event){
console.log(event.keyCode);
if(event.keyCode===88){
alert("x触发了")；
};//判断x是否被触发
}
}
当输入x时
- altKey,ctrlKey,shiftKey这三个属性用来判断alt,ctrl,shift是否被按下，如果按下则返回true，否则返回false
if(event.keyCode===88&&event.altKey){
alert("x和alt同时被按下了");
}
- 获取input
在文本框中输入内容，属于onkeydown行为，如果在onkeydown中取消默认行为，输入的内容就不会出现在文本框中
var input=document.getElementsByTagName("input")[0];
input.onkeydown=function(){
console.log("e");//查看是否按下键盘
return false;//取消默认行为
}
var input=document.getElementsByTagName("input")[0];
input.onkeydown=function(event){
//使文本框中不能出现数字
console.log(event.keyCode);//发现0-9的数字编码是48-57
//判断是否是数字
if(event.keyCode>=48&&event.keyCode<=57){
return false;//取消默认行为
}
}
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width:100px;
height:100px;
background-color:red;
position:absolute;
}
</style>
<script type="text/javascript">
//使div可以根据不同方向键向不同的方向移动
//左键，左移。按右键，右移......
window.onload=function(){
document.onkeydown=function(event){
console.log(event.keyCode);//可得左上右下键的编码分别为37,38,39,40
var speed=10;
if(event.ctrlKey){
speed=80;
}//判断是否按了ctrl键，按了速度提高
//判断是哪个键
switch(event.keyCode){
case 37:
//向左，left值减小，以下以此类推
box1.style.left=box1.offsetLeft-speed+"px";
break;
case 38:
box1.style.top=box1.offsetTop-speed+"px";
break;
case 39:
box1.style.left=box1.offsetLeft+speed+"px";
break;
case 40:
box1.style.top=box1.offsetTop+speed+"px";
break;
}
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
Navigator
Bom(浏览器对象模型)
BOM可以使我们通过js来操作浏览器。在BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象：
- window
代表的是整个浏览器的窗口，同时window也是网页中的全局对象 - Navigator
代表的当前浏览器的信息，通过该对象可以识别不同的浏览器 - Location
代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或操作浏览器跳转页面
- History
代表浏览器的历史记录，可以通过该对象来操作浏览器历史信息，由于隐私原因，该对象不能获取到具体历史记录只能操作浏览器向前或向后翻页，并且只在本次访问浏览器时有效 - Screen
代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息
上述对象都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用 - navigator
由于历史原因，Navigator对象中的大部分属性已经不能帮我们识别浏览器了，一般只使用userAgent(等价于浏览器)来判断浏览器信息
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同浏览器会有不同的userAgent
火狐的userAgent：
console.log(navigator.userAgent)
返回：
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101
Firefox/114.0
edge浏览器的userAgent：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.51
是一系列信息，中间会包括浏览器的名字
用正则表达式来判断是否含有当前浏览器的名字
<script>
//用正则表达式来判断是否含有当前浏览器的名字
var ua=navigator.userAgent;
console.log(ua)
if(/firefox/i.test(ua)){
alert("huohu")
}
</script>
在IE11里（edge里）基本不能通过userAgent来识别一个浏览器中是否有IE了，可以通过一些浏览器里面的特有对象来判断浏览器信息
例如通过检查浏览器中是否有ActiveXObject()这个方法来判断是否是IE浏览器
- History
属性length：
alert(history.length);//length属性可以获取到当前访问的链接数量
方法：
back() 可以用来退回到上一个页面，作用和浏览器的回退按钮一样
先创建一个text02文档，运行后点击里面的链接可以跳转到bom文档里面，在dom文档里面点击按钮又返回到text02文档里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>test92</h1>
<a href="bom.html">去dom.html</a>
</body>
</htm>
然后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
history.back();
}
}
</script>
</head>
<body>
<h2>history</h2>
<button id="btn">点我一下</button>
</body>
</html>
forward()方法：可以跳转到下一个页面，作用和浏览器的前进按钮一样
go()方法：可以跳转到指定页面。它需要一个整数作为参数：1：表示向前跳转一个页面（相当于forward()方法），2：表示向前跳转两个页面。（-1：向后跳转一个页面，-2：向后跳转两个页面）
- location
如果直接打印location信息就会获取浏览器的地址栏信息（当前页面完整路经）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
// history.back();
alert(location);
}
}
</script>
</head>
<body>
<h1>location</h1>
<button id="btn">点击一线</button>
<a></a>
</body>
</html>
如果直接将location属性修改为一个完整路径或相对路径，则我们页面会自动跳转到该路径，并生成相应历史记录
window.οnlοad=function(){
var btn=document.getElementById("btn");
btn.οnclick=function(){
location="bom.html";//跳转到bom页面
}
}
assign()方法：用来跳转到其他页面，作用和直接修改location一样
window.οnlοad=function(){
var btn=document.getElementById("btn");
btn.οnclick=function(){
location.assign("http://www.baidu.com")；
}
}
reload()方法：用于重新加载当前页面，作用和刷新按钮一样。如果在方法中传递一个true作为参数，则会强制清空缓存刷新页面
replace()方法：可以实用一个新页面替换当前页面，调用完毕也会跳转页面。不会生成历史记录不能使用回退按钮
定时器简介
js的程序的执行速度非常快，如果希望一段程序可以每隔一段时间执行一次，可以使用定时器
- setInterval()：这个是window的方法可以将一个函数每隔一段时间执行一次
参数：1,回调函数，该函数会每隔一段时间执行一次
2，每次回调间隔的时间，单位是毫秒
他会返回一个Number数字，这个数字用来作为定时器的唯一标识
- clearInterval(): 这个方法可以用来关闭一个定时器，方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
clearInterval()可以接收任意参数，如果参数是一个有效定时器的标识，就会停止对应定时器。如果参数不是一个有效的标识，就不会有反应也不会发生什么
<script>
window.onload=function(){
//获取count
var count=document.getElementById("count");
var nu=1;
var nm=setInterval(function(){
count.innerHTML=nu++;
if(nu==10){
clearInterval(nm);
}
},1000);
console.log(nm);
}
</script>
练习（图片切换）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var img1=document.getElementById("img1");
//创建一个数组来保存图片地址
var imgArr=["../newProtect/act.png","../newProtect/135907.png","../newProtect/down.png"];
//创建一个变量来保存当前图片的索引
var index=0;
var tim;//创建一个变量用于把它附上setInterval的值，让后面为btn2绑定函数使实现点击就停止图片变换
//要实现点击按钮时图片变换
var btn=document.getElementById("btn1");
btn.onclick=function(){
//目前点击一个按钮就会开启一个定时器，点击多次就会开启多个定时器，导致图片切换速度过快，并且我们只能关闭最后一次开启的定时器
//所有在开启下一次定时器之前我们要停止上一个定时器
clearInterval(tim);
tim=setInterval(function(){
//开启定时器来自动切换图片
index++;
//判断总长度是否大于索引
/* if(index>=imgArr.length){
//则将index设为0
index=0;
} */
index=index%imgArr.length;//和上面效果一样
//修改img1的src属性9999
img1.src=imgArr[index];
/* if(index==2){
clearInterval(a);
} */
},1000)
}
//点击按钮后实现停止图片
var btn2=document.getElementById("btn2");
btn2.onclick=function(){
clearInterval(tim);//在点击开始按钮后才会为tim赋值，为负值之前tim是一个undefind,此时点击停止按扭clearInterval()接收到的是一个undefind,但这并不会影响到什么
}
}
</script>
</head>
<body>
<img src="../newProtect/140005.png" id="img1"/>
<br>
<button id="btn1">开始</buttun>
<button id="btn2">停止</button>
</body>
</html>
延时调用
指调用一个函数不会马上执行，而是过一段时间以后再执行而且只会执行一次。它和定时调用的区别是它定时调用会每隔一段时间执行而且执行多次
var num=1;
var se=setTimeout(function(){
console.log(num++);
},5000);
clearTimeout(se);//关闭延时调用，开启延时调用5秒后控制台会返回一个1，而关闭后就不会出现1了
定时器的应用
点击按钮后一直向右移到指定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width: 200px;height:200px;background:red;position: absolute;left:0}
</style>
<script type="text/javascript">
window.onload=function(){
//获取box
var box=document.getElementById("box");
var btn=document.getElementById("btn");
var te;//创建一个变量，运行到setInterval处给它赋值，这样就避免了每点击一次按钮就创建一个变量te
btn.onclick=function(){
clearInterval(te);
//开启定时器
te=setInterval(function(){
var oldvalue=parseInt(getStyle(box,"left"));//用getStyle()函数来获取属性值，并用parseInt取返回的有效值（及0px去掉px）
var newValue=oldvalue+1;
if(newValue>700){
newValue=800;
}//防止上一部中oldValue后加的不是一个10，无法累加到700造成块无法在700处停下来
box.style.left=newValue+"px";
if(newValue==700){
clearInterval(te);
}
},10)
}
}
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器，具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式，没有getComputedStyle
return obj.currentStyle[name];
}//if后面的条件是window.getComputedStyle,如果判断出浏览器中没有该方法就会返回一个undefined,不影响后面代码的执行
//以上的代码还可以替换为return window.getComputedStyle?getComputeStyle(obj,null)[name]:obj.currentStyle[name]
}
</script>
</head>
<body>
<button id="btn">点击以后box向右移动</button>
<br/><br/>
<div id="box"></div>
</body>
</html>
完成轮播图自动转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#outer{
width:100px;
height:100px;
margin:30px auto;
background: yellow;
position: relative;
overflow: hidden;
}
#imglist{
list-style: none;
/* width: 1000px;宽度设置死不利于调整图片数量，所有下面用js来设置动态宽度*/
position: absolute;
background-color: aqua;
}
#imglist li{
float: left;
margin:0 10px;
background: salmon;
}
#navDiv{
position: absolute;
bottom: 10px;
/*将navDiv居中，此处脱离了文档流所以不能用margin，要设置left值
outer宽度：100
navDiv宽度4*20=80
100-80=20，80/2=40
left:10px，但这样写死了，添加添加一个a后就不回居中了所有这里也通过js来设置*/
}
#navDiv a{
float: left;
width: 10px;
height:10px;
background-color: aquamarine;
margin: 0 5px;
/*设置透明样式*/
opacity:0.5;
/*兼容ie8透明*/
filter:alpha(opacity=50);
}
#navDiv a:hover{
background-color: black;
}
</style>
<script src="./tools.js"></script>
<script>
window.onload=function(){
var imglist=document.getElementById("imglist");
var imgArr=document.getElementsByTagName("img");
//设置imglist的宽度
imglist.style.width=120*imgArr.length+"px";
//设置导航按钮居中
var navDiv=document.getElementById("navDiv");
var outer=document.getElementById("outer");
//设置navDiv的left值
navDiv.style.left=(outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
//获取所有a
var allA=document.getElementsByTagName("a");
//默认显示图片的索引
var index=0;
//设置默认选中的效果
allA[index].style.backgroundColor="black"
//点击超链接切换到指定图片
//为所有超链接都绑定单击响应函数
for(var i=0;i<allA.length;i++){
//为每一个超链接都添加一个num属性，相当于一个标记
allA[i].num=i;
//为超链接绑定单击响应函数
allA[i].onclick=function(){
//点击时关闭自动切换
clearInterval(tier)
//获取点击超链接的索引,并将其设置为index
index=this.num;
//切换图片
/*
第一张索引为0 0px，第二张索引为1 -120px,第三章索引为2 -240px
*/
//imglist.style.left=-120*index+"px";
//修改正在选中的a
setA();
mov(imglist,"left",-120*index,1,function(){
//点击完了后再开启自动切换
autoChange();
});
}
}
autoChange()
//创建一个方法设置选中的a
function setA(){
//判断当前索引是否为最后一张图片
if(index>=imgArr.length-1){
//则index设置为零，这样显示最后一张时点会在第一个点变黑
index=0;
//此时显示的最后一张图片，而最后一张图片和第一张是一模一样的
//通过css将最后一张切换为第一张
imglist.style.left=0;
}
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor="";//注意这里设置的是内联样式优先级高，会覆盖掉hover，所以这里设置为空
}
//将选中的a设置为黑色
allA[index].style.backgroundColor="black"
}
//创建一个函数。自动切换图片
var tier;
function autoChange(){
//开启定时器
tier=setInterval(function(){
//索引自增
index++;
//判断index的值
index %=imgArr.length;
//执行的函数
mov(imglist,"left",-120*index,1,function(){
//修改导航点
setA();
});
},3000)
}
}
</script>
</head>
<body>
<!--创建一个大的div作为容器 -->
<div id="outer">
<!--创建一个UI放图片-->
<ul id="imglist">
<li><img src="../newProtect/Snipaste_2023-06-24_21-23-40.png"/></li>
<li><img src="../newProtect/Snipaste_2023-06-24_21-24-30.png"/></li>
<li><img src="../newProtect/Snipaste_2023-06-24_21-25-01.png"/></li>
<li><img src="../newProtect/Snipaste_2023-06-24_21-25-46.png"/></li>
<li><img src="../newProtect/Snipaste_2023-06-24_21-23-40.png"/></li>
</ul>
<!--创建导航栏，因为图片部分开启了绝对定位脱离了文档流，所以导航也要开启绝对定位，但它是imglist兄弟元素会在他下面所有会在图片上面显示-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
类的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1{
width:200px;
height:200px;
background-color: aqua;
}
.b2{
width:300px;
/* height:300px; */
background-color:yellow;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("box1");
var btn=document.getElementById("btn");
btn.onclick=function(){
/* //修改box1样式,通过style属性来修改元素样式，每修改一次浏览器就要重新渲染一次页面，这样执行的性能会很差，而且这种形式当我们要修改多个样式时也不方便
box1.style.width="300px";
box1.style.height="300px";
box1.style.backgroundColor="yellow" */
//实现一行代码同时修改多个样式，修改box的class属性值来间接修改样式，这样就可以修改多个样式，浏览器只需重新渲染页面一次，性能比较高，并且这种方式可以使行为和表现进一步的分离
//box1.className +=" b2";//这样可以在b1的基础上增加b2
addClass(box1,"b2")
alert(hasClass(box1,"b2"));
//removeClass(box1,"b2");
toggleClass(box1,"b2");
}
}
//定义一个函数，用来向一个元素中添加指定的class属性值
/*参数：
*obj 要添加class属性的值
*cn 要添加的class值
*但是上面那样会照成点一次就增加一个b2，就需要判断一个元素中是否有b2
*/
function addClass(obj,cn){
//检查obj中是否含有cn,没有则添加cn
if(!hasClass(obj,cn)){
obj.className +=" "+cn;
}
}
//判断一个元素中是否有指定的class属性值，如果有则返回true，没有则返回false
function hasClass(obj,cn){
//判断obj中有没有cn这个class，创建正则表达式
//var reg=/\bb2\b/;//这里b2只能是一个独立b2,所以正则表达式中要加单词边界,但是前面这样就写死了，我们需要创建一个构造函数来实现动态
var reg=new RegExp("\\b"+cn+"\\b");
alert(reg);
return reg.test(obj.className);
}
//删除一个元素中的指定的class属性
function removeClass(obj,cn){
//创建一个正则表达式
var reg=new RegExp("\\b"+cn+"\\b");
//删除class,用一个空串代替cn
obj.className=obj.className.replace(reg,"");
}
//切换一个类，如果元素中有该类则删除，如果元素中没有该类则添加
function toggleClass(obj,cn){
//判断obj中是否含有cn
if(hasClass(obj,cn)){
//有，删除
removeClass(obj,cn);
}else{
//没，添加
addClass(obj,cn);
}
}
</script>
</head>
<body>
<button id="btn">点击</button>
<div id="box1" class="b1 b2"></div>
</body>
</html>
JSON
JSON：JavaScript Object Notation js对象表示法。
它的格式和js对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和js语法一致。
JSON中允许的值：1、字符串，2、数值，3、布尔值，4、null,5、对象（不能有函数），6、数组
JS中的对象只有js自己认识，其他的语言都不认识，JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言识别。并且可以任意转换为任意语言中的对象。JSON在开发中用来数据的交互。JSON分类：1、对象{}，2、数组[]
var obj='{"name":"孙悟空","age":18,"gender":"男"}';//JSON对象
var arr='[1,2,4,"hello",true]';//数组
在js工具中，提供了一个工具类，JSON。这个对象可以帮助我们将一个JSON转换为js对象，也可以将一个js对象转化为JSON
- 转化为js对象：JSON.parse() 需要一个JSON字符串作为参数，会将该字符串转换为js对象并返回
- 转为JSON：JSON.stringify() 需要一个js对象作为参数，会返回一个JSON字符串。注意JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
- eval()这个函数可以用来执行一段字符串形式的js代码，并将执行结果返回。如果要使用eval()执行的字符串中含有{},他会将{}当成代码块，如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
- 在开发中尽量不要使用eval(),因为他的功能很强大，可以直接执行一个字符串中的js代码。但他的执行性能很差，而且存在安全隐患
- 如果需要兼容IE7及以下的JSON操作，可以通过引入一个外部的js文件来处理
<script type="text/javascript" src="js.json2.js"></script>
805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
