01-面向对象
01-demo.html
<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="gbk">
<meta name="Author" content="潭州学院-阿飞老师">
<style type='text/css'>
*{ margin:0; padding:0; font-family:'Microsoft yahei';}
</style>
</head>
<body>
<script type="text/javascript">
/*
面向过程
面向对象：
是一种开发模式
所有的东西都从对象的角度出发
继承
*/
/*
new Image(); new Date();
new Array();
new XMLHttpRequest();
new RegExp();
*/
var obj1 = new Object();
obj1.name = '阿飞';
obj1.showName = function(){
alert( this.name );
};
var obj2 = new Object();
obj2.name = '安安';
obj2.showName = function(){
alert( this.name );
};
var obj3 = new Object();
obj3.name = '尼古拉斯';
obj3.showName = function(){
alert( this.name );
};
var obj4 = new Object();
obj4.name = 'inn';
obj4.showName = function(){
alert( this.name );
};
function person( name ){
var obj = new Object();
obj.name = name;
obj.showName = function(){
alert( this.name );
};
return obj;
};
var obj1 = person('阿飞');
var obj2 = person('安安');
var obj3 = person('尼古拉斯');
var obj4 = person('inn');
obj2.showName(); // 调用面向对象中的方法
/*
a();
function a(){
alert( this );
};
*/
</script>
</body>
</html>
02- new关键字
02-demo.html
<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="gbk">
<meta name="Author" content="潭州学院-阿飞老师">
<style type='text/css'>
*{ margin:0; padding:0; font-family:'Microsoft yahei';}
</style>
<script type="text/javascript" src='http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js'></script>
</head>
<body>
<script>
/*
在函数执行前面加new关键字 :
1.函数的内部会自动产生一个新对象；
2.函数内部的this指向这个对象；
3.函数默认返回这个对象
*/
/*
alert( new goudan().name ); //new goudan()返回一个对象
function goudan(){
//alert( this );
this.name = '1'
};
*/
//构造函数 工厂模式(构造函数作为封装函数可构造(new)多个对象)
function Person( name ){
//产生新对象，this -> 对象
this.name = name; //构造函数内this指针指向返回的对象
this.showName = function(){
alert( this.name );
};
//默认返回这个对象
};
var obj1 = new Person('阿飞');
var obj2 = new Person('安安');
var obj3 = new Person('尼古拉斯');
var obj4 = new Person('inn');
obj3.showName();
function person( name ){
var obj = new Object(); //构造函数内不用new一个新对象
//为减少代码以减少存储内存,用this指针
//作简化
obj.name = name;
obj.showName = function(){
alert( this.name );
};
return obj;
};
var obj1 = person('阿飞');
var obj2 = person('安安');
var obj3 = person('尼古拉斯');
var obj4 = person('inn');
obj2.showName();
</script>
</body>
</html>
03-原型
03-demo.html
<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="gbk">
<meta name="Author" content="潭州学院-阿飞老师">
<style type='text/css'>
*{ margin:0; padding:0; font-family:'Microsoft yahei';}
</style>
</head>
<body>
<script>
/*
原型：prototype
只有构造函数有原型 构造函数.prototype
在写面向对象的时候注意：
私有的属性/方法，放在构造函数里面
公共的属性/方法，放在原型里面
*/
function Person( name ){
this.name = name;
};
Person.prototype.showName = function(){
alert( this.name );
};
var obj1 = new Person('阿飞');
var obj2 = new Person('anan');
var obj3 = new Person('尼古拉斯');
var obj4 = new Person('inn');
//obj4.showGoudan();
alert( obj1.name == obj2.name ); //false 对象私有属性
alert( obj1.showName == obj2.showName ); //true 对象公有属性方法是一样的
/*
* 未使用原型prototype的面向对象
* 构造函数内只能设置私有属性方法
*
* */
function Person(name){
this.name = name;
this.showName = function () {
alert(this.name)
}
}
var obj1 = new Person('chung');
var obj2 = new Person('kris');
alert( obj1.name == obj2.name ); //false
alert( obj1.showName == obj2.showName);
// false 未用原型定义的公有属性, 私有属性方法即使功能一样也不是同一方法,
// 就像小明家的拖把和小华家的拖把，类型功能一样，但并不是同一物件
// 原型设置的公有属性即小明小华两家共用一把拖把
</script>
</body>
</html>
04- JS 中 = 的意义
04-demo.html
<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="gbk">
<meta name="Author" content="潭州学院-阿飞老师">
<style type='text/css'>
*{ margin:0; padding:0; font-family:'Microsoft yahei';}
</style>
</head>
<body>
<script>
/*
= : (JS中=有两种定义)
1.赋值 基础数据类型
2.引用 对象/函数
赋值，即将一个变量值赋值给另一个变量，基础数据类型
两个变量的更改互不影响
引用,当变量是对象或者函数时，=即引用的意思，另一个
变量引用目标变量，另一个变量改变也会是目标变量做出
相应改变
*/
var a = 10;
var b = 10;
var a = [1,2,3];
var b = [1,2,3];
alert( a == b ); //false : a与b 类似，但内存地址不同，不等
var a = [1,2,3];
var b = a;
b = [1,2,3,4];
alert( b ); // [1,2,3,4] b未做出更新，不影响其引用的a
alert( a ); // [1,2,3]
var a = [1,2,3];
var b = a;
b.push(4);
alert( b ); //[1,2,3,4] b引用a b做出更新直接改变a的值
alert( a ); //[1,2,3,4]
// alert() 内a++ 与 ++a的不同
var a = 1;
a++;// var b = a; a = a + 1;
++a;// a = a + 1; var b = a;
alert( a ); //2 2
alert(a++); //1
alert(++a); //2
</script>
</body>
</html>
面向对象写轮播
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
li{list-style: none}
#wrap{
width:974px;
height:563px;
margin:50px auto;
position: relative;
}
#wrap .pic li{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
#wrap .pic li img{
width:100%;
height:100%;
display: none;
}
#wrap .tab li{
width:11px;
height:11px;
border-radius: 100%;
border:1px solid lightseagreen;
background:#fff;
float: left;
margin-left:8px;
cursor: pointer;
}
#wrap .tab li.on{
background:rgba(0,0,0,.5);
}
#wrap .tab{
width:110px;
height:20px;
position:absolute;
bottom: 20px;
left:45%;
}
</style>
</head>
<body>
<div id="wrap">
<ul class="pic">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
</ul>
<ul class="tab">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
/*
*
* 面向对象写轮播图
* 1.获取元素标签为需求操作
* 2.定义需要用到的变量为面向对象私有属性
* 3.轮播图代码身体部分定义为面向对象公有属性，方便项目不同地方构造对象直接调用
* 此过程为面向对象的构造函数的封装
*
*
* */
function Banner( img , tab , wrap , btn){ // 形参可设置多个,根据需求获取元素标签
// 定义对象私有属性-定义获取元素标签
this.oPli = img;
this.oTli = tab;
this.oWrap = wrap;
this.oBtn = btn;
// 定义对象私有属性-定义需要用到的变量
this.length = this.oTli.length;
this.timer = null;
this.index = 0;
}
// 定义对象公有属性
Banner.prototype.init = function () {
this.oPli[0].style.display = 'block';
this.oTli[0].className = 'on';
for( var i=0;i<this.length;i++ ){
//获取点击之前的li下标值
this.oTli[i].index = i;
var This = this;
this.oTli[i].onclick = function(){
var clickThis = this;
This.change(function(){
This.index = clickThis.index;
});
};
};
// 定时器部分
this.auto();
// 鼠标划入清除定时器
this.oWrap.onmouseenter = function(){
clearInterval(This.timer);
};
this.oWrap.onmouseleave = function(){
This.auto();
};
};
// 定义一个自主轮播公用属性
Banner.prototype.auto = function () {
var This = this;
this.timer = setInterval(function(){
// 方法内调用对象的方法或者变量需要定义this指针的确定位置
This.change(function(){
This.index++;
This.index %= This.length;
});
},3000);
};
// 定义一个change方法的公有属性
Banner.prototype.change = function( fn ){
this.oPli[this.index].style.display = 'none';
this.oTli[this.index].className = '';
fn&&fn();
this.oPli[this.index].style.display = 'block';
this.oTli[this.index].className = 'on';
};
// 对象模型写好后，获取元素标签并进行构造对象
var oPli = document.getElementsByClassName('pic')[0].getElementsByTagName('img');
var oTli = document.getElementsByClassName('tab')[0].getElementsByTagName('li');
var oWrap = document.getElementById('wrap');
var banner1 = new Banner( oPli , oTli , oWrap );
banner1.init();
#########################################################################################################
#########################################################################################################
#########################################################################################################
/*
* 面向过程写轮播
*
*
*
* */
var oPli = document.getElementsByClassName('pic')[0].getElementsByTagName('img');
var oTli = document.getElementsByClassName('tab')[0].getElementsByTagName('li');
var oWrap = document.getElementById('wrap');
var index = 0;
var timer;
var length = oTli.length;
//初始化轮播图
oPli[0].style.display = 'block';
oTli[0].className = 'on';
for( var i=0;i<length;i++ ){
// 定义属性index 初始化值为i
oTli[i].index = i;
oTli[i].onclick = function () {
var This = this;
change( function(){
index = This.index;
} )
}
}
function change( fn ){
oPli[index].style.display = 'none';
oTli[index].className = '';
fn&&fn();
oPli[index].style.display = 'block';
oTli[index].className = 'on';
}
//定时器部分
auto();
function auto(){
timer = setInterval(function(){
change( function(){
index ++;
index %= length;
} );
},3000);
}
// 处理鼠标划入清除定时器函数
oWrap.onmouseenter = function () {
clearInterval(timer);
};
oWrap.onmouseleave = function(){
auto();
};
</script>
</body>
</html>