案例1、点击以li 输出对应的数字
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
//点击以li 输出对应的数字
var oLi = document.querySelectorAll('li');
for (var i = 0; i < oLi.length; i++){
(function (j) {
oLi[j].onclick = function () {
alert(j)
}
}(i))
}
</script>复制代码
案例2、call 和apply
function Compute() {
this.plus = function (a, b) {
console.log(a+b)
}
this.minus = function (a, b) {
console.log(a - b)
}
}
function FullCompute() {
Compute.apply(this) //或者 Compute.call(this)
this.mul = function (a, b) {
console.log(a*b)
}
this.div = function (a, b) {
console.log(a / b)
}
}
var compute = new FullCompute()
compute.plus(1, 2)
compute.mul(1, 2)
compute.div(1, 2)
compute.minus(1, 2)复制代码
案例3、css圣杯模式,圣杯布局
<style>
.clearfix::after{
content: "";
clear: both;
display: block;
}
.wrap{
width: 700px;
margin:0 auto;
border: 1px solid #000;
}
.top, .foot{
height:50px;
background-color: orange;
}
.main{
padding:0 100px;
overflow: hidden;
}
.main .left,
.main .content,
.main .right{
float: left;
background-color: green;
position: relative;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.main .left{
left: -100px;
width: 100px;
}
.main .content{
width:100%;
margin-left: -100px;
background-color: red;
}
.main .right{
left: 100px;
width: 100px;
margin-left: -100px;
}
</style>
<div class="wrap">
<div class="top"></div>
<div class="main clearfix">
<div class="left">123</div>
<div class="content">234<br/>fdsaf</div>
<div class="right">345</div>
</div>
<div class="foot"></div>
</div>复制代码
案例4、call apply
function foo(){
bar.apply(null,arguments);
}
function bar(){
console.log(arguments);
}
foo(1,2,3,4,5); //打印[1,2,3,4,5]
案例5、JS的typeof可能返回的值有哪些?
object(null)/boolean/number/string/undefined/function
案例6
function b(x,y,a){
arguments[2] = 10;
alert(a); //10
a = 10;
alert(arguments[2]); //10
}
b(1,2,3)
案例7、逗号运算
var f = (
function f(){
return '1';
},
function g(){
return 2;
}
);
console.log(typeof(f)) //function 解析:f = (f(),g()),其实f就等于g()
那么
var f = (
function f(){
return '1';
},
function g(){
return 2;
}
)();
console.log(typeof(f)) // number
案例8
console.log(undefined == null) //true
console.log(undefined === null) //false
console.log(isNaN('100')) //false 解析:isNaN会隐式类型转换 var num = Number('100')
console.log(parseInt('1a') == 1 ) //true 解析:parseInt从头看数字,直到看到非数
function isNaN1(num){
var res = Number(num) + '';
if(res == 'NaN){
return true
}else {
return false
}
}
console.log(isNaN1('123)); //false
{} == {} //false 引用值比较的是地址,他们地址不同 如何让他们相等
var obj = {}
var obj1 = obj 这样就相等了
var a = 5;
function test(){
a = 0;
console.log(a);
console.log(this.a);
var a;
console.log(a)
}
test(); //0 5 0
new test() //0 undefined 0
案例9、打印斐波那契数列的第N位/打印一个参数值以内能被3或5或7整除的数
<script>
window.onload = function () {
init();
}
function init() {
console.log(initFb);
console.log(initDiv);
}
var initFb = (function () {
function fb(n) {
if (n <= 0){ return 0; }
if (n <= 2){ return 1; }
return fb(n - 1) + fb(n - 2)
}
return fb
})();
var initDiv = (function () {
function div(n) {
var arr = [];
for (var i = 0; i <= n; i++){
if(i % 3 === 0 || i % 5 ===0 || i % 7 === 0 ){
arr.push(i);
}
}
return arr;
}
return div;
})();
</script>复制代码
案例10、插件标配写法:
;(function () {
var Test = function () {
}
Test.prototype = {}
window.Test = Test;
})();复制代码
案例11、笔试题this指向
var name = '222';
var a = {
name : '111',
say: function () {
console.log(this.name)
}
}
var fun = a.say;
fun(); //222
a.say();//111
var b = {
name: '333',
say: function (fun) {
fun()
}
}
b.say(a.say); //222
b.say = a.say;
b.say() //333复制代码
案例12、GO/AO
a = 1;
function test(e) {
function e() {}
arguments[0] = 2;
console.log(e); //2
if (a){
var b = 3;
}
var c;
a = 4;
var a;
console.log(b); //undefined
f = 5;
console.log(c); //undefined
console.log(a); //4
}
var a;
test(1);
console.log(a); //1
console.log(f); //5复制代码