1. BOM
BOM: 浏览器对象模型
BOM提供了很多对象，用于访问浏览器的功能，这些功能和任何网页内容无关;
BOM将浏览器中的各个部分转换成一个一个的对象，我们通过修改这些对象属性，调用它们的方法，从而控制浏览器的各种行为;
BOM对象:
- Window: 浏览器窗口, 并且保存浏览器的全局对象;
- Navigator: 浏览器信息, 通过该对象可以用来识别不同的浏览器, 因为历史原因已没有意义, 现通过userAgent可以判断浏览器类型; 例:
/chrome/i.test(navigator.userAgent);- Location: 浏览器地址栏信息;
打印location，则能获取到当前网址栏的信息;
修改location属性为一个完整路径或相对路径则页面会直接跳转, 即直接location="http://www.baidu.com";
assign(): 直接跳转到某个页面，与直接修改location一样,location.assign("http://www.baidu.com");;
reload(): 用于重新加载当前页面，与刷新按钮一样，传递true作为参数时会强制清空缓存(如清空input框内信息):
replace(): 与assign类似但是它不会生成历史记录，无法回退,location.replace("01-BOM.html");;- History: 代表历史记录，只能前进后退;
length: 当次访问的历史次数，关闭浏览器时清零;
back(): 回到上一个页面;
forward(): 前往下一个页面;
go(a): 使用整数a作为参数来指定需要跳转到的页面; 对于a, 1:标识向前跳转一个页面，等同于forward(); 2: 标识向前跳转两个页面; -1: 标识向后跳转一个页面; -2: 标识向后跳转两个页面; 例istory.go(-1);;- Screen: 代表用户当前屏幕;
定时调用:
window.setInterval(func, num), num为每次调用间隔的时间, 单位是毫秒; 返回值x为一个Number类型的数据, 为此定时器的标识 ;
关闭定时器:window.clearInterval(定时器标识x);
延时调用:window.setTimeout(func, num), 经过num毫秒后调用，只调用一次;
var num = 1;
var timer = setInterval(function () {
count.innerHTML = num++;
if (num === 11) {
// 关闭定时器
clearInterval(timer);
}
}, 1000);
2. 轮播图实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 470px;
height: 300px;
margin: 50px auto;
background-color: aquamarine;
padding: 10px 0;
position: relative;
/* 裁剪溢出内容 */
overflow: hidden;
}
#imgList{
list-style: none;
width: 5000px;
position: absolute;
/* 子元素绝对定位, 父元素最好相对定位 */
/* 每向左移动470px, 显示下一张图片 */
left: 0px;
}
#imgList li{
float: left;
margin: 0 10px;
}
#imgList li img{
width: 450px;
height: 300px;
}
#navDiv{
position: absolute;
/* 设置位置 */
bottom: 15px;
/* 居中 需要计算
* outer:470 navDiv:(15+10)*3=75
* 470-75=395 395/2=197.5
* 这种方法固定不可改, a数量多了后就会不居中, 舍弃,
*/
/* left: 197px; */
}
#navDiv a{
/* 设置超链接浮动 */
float: left;
width: 15px;
height: 15px;
background-color: burlywood;
margin: 0 5px;
/* 在IE8没有 */
opacity: 0.5;
/* 兼容IE8 */
filter: alpha(opacity=0.5);
}
/* 鼠标移入显示 */
#navDiv a:hover{
background-color: black;
}
</style>
<!-- 引入工具 -->
<script type="text/javascript" src="js/tools.js">
</script>
<script type="text/javascript" >
window.onload = function(){
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
imgList.style.width = 470*imgArr.length+"px";
// 导航按钮居中
var navDiv = document.getElementById("navDiv");
var outer = document.getElementById("outer");
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
var index = 0;
var allA = document.getElementsByTagName("a");
allA[index].style.backgroundColor = "black";
// 点击超链接切换指定图片
for(var i=0; i<allA.length; i++){
//为每一个超链接都添加一个num属性
allA[i].num = i;
allA[i].onclick = function(){
// 关闭autochange 自动切换定时器
// 否则刚点击到图片就会自动切换走
clearInterval(timer);
// 由于执行次序的问题, i全是allA.length
// 所以引入allA[i].num代替i
// alert(i);
// this 为onclick的allA[i]
// 获取点击超链接的索引,并将其设置为index
index = this.num;
// 切换图片 修改imgList 的left属性
// imgList.style.left = -470 * index + "px";
move(imgList, "left", -470*index, 20, function(){
// 动画执行完毕, 开启自动切换
autoChange();
});
setA();
};
}
autoChange();
function setA(){
if(index >= imgArr.length-1){
index = 0;
// 此时显示最后一张图片 而最后一张和第一张一样
// 通过CSS将最后一张切换成第一张
// 肉眼不会知道
imgList.style.left = 0;
}
// 设置超链接按钮颜色
// 当前点击的背景为black
// 其余的重置为空 如没有这一步的话,点击过的按钮都会为black
for(var i = 0 ; i < allA.length ; i++)
{
allA[i].style.backgroundColor = "";
}
allA[index].style.backgroundColor = "black";
};
// 自动切换定时器
var timer;
// 自动切换图片
function autoChange(){
// 开启一个定时器
timer = setInterval(function(){
// 使索引自增
index++;
index %= imgArr.length;
move(imgList , "left", -470*index, 20, function(){
// 修改导航点
setA();
})
}, 3000);
};
}
</script>
</head>
<body>
<!-- 创建一个大的div, 作为大的容器, 里面放无序列表 -->
<div id="outer">
<!-- 创建一个ul 用于放置图片 -->
<ul id="imgList">
<li><img src="img/pic1.jpg" /></li>
<li><img src="img/pic2.jpg" /></li>
<li><img src="img/pic3.jpg" /></li>
<li><img src="img/pic1.jpg" /></li>
</ul>
<!-- 创建导航 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
tools.js
function getStyle(obj , name){
if(window.getComputedStyle){
return getComputedStyle(obj, null)[name];
}
else{
return obj.currentStyle[name];
}
}
function move(obj, attr, target, speed, callback){
clearInterval(obj.timer);
var current = parseInt(getStyle(obj, attr));
if(current>target){
speed = -speed;
}
obj.timer = setInterval(function(){
var oldValue = parseInt(getStyle(obj, attr));
var newValue = oldValue+speed;
if((speed<0 && newValue<target) || (speed>0 && newValue>target))
{
newValue = target;
}
obj.style[attr] = newValue + "px";
if(newValue == target){
clearInterval(obj.timer);
callback && callback();
}
},30);
}
3. 类的操作
二级菜单
<!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="js/tools.js"></script>
<script>
window.onload=function(){
// 我们的每一个菜单就是一个div
// 当这个div具有collapse的这个类时，div就是折叠的状态
// 当div没有这个类时，就是展开的状态
// 点击菜单，切换菜单的显示状态
// 获取所有的class为menuSpan的span标签
var menuSpan=document.querySelectorAll(".menuSpan");
// 定义一个变量，来保存当前打开的菜单
var openDiv=menuSpan[0].parentNode;
for(var i=0;i<menuSpan.length;i++){
menuSpan[i].onclick=function(){
// this代表当前点击的span
// 获取当前span的父节点
var parentDiv=this.parentNode;
// 打开或者关闭当前点击的div
toggleMenu(parentDiv);
// 打开菜单以后，应该关闭之前打开的菜单
// 判断openDiv和parentDiv是否相同
// 如果不相同，则去看openDiv是否有collapsed类
// 没有collapsed类是打开状态，则对当前openDiv进行toggle操作
if(openDiv!=parentDiv && !hasClass(openDiv,"collapsed")){
// 为了可以统一处理动画过度效果，我们希望在这将addClass改为toggleClass
// addClass(openDiv,"collapsed")
alert(1);
// 此处toggleClass()不要有移除的效果
toggleClass(openDiv);
}
// 修改opendiv为当前打开的菜单
openDiv=parentDiv;
};
}
// 用来切换菜单折叠和显示状态
function toggleMenu(obj){
// 在切换类之前，获取元素的高度
var begin=obj.offsetHeight;
// 切换parentDiv
toggleClass(obj,"collapsed");
// 在切换类之后获取一个高度
var end=obj.offsetHeight;
// console.log(begin+" "+end)
// 动画效果就是将高度从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>
@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: rgb(28, 20, 71);
}
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: rgb(54, 44, 110);
background: url(expanded.gif) no-repeat 10px center;
cursor: pointer;
border-bottom: 1px solid rgb(26, 28, 68);
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: rgb(126, 134, 224);
display: block;
border-bottom: 1px solid rgb(22, 5, 78);
color: rgb(9, 15, 15);
}
div.sdmenu div a.current {
background: rgb(10, 58, 69);
}
div.sdmenu div a:hover {
background: rgb(176, 216, 216) url(linkarrow.gif) no-repeat right center;
color: rgb(8, 50, 68);
text-decoration: none;
}
4. Json
JSON是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言的对象，JSON在开发中主要用于数据的交互。
JSON JavaScript Object Notation JS对象表示法；
JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一致。
分类：对象，数组;
允许的值：数字、字符串、布尔值、 null、对象、数组;
JSON转化为JS对象JSON.parse()，使用JS对象作为参数，返回JSON;
兼容IE7及以下使用eval来代替不能使用的JSON.parse(),或者引入JSON2库；eval()， 如果执行的字符串中有{}，则会被当做代码块，如果不希望被当做代码块被解析，在{}前后使用()，由于效率与安全问题，尽量不要使用；
左右查询：对等号左右两边查询即左右查询，右查询没有找到时会直接报错，左查询没有找到时会在全局创建；
var obj = '{"name":"孙悟空", "age":18}';
var arr = '[1,2,3,true, "hello"]';
var obj2 = '{"arr":[1,2,3]}';
var arr2 = '[{"name":"孙悟空", "age":18}, {"name":"孙悟空", "age":17}]';
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
