1.js闭包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js闭包</title>
<script type="text/javascript">
<!--函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制回收-->
// function aa(b) {
// var a=12;
// function bb() {
// alert(a);
//
// alert(b);
// }
// return bb;
// }
// var cc=aa(24);
// cc();
// 封闭函数
// var cc=(function (b) {
// var a=12;
// function bb(){
// alert(a);
// alert(b);
// }
// return bb;
// })(24);
// 闭包的作用
// 1.将一个变量长期驻扎在内存之中,可用于循环中存索引值
window.onload=function () {
var aLi=document.getElementsByTagName('li');
alert(aLi.length);
for (var i=0;i<aLi.length;i++){
(function (i) {
aLi[i].onclick=function () {
alert(i);
}
})(i);
}
}
// 2.私有变量计数器,外部无法访问,避免全局变量的污染
var count=(function () {
var a=1;
function bb() {
a++;
return a;
}
return bb;
})();
alert(count());
alert(count());
</script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
2.内置对象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js跳转到源页面</title>
<script type="text/javascript">
// //跳转到源页面,referer
// var backurl1=document.referrer;
//
// //处理中间的登录逻辑
//
// //获取或者重定url地址
// window.location.href=backurl1;
//获取地址栏参数
window.onload=function () {
var Data=window.location.search;
var hash=window.location.hash;
var oSpan=document.getElementById('span01');
var arr=Data.split('=');
var name=arr[1];
oSpan.innerHTML=name;
alert(hash);
};
</script>
</head>
<body>
<div id="div1">欢迎<span id="span01"></span>访问!</div>
</body>
</html>
3.js闭包做选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js闭包做选项卡</title>
<style type="text/css">
.btns{
width: 500px;
height: 50px;
}
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;
color: #ffffff;
}
.btns input.cur{
background-color: gold;
}
.contents div{
width: 500px;
height: 300px;
display: none;
line-height: 300px;
text-align: center;
background-color: gold;
}
.contents .active{
display: block;
}
</style>
<script type="text/javascript">
window.onload=function () {
var aBtns=document.getElementById('btns').getElementsByTagName('input');
var aCon=document.getElementById('contents').getElementsByTagName('div');
for (var i=0;i<aBtns.length;i++){
(function (i) {
aBtns[i].onclick=function () {
for (var j=0;j<aBtns.length;j++){
aBtns[j].className='';
aCon[j].className='';
}
this.className='cur';
aCon[i].className='active';
}
})(i);
}
}
</script>
</head>
<body>
<div class="btns" id="btns">
<input type="button" value="tab01" class="cur">
<input type="button" value="tab02">
<input type="button" value="tab03">
</div>
<div class="contents" id="contents">
<div class="active">tab文字内容1</div>
<div>tab文字内容2</div>
<div>tab文字内容3</div>
</div>
</body>
</html>
4.js创建对象的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js面向对象-创建对象的方式</title>
<script type="text/javascript">
// <!--单体-->
// var Tom={
// name:'tom',
// age:18,
// showname:function () {
// alert(this.name);
// },
// showage:function () {
// alert(this.age);
// }
// }
// // 工厂模式
// function Person(name, age, job) {
// var o={};
// o.name=name;
// o.age=age;
// o.job=job;
//
// o.showname=function () {
// alert(this.name);
// }
// o.showage=function () {
// alert(this.age);
// }
// o.showjob=function () {
// alert(this.job);
// }
//
//
// return o;
// }
// var jack=Person('jack','21','程序员');
// alert(jack.job);
// // 构造函数创建
// function Person(name, age,job) {
// this.name=name;
// this.age=age;
// this.job=job;
//
// this.showname=function () {
// alert(this.name);
// }
//
// this.showage=function () {
// alert(this.age);
// }
// this.showjob=function () {
// alert(this.job);
// }
//
// return this;
// }
//
// var rose=new Person('rose',20,'程序员');
// rose.showage();
// // 原型模式prototype属性
// function Person(name, age, job) {
// this.name=name;
// this.age=age;
// this.job=job;
// }
//
// Person.prototype.showname=function () {
// alert(this.name);
// };
// Person.prototype.showname=function () {
// alert(this.name);
// };
// Person.prototype.showname=function () {
// alert(this.name);
// };
//
// var tom=new Person('tom',19,"engine");
// tom.showname();
//
// var jack=new Person('jack',18,'java');
// jack.showname();
//
// alert(tom.showname()==jack.showname());
//
// // 继承
// function Fclass(name, age) {
// this.name=name;
// this.age=age;
// }
//
// Fclass.prototype.showname=function () {
// alert(this.name);
// }
//
// Fclass.prototype.showage=function () {
// alert(this.age);
// }
//
// function Sclass(name,age,job) {
// //call改变对象,继承父类的属性或者使用apply
// Fclass.call(this,name,age);
// this.job=job;
// }
// //继承父类的方法,将父类的一个实例赋值给子类的原型属性
// Sclass.prototype=new Fclass();
//
// Sclass.prototype.showjob=function () {
// alert(this.job);
// }
</script>
</head>
<body>
</body>
</html>