一、对象的概念
建议回复：
对象是一个整体，对外提供一些功能.
一切具有属性和方法的事物.
一切具有本质特征和行为的物质.
数据类型：
所有的基本数据类型都没有属性和方法.
所有的对象数据类型都有属性和方法.
函数和方法的区别：
方法属于函数，函数包含方法. 比如dancer是一个未婚男士，那他就是一个函数，人人都可以约他（调用），但是如果他结婚了，就是某个对象的方法了，只有他的对象能调用他。
二、类的概念
建议回复：
类是具有相同本质特征的一类事物的总称。js中的类 --- 构造函数
类和对象的区别：
css
html
css
html
code
code
code
code
类是对象的抽象 对象是类的实例（类是对象的抽象化，对象是类的具象化）.
先有对象，根据一类对象的共同特征抽象出类的概念.
三、面向对象
建议回复：
面向对象编程：是一种编程思想。
面向对象语言有：java、c++、.net、php等等。
面向过程语言有：c语言。
四、创建对象
创建对象的基本创建方式有两种：
第一种：
var obj = new Object();//定义对象 obj.name = "dancer"; //定义对象属性 obj.age = 12;//定义对象属性 obj.walk = function(){ //定义对象的方法 alert("dancer run almost every day!"); } alert( obj.name ); obj.walk();
第二种：
var car = { "name":"福特汽车", "color":"白色", "price":"15W", "description":function(){ return `这是一辆${this.color}颜色,价格为${this.price}的${this.name} `; }, "running":function(){ return "汽车缓慢形式在人行道上"; } }; alert( car.description() );
注：上述第二种方式创建对象时格式与json格式的区别：严格的json对象只有属性，没有方法。
上述方式创建同类对象时，会产生重复的代码。所以来看下以下创建对象的方式：
（1）工厂模式
//模具 function createObj(name,tel){ //备料 --- 创建对象 var obj = new Object(); //加工 --- 为对象添加属性和方法 obj.name = name; obj.tel = tel; obj.say = function(){ return "hello，dancer"; } //出厂 --- 将创建的对象返回 return obj; } var obj1 = createObj("dancer1","999"); var obj2 = createObj("dancer2","120"); alert( obj1.name ); alert( obj2.name ); alert( obj1.say());
优点：工厂模式可以解决同类对象创建时 重复代码 写多次的问题
缺点：
不能确定某个对象属于哪一个类
一般一个对象是通过new关键字构造出来的，而工厂模式只是一个普通的函数的调用，不符合对象的创建规范。
（2）构造函数（面向对象中的类）
构造函数中的属性 叫做 实例属性
构造函数中的方法 叫做 实例方法
为了和普通函数区分，一般构造函数的命名规范是： 大驼峰 QianFengJiaoYu
基本上所有的对象都是通过构造函数创建出来的
构造函数中的this 指向的是 构造函数执行时创建出来的那个对象。
//定义一个构造函数 function Animal(name,age,food){ //构造函数中的this 指向的是 构造函数执行时创建出来的那个对象。 this.name = name; this.age = age; this.food = food; this.eat = function(){ return this.name + "正在吃" + this.food; } } var animal = new Animal("小白",2,"骨头"); var animal2 = new Animal("小黑",1,"肉"); alert( animal2.eat() ); //方法被重复创建 空间不共享 alert( animal.eat == animal2.eat );//false
优点：解决了工厂模式中存在的缺点，可以通过构造函数方式 确定 某个对象属于哪一个类
缺点：同类对象创建时，相同方法会重复创建，空间不共享
（3）原型 prototype
写在原型函数中的属性叫做 原型属性
写在原型函数中的方法叫做 原型方法
function Student(){ } Student.prototype.name = "dancer"; //原型属性 Student.prototype.age = 18; Student.prototype.study = function(){//原型方法 return "dancer在学习"; } var stu = new Student(); var stu2 = new Student(); alert(stu.name);//dancer alert(stu2.name);//dancer alert( stu.study() ); alert( stu.study == stu2.study );//true
优点：解决了相同对象创建时方法重建的问题
缺点：多个对象的属性值相同 ， 不能更改
（4）混合
将属性写成构造函数的实例属性
将方法写成构造函数的原型方法
function Teacher(name,salary){ this.name = name; //实例属性 this.salary = salary; } Teacher.prototype.teach = function(){//原型方法 return "dancer在讲课...."; } Teacher.prototype.eat = function(){ return "dancer在吃冰激凌...."; } var t = new Teacher("dancer",1000); alert( t.name ); alert( t.eat() );
下面来看看几个用面向过程和面向对象做的几个案例：
案例一：选项卡
面向过程的思想：
<style> *{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;} #container{ width: 398px; margin: 100px auto;} #container a{ display:block ; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #FF4400; border-bottom: solid 1px #FF4400; border-left: solid 1px #FF4400; color: #333333; text-decoration: none; } #container a:hover{ color: #FF4400; } .content{ width: 355px; height: 140px; text-align: center; border-right: solid 1px #FF4400; border-bottom: solid 1px #FF4400; border-left: solid 1px #FF4400; padding: 30px 0 0 40px; display: none; } .clear{clear: left;} #container a.on{ background: #FF4400; color: #fff;} </style>
<body> <div id="container"> <a href="#" class="on">充话费</a> <a href="#">充流量</a> <a href="#">充固话</a> <a href="#" style="border-right: solid 1px #FF4400;">充宽带</a> <div class="clear"></div> <div class="content" style="display:block;"> <img src="imgs/1.png" /> </div> <div class="content"> <img src="imgs/2.png" /> </div> <div class="content"> <img src="imgs/3.png" /> </div> <div class="content"> <img src="imgs/4.png" /> </div> </div> </body>
<script>
var as=document.getElementsByTagName("a");
var oDivs=document.getElementsByClassName("content");
for(var i=0;i<as.length;i++){
as[i].index=i;
as[i].onclick=function(){
// 方法一:
// for(var j=0;j<as.length;j++){
// if(this==as[j]){
// this.className="on";
// oDivs[j].style.display="block";
// }else{
// as[j].className="";
// oDivs[j].style.display="none";
// }
// }
// 法二:
//通过循环的方式将所有的标题清除样式，所有的内容隐藏
for(var j=0;j<as.length;j++){
as[j].className="";
oDivs[j].style.display="none";
}
//留下自己
this.className="on";
oDivs[this.index].style.display="block";
}
}
</script>
面向对象的思想
<style> .box { width: 400px; margin:100px auto; border:1px solid #ccc; } .top button.purple { background-color: purple; } .bottom div{ width:100%; height: 300px; background-color: pink; display: none; } .bottom div.show{ display:block; } </style>
<body> <div class="box"> <div class="top" id="top"> <button class="purple">第一个</button> <button>第二个</button> <button>第三个</button> <button>第四个</button> <button>第五个</button> </div> <div class="bottom" id="divs"> <div class="show">1好盒子</div> <div>2好盒子</div> <div>3好盒子</div> <div>4好盒子</div> <div>5好盒子</div> </div> </div> </body>
<script>
function $(id){
return document.getElementById(id);
}
//功能选项卡
function Tab(btns,divs){
this.btns = btns;//实例属性
this.divs = divs;//实例属性
}
//清空所有按钮的背景色
Tab.prototype.clearColor = function(){//原型方法
for(var i = 0 ; i < this.btns.length ; i++){
this.btns[i].className = "";
}
}
//清空所有盒子的内容
Tab.prototype.clearContent = function(){
for(var i = 0 ; i < this.divs.length ; i++){
this.divs[i].className = "";
}
}
//初始化方法
Tab.prototype.init = function(){
var that = this;
for(var i = 0 ; i < this.btns.length ; i++){
this.btns[i].index = i;
this.btns[i].onmouseover = function(){
that.clearColor();//清空所有按钮背景颜色
this.className = "purple";// 留下当前操作按钮的背景颜色
that.clearContent();//隐藏所有内容盒子
that.divs[ this.index ].className = "show";//显示当前操作的按钮对应的内容
}
}
}
//构造函数中的this 指向的是 构造函数new出来的对象
//任何对象都有自己的属性和方法
//事件中的this指向的是当前事件的触发者（一般这个触发者是html元素）<img src=""> 定时器中的this指向的是window
//事件中(或定时器中)如果用到构造函数new出来的对象的属性和方法时，一定要改变this指向
var tab = new Tab($("top").children,$("divs").children);
tab.init();
</script>
案例二：隔行变色高亮显示
面向过程的思想：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <table width="400" border=1> 9 <tr> 10 <td>10</td> 11 <td>10</td> 12 <td>10</td> 13 <td>10</td> 14 <td>10</td> 15 <td>10</td> 16 </tr> 17 <tr> 18 <td>10</td> 19 <td>10</td> 20 <td>10</td> 21 <td>10</td> 22 <td>10</td> 23 <td>10</td> 24 </tr> 25 <tr> 26 <td>10</td> 27 <td>10</td> 28 <td>10</td> 29 <td>10</td> 30 <td>10</td> 31 <td>10</td> 32 </tr> 33 <tr> 34 <td>10</td> 35 <td>10</td> 36 <td>10</td> 37 <td>10</td> 38 <td>10</td> 39 <td>10</td> 40 </tr> 41 <tr> 42 <td>10</td> 43 <td>10</td> 44 <td>10</td> 45 <td>10</td> 46 <td>10</td> 47 <td>10</td> 48 </tr> 49 </table> 50 </body> 51 </html> 52 <script> 53 // 找到所有的tr ， 通过tr[下标] 操作某一个行 54 var oTrs = document.getElementsByTagName("tr"); 55 for(var i = 0 ; i < 5; i++){ 56 //页面加载隔行变色 57 if( i%2==0 ){ 58 oTrs[i].style.backgroundColor = "pink"; 59 }else{ 60 oTrs[i].style.backgroundColor = "teal"; 61 } 62 63 //鼠标移入 高亮 64 oTrs[i].onmouseover = function(){ 65 //用一个变量记录当前行的颜色 66 color = this.style.backgroundColor; 67 68 this.style.backgroundColor = "gray"; 69 } 70 //鼠标移出 颜色恢复 71 oTrs[i].onmouseout = function(){ 72 this.style.backgroundColor = color; 73 } 74 } 75 </script>
面向对象的思想：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul> 9 <li>兄弟多个1</li> 10 <li>兄弟多个2</li> 11 <li>兄弟多个3</li> 12 <li>兄弟多个4</li> 13 <li>兄弟多个5</li> 14 </ul> 15 </body> 16 </html> 17 <script type="text/javascript"> 18 /* 19 页面加载 隔行变色 20 鼠标事件 操作颜色 21 22 23 构造函数： 24 功能： 设置颜色 25 属性： lis 26 */ 27 function HighLight(list){ 28 this.list = list; 29 } 30 HighLight.prototype.setColor = function(obj,color){ 31 obj.style.backgroundColor = color; 32 } 33 34 HighLight.prototype.init = function(){ 35 var that = this; 36 for (var i = 0 ; i < this.list.length ; i ++) { 37 if( i%2 == 0 ){ 38 this.setColor(this.list[i],"gray") 39 }else{ 40 this.setColor(this.list[i],"teal") 41 } 42 this.list[i].onmouseover = function(){ 43 //动态为new出来的对象 添加一个color属性 44 that.color = this.style.backgroundColor; 45 that.setColor(this,"pink"); 46 } 47 this.list[i].onmouseout = function(){ 48 that.setColor(this,that.color); 49 } 50 } 51 } 52 var high = new HighLight( document.getElementsByTagName("li") ); 53 high.init(); 54 </script>
案例三：二级下拉菜单
html实现：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>二级导航划过效果</title> <style tyle="text/css"> *{ margin:0; padding:0; } body{ font-family:"微软雅黑"; } a{ text-decoration:none; } ul li{ list-style:none; } .nav{ width:600px; height:35px; margin:0 auto; background:blue; } .nav li{ width:100px; height:35px; line-height:35px; text-align:center; float:left; position:relative; } .nav li a{ color:white; display:block; width:100px; height:35px; } .second_nav{ display:none; background:gray; position:absolute; top:35px; left:0; font-size:14px; } .nav li:hover .second_nav{ display:block; } .nav li:hover .firstA{ background:green; } .nav li .second_nav a:hover{ background-color:red; } </style> </head> <body> <ul class="nav"> <li> <a href="#" class="firstA">首页</a> <div class="second_nav"> </div> </li> <li> <a href="#" class="firstA">课程</a> <div class="second_nav"> <a href="#">UI设计</a> <a href="#">PHP设计</a> <a href="#">iOS设计</a> <a href="#">WEB前端设计</a> </div> </li> <li> <a href="#" class="firstA">频道</a> <div class="second_nav"> <a href="#">新闻频道</a> <a href="#">体育频道</a> <a href="#">音乐频道</a> </div> </li> <li> <a href="#" class="firstA">讲师团队</a> <div class="second_nav"> <a href="#">UI讲师</a> <a href="#">PHP布道师</a> <a href="#">HTML5讲师</a> </div> </li> <li> <a href="#" class="firstA">城市</a> <div class="second_nav"> <a href="#">中国北京</a> <a href="#">法国巴黎</a> <a href="#">英国伦敦</a> <a href="#">韩国首尔</a> </div> </li> <li> <a href="#" class="firstA">联系我们</a> <div class="second_nav"> </div> </li> </ul> </body> </html>
面向对象的思想：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> *{ padding:0; margin:0; list-style:none;} .all{ width:330px; height:30px; background:url(img/bg.jpg) no-repeat; margin:100px auto; line-height:30px; text-align:center; padding-left:10px; margin-bottom:0;} .all ul li{ width:100px; height:30px; background:url(img/libg.jpg); float:left; margin-right:10px; position:relative; cursor:pointer;} .all ul ul{ position:absolute; left:0; top:30px; display:none;} </style> </head> <body> <div class="all" > <ul id="list"> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> </div> </body> </html> <script> /* 下拉菜单 --- 功能写成构造函数 功能中操作的对 象 --- 构造函数的属性 操作的 对象 一级li 功能中操作的方法 --- 构造函数的方法 显示 、 隐藏 */ function List(lis){ //一级的li对象 this.list = lis; } //显示 List.prototype.show = function(obj){ obj.style.display = "block"; } //隐藏 List.prototype.hide = function(obj){ obj.style.display = "none"; } //初始化方法 List.prototype.init = function(){ var that = this; for(var i = 0 ; i < this.list.length ; i++){ this.list[i].onmouseover = function(){ //事件中的this指向的是 事件的触发者 //显示 that.show(this.children[0]); } this.list[i].onmouseout = function(){ //隐藏 that.hide(this.children[0]); } } } var objList = new List( document.getElementById("list").children ); objList.init(); </script>
面向对象的一些知识点就这样吧 最后再来一个用面向对象实现的关于拖拽的案例就结束这篇了，关于实现拖拽用到的知识点，以后也会陆续专门写出来......
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value = '创建div' id="btn" /> </body> </html> <script type="text/javascript"> var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var dd = new DragDiv(100,100); dd.createDiv(); } function DragDiv(w,h){ this.w = w; this.h = h; } //创建div方法 DragDiv.prototype.createDiv = function(){ this.oDiv = document.createElement("div"); this.oDiv.style.width = this.w + "px"; this.oDiv.style.height = this.h + "px"; this.oDiv.style.background ="red"; this.oDiv.style.position = "absolute"; this.oDiv.style.left = this.rand(10,900) +"px"; this.oDiv.style.top = this.rand(10,700) +"px"; document.body.appendChild(this.oDiv); this.drag(); } //随机方法 DragDiv.prototype.rand = function(min,max){ return Math.floor(Math.random()*(max-min+1)) + min; } //拖拽 DragDiv.prototype.drag = function(){ var that = this; this.oDiv.onmousedown = function(e){ var e = e || event; var rex = e.offsetX; var rey = e.offsetY; document.onmousemove = function(e){ var e = e || event; var x = e.clientX - rex; var y = e.clientY - rey; that.oDiv.style.left = x + "px"; that.oDiv.style.top = y + "px"; } } document.onmouseup = function(){ document.onmousemove = ""; } } </script>