return
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> // return 返回值 // 数字、字符串、布尔、函数、对象（元素[]{} ull）、未定义 // fn1(); => 100 // alert( fn1().length ); // alert( typeof fn1() ); function fn1(){ // return 100; return 'miaov'; } // alert( fn2() ); // fn2(20)(10); function fn2(a){ return function (b){ alert(a+b); // 嘿嘿，我是注释~ }; } fn3().onload = function (){ document.body.innerHTML = 123; }; function fn3(){ return window; } // alert(fn4()); function fn4(){ // return ; } // alert( fn5() ); function fn5(){ return 123; alert(520); } /* return：返回值 1) 函数名+括号：fn1() ==> return 后面的值； 2) 所有函数默认返回值：未定义； 3) return 后面任何代码都不执行了； */ </script> </head> <body> </body> </html>
2-getId()
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div { width:100px; height:100px; background:red; } </style> <script> window.onload = function (){ // var oBtn = document.getElementById('btn1'); // var oDiv = document.getElementById('div1'); $('btn1').onclick = function (){ alert( $('div1').innerHTML ); }; }; function $( id ){ return document.getElementById( id ); } </script> </head> <body> <input id="btn1" type="button" value="按钮" /> <div id="div1">123</div> </body> </html>
3-$符的简化版
miaov.js
// JavaScript Document
function $( v ){
if( typeof v === 'function' ){
window.onload = v;
} else if ( typeof v === 'string' ) {
return document.getElementById(v);
} else if ( typeof v === 'object' ) {
return v;
}
}
function getStyle( obj, attr ){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="miaov.js"></script> <script> /* $( function(){ $('#btn1').click(function(){ $(this).css('background', 'red'); }); }); */ $(function(){ $('btn1').onclick = function(){ $( this ).style.background = 'yellow'; }; }); </script> </head> <body> <input id="btn1" type="button" value="按钮" /> </body> </html>
4-return应用
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> // alert( fn1( 5 ) ); // [ 1,2,3,4,5 ] // alert( fn1( 7 ) ); // [ 1,2,3,4,5,6,7 ] function fn1( n ){ var arr = []; for( var i=1; i<=n; i++ ){ arr.push(i); } return arr; } </script> </head> <body> </body> </html>
5-arguments
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> fn1( 1,2,3 ); // 实参——实际传递的参数 // function fn1( a,b,c ){ // 形参——形式上，abc这些名代表123 function fn1(){ // arguments => [ 1,2,3 ] —— 实参的集合 // alert( arguments ); // alert( arguments.length ); // alert( arguments[arguments.length-1] ); } // 当函数的参数个数无法确定的时候：用 arguments // alert( sum( 1,2,3 ) ); // 6 // alert( sum( 1,2,3,4 ) ); // 10 function sum (){ var n = 0; for( var i=0; i<arguments.length; i++ ){ n += arguments[i]; } return n; } var a = 1; function fn2( a ){ arguments[0] = 3; alert(a); // 3 var a = 2; alert( arguments[0] ); // 2 } fn2(a); alert(a); // 1 </script> </head> <body> </body> </html>
6-获取元素样式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div { width:100px; height:120px; background:red; } </style> <script src="miaov.js"></script> <script> $(function(){ // $('div1').style.width = '300px'; $('btn1').onclick = function (){ // alert( $('div1').style.width ); // $('div1').style.cssText = '350px;'; // alert( getComputedStyle( $('div1') ).width ); // IE6 7 8 不兼容 // alert( $('div1').currentStyle.width ); // 标准浏览器不兼容 /* if( $('div1').currentStyle ){ alert( $('div1').currentStyle.width ); } else { alert( getComputedStyle( $('div1'), 250 ).width ); // FF 4.0 之前 } */ // alert( getStyle( $('div1'), 'width' ) ); // alert( getStyle( $('div1'), 'height' ) ); alert( getStyle( $('div1'), 'marginRight' ) ); /* 获取到的是计算机（浏览器）计算后的样式 background: url() red …… 复合样式（不要获取） backgroundColor 单一样式（不要用来做判断） 不要有空格 不要获取未设置后的样式：不兼容 */ }; }); </script> </head> <body> <input id="btn1" type="button" value="按钮" /> <div id="div1"></div> </body> </html>
7-定时器
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> /* 定时器：时间概念 var timer = setInterval( 函数, 毫秒 ); 重复执行（发动机） clearInterval( timer ); 清除 var timer = setTimeout( 函数, 毫秒 ); 执行一次（炸弹） clearTimeout( timer ); */ // for(var i=0; i<3; i++){ document.title = i; } // 瞬间完成，没有时间根据 i = 0; var timer = null; function fn1(){ i++; document.title = i; if( i === 10 ){ clearInterval( timer ); } } timer = setInterval( fn1, 200 ); // fn1(); // 直接调用 // document.onclick = fn1; // 事件调用 </script> </head> <body> </body> </html>
8-替换背景
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <input type="button" value="换背景吧" /> <input type="button" value="停" /> <script> var aBtn = document.getElementsByTagName('input'); var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ]; var num = 0; var timer = null; var oBody = document.body; aBtn[0].onclick = function (){ clearInterval( timer ); // null、未定义 timer = setInterval(function(){ oBody.style.background = 'url('+ arrUrl[num] +')'; num++; num%=arrUrl.length; }, 1000); }; aBtn[1].onclick = function (){ clearInterval( timer ); }; // oBody.style.background = 'url('+ arrUrl[num] +')'; </script> </body> </html>
广告案例
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; } img { display:none; } </style> <script> window.onload = function (){ var miaov = document.getElementById('miaov'); setTimeout( function(){ miaov.style.display = 'inline-block'; setTimeout(function(){ miaov.style.display = 'none'; }, 3000); }, 2000); }; </script> </head> <body> <img id="miaov" src="img/miaov.jpg" /> </body> </html>
10-图片自动切换实例
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> ul { padding:0; margin:0; } li { list-style:none; } body { background:#333; } #pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; } #pic img { width:400px; height:500px; } #pic ul { width:40px; position:absolute; top:0; right:-50px; } #pic li { width:40px; height:40px; margin-bottom:4px; background:#666; } #pic .active { background:#FC3; } #pic span { top:0; } #pic p { bottom:0; margin:0; } #pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; } </style> <script> window.onload = function (){ var oDiv = document.getElementById('pic'); var oImg = oDiv.getElementsByTagName('img')[0]; var oSpan = oDiv.getElementsByTagName('span')[0]; var oP = oDiv.getElementsByTagName('p')[0]; var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ]; var arrText = [ '小宠物', '图片二', '图片三', '面具' ]; var num = 0; //////////////////////////////////////////////////////////////////////// var timer = null; function autoPlay(){ timer = setInterval(function(){ num++; num%=arrText.length; fnTab(); }, 1000); } // autoPlay(); setTimeout( autoPlay, 2000 ); oDiv.onmouseover = function (){ clearTimeout( timer ); }; oDiv.onmouseout = autoPlay; //////////////////////////////////////////////////////////////////////// for( var i=0; i<arrUrl.length; i++ ){ oUl.innerHTML += '<li></li>'; } // 初始化 function fnTab(){ oImg.src = arrUrl[num]; oSpan.innerHTML = 1+num+' / '+arrUrl.length; oP.innerHTML = arrText[num]; for( var i=0; i<aLi.length; i++ ){ aLi[i].className = ''; } aLi[num].className = 'active'; } fnTab(); for( var i=0; i<aLi.length; i++ ){ aLi[i].index = i; // 索引值 aLi[i].onclick = function (){ num = this.index; fnTab(); }; } }; </script> </head> <body> <div id="pic"> <img src="" /> <span>数量正在加载中……</span> <p>文字说明正在加载中……</p> <ul></ul> </div> </body> </html>
11-setTimeout实例-模仿qq查看资料效果
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #qq { width:200px; height:400px; background:#F9C; } #title { width:240px; height:180px; background:#FC6; position:absolute; top:10px; left:220px; display:none; } </style> <script src="miaov.js"></script> <script> $(function(){ var qq = $('qq'); var title = $('title'); var timer = null; qq.onmouseover = show; qq.onmouseout = hide; title.onmouseover = show; title.onmouseout = hide; function show(){ clearInterval( timer ); title.style.display = 'block'; } function hide(){ timer = setTimeout(function(){ title.style.display = 'none'; }, 200); } }); </script> </head> <body> <div id="qq"></div> <div id="title"></div> </body> </html>