1.面向对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>面向对象</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
// 字面量创建对象
var obj = {
name: '魏忠贤',
age: 9000
};
// 工厂方法
function creatreObj(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
// constructor
console.log(obj.constructor);
var str = '王振';
console.log(str.constructor);
/*
instanceof 判断某一个对象，是否是某一个构造函数构建出来的，如果是则返回true，如果不是则返回false
基础类型的数据，必须通过构造函数的方式创建，才能在instanceof判断的时候为true
*/
console.log(String);
console.log( str instanceof String );
var num = 100;
console.log(num.constructor);
console.log( num instanceof Number );
console.log( num.constructor == Number );
/*
通过构造函数创建对象
构造函数都是开发中最常用的方法
构造函数：就是专门用来创建和构建对象的函数
工厂方法虽然可以创建一个对象，但是使用的时候没有new，常用声明对象的方法一般都有new
以前见到过的构造函数(js系统的构造函数)
Number()
String()
Object()
Boolean()
Math()
Date()
构造函数的首字母必须大写，用来区分别的函数
*/
function Person(name,age){
// new Object();
this.name = name;
this.age = age;
this.say = function(){
console.log(this.name);
};
// return obj;
}
function Per(){
this.name = name;
this.age = age;
this.say = function(){
console.log(this.name);
};
}
var p = new Person('郑和',56);
p.say();
console.log(p.constructor);
function show(){
console.log(this);
}
show();
new show();
/*
当使用new调用构造函数的时候，构造函数内部会自动创建一个空对象({}),并且使构造函数内部的this指向这个对象，然后再构造函数的最后，自动返回这个对象
new 操作符做了什么？
1.构造函数内部会自动创建一个空对象
2.改变this指向，把this指向当前对象
3.在构造函数的最后返回该对象
*/
// 在js中，构造函数可以看成一个类
function Abc(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.eat = function(){
console.log(this.name+'今年'+this.age+'岁');
};
}
var boy = new Abc('孙悟空',600,'猴');
boy.eat();
</script>
2.事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定</title>
<style type="text/css">
.wp,.wq {
width:200px;
height: 200px;
background: #04BE02;
margin: 0 auto;
}
</style>
</head>
<body>
<button type="button" id="btn">点击</button>
<span οnclick="show()">点击1</span>
<div class="wp"></div>
<button id="btn1">取消事件</button>
<div class="wq"></div>
<button id="btn3">取消ie事件</button>
</body>
</html>
<script type="text/javascript">
/*
接触过的事件
click(单击) scroll(滚动) change(改变) load(加载)
事件的分类
1.鼠标事件
2.键盘事件
3.其他事件(触摸事件，input事件)
事件的绑定方式
1.行间绑定(几乎不用)
2.js绑定(on+事件名)
事件绑定，只能绑定一个执行方法，如果绑定多个，那么后面的会覆盖前面的
通过给事件绑定赋值null，来取消事件绑定
*/
function show(){
console.log('秋风宝剑孤臣泪');
}
function see(){
console.log('商女不知亡国恨');
}
var btn = document.getElementById("btn");
btn.onclick = show;
btn.onclick = see;
btn.onclick = null;
/*
事件监听
obj.addEventListener(参数1，参数2，参数3)
参数1：事件名
参数2：事件的执行函数
参数3：boolean值，默认是false，明确了该事件是在捕获阶段执行还是在冒泡阶段执行，false 代表在冒泡阶段执行，true代表在捕获阶段执行
特性：
1.可以对该元素的此事件绑定多个事件执行函数
2.只支持IE8以上和标准浏览器
取消事件监听
obj.removeEventListener(参数1，参数2，参数3);
参数跟addEventListener必须保持一致，否则无法取消事件监听
*/
var wp = document.querySelector('.wp');
// wp.addEventListener('click',show);
// wp.addEventListener('click',see);
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
wp.removeEventListener('click',show);
wp.removeEventListener('click',see);
};
/*
直接写在第二个参数中的匿名函数，是没有办法移除的
*/
/* wp.addEventListener('click',function(){
console.log('十八新娘八十郎');
}); */
/*
低版本ie的事件监听
IE 6 7 8
obj.attachEvent(参数1，参数2)
参数1：on+事件名
参数2：事件的执行函数
obj.detachEvent(参数1，参数2) 用来取消低版本ie的事件监听
*/
var wq = document.querySelector('.wq');
function juzi(){
console.log('橘子洲头');
}
wq.attachEvent('onclick',juzi);
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
wq.detachEvent('onclick',juzi);
};
</script>
3.监听的兼容写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听的兼容写法</title>
<style type="text/css">
.wp {
width:200px;
height:200px;
background:#04BE02;
margin: 0 auto 50px;
}
</style>
</head>
<body>
<div class="wp"></div>
</body>
</html>
<script type="text/javascript">
// 使用构造函数的方式做兼容
function Tool(obj){
this.obj = obj;
this.addEvent = function(evName,fn){
// 判断浏览器是否支持addEventListener
if(this.obj.addEventListener){
//IE高版本和标准浏览器
this.obj.addEventListener(evName,fn);
}else{
this.obj.attachEvent('on'+evName,fn);
}
};
}
var wp = document.querySelector('.wp');
var t = new Tool(wp);
t.addEvent('click',function(){
alert('尉迟恭');
});
</script>
4.鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style type="text/css">
.wp,.wp1,.wp2 {
width:200px;
height:200px;
background:#04BE02;
margin: 0 auto 50px;
color: #ff0;
font-size:40px;
}
.wp2 {
background: #666;
}
</style>
</head>
<body>
<div class="wp"></div>
<div class="wp1"></div>
<div class="wp2"></div>
</body>
</html>
<script type="text/javascript">
/*
1.mousedown 鼠标按下去的事件
特点：
无论鼠标的哪一个键按下都会触发
2.mouseup 鼠标抬起来的事件
3.click 鼠标单击事件
执行顺序
mousedown -> mouseup -> click
*/
function $(n){
return document.querySelector(n);
}
var num = 0;
$('.wp').onmousedown = function(){
num++;
this.innerHTML = num;
// 解决默认事件
return false;
};
$('.wp').onmouseup = function(){
console.log(num);
};
$('.wp').onclick = function(){
console.log('点击'+num);
};
/*
鼠标移动事件
mousemove
*/
$('.wp').onmousemove = function(){
num++;
this.innerHTML = num;
};
/*
鼠标移入移出事件
mouseenter - mouseleave
mouseover - mouseout
1.同时绑定它们四个事件，首先执行 mouserover - mouseout，然后执行mouseenter - mouseleave
2. mouseenter - mouseleave没有事件冒泡，mouserover - mouseout有事件冒泡
*/
function rand(m,n){
return Math.floor(Math.random()*(n-m+1)+m);
}
function randCol(){
var r = rand(0,255);
var g = rand(0,255);
var b = rand(0,255);
return 'rgb('+r+','+g+','+b+')';
}
$('.wp1').onmouseenter = function(){
this.style.background = randCol();
console.log(1);
};
$('.wp1').onmouseleave = function(){
this.style.background = randCol();
console.log(2);
};
$('.wp1').onmouseover = function(){
this.style.background = randCol();
console.log(3);
};
$('.wp1').onmouseout = function(){
this.style.background = randCol();
console.log(4);
};
/*
鼠标单击右键
contextmenu
*/
$('.wp1').oncontextmenu = function(){
console.log('右键');
return false;
};
// $('.wp1').oncontextmenu = null;
/*
取消默认事件
1.如果通过on绑定的事件，直接在函数的最后添加 return false
2.如果是通过addEventListener方法绑定的事件，return false不能取消默认,通过事件对象的 preventDefault() 方法来取消默认
*/
document.addEventListener('contextmenu',function(e){
console.log(e);
console.log('两情若是久长时');
e.preventDefault();
});
/*
总结：在标准浏览器下，只要函数结合事件进行绑定，那么该函数就会有一个形参，该形参的名字随意定，该参数就是这个事件对象本身
*/
/*
鼠标双击事件
dblclick
1.双击的时候，首先执行单击，再执行双击
2.两者都会执行
*/
$('.wp2').ondblclick = function(){
console.log('双击');
};
$('.wp2').onclick = function(){
console.log('单击');
};
</script>
5.事件冒泡和事件捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡和事件捕获</title>
<style type="text/css">
* {
margin:0;
padding: 0;
}
.wp,.far,.son {
padding:50px;
border:1px #f00 solid;
margin:0 auto;
}
.wp {
width:500px;
height:500px;
background:#04BE02;
}
.far {
background:#ff0;
}
.son {
background:#f0f;
height:300px;
}
</style>
</head>
<body>
<div class="wp">
<div class="far">
<div class="son">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
/*
什么是事件冒泡
1.点击区域有多个元素
2.这些元素都对该事件进行了绑定操作
3.这些元素呈现父子级关系
事件冒泡
最内层的元素最先开始，执行事件绑定的函数，执行完毕以后，冒泡到父级上，查看父级有没有对该事件进行绑定，如果有，就执行父级上绑定的函数，并且向祖父级冒泡，依次往上冒泡，直到冒泡的终止位置，终止位置是document
阻止事件冒泡，使用事件对象的 stopPropagation() 方法
*/
function $(ele){
return document.querySelector(ele);
}
$('.wp').onclick = function(){
console.log('祖父级1');
};
$('.far').onclick = function(){
console.log('父级1');
};
$('.son').onclick = function(event){
console.log('子级1');
// event.stopPropagation();
return false;
};
document.onclick = function(){
console.log('document1');
};
/*
事件捕获
只有通过addEventListener(event,fn,true)才能使事件在捕获阶段执行
从document 一直捕获的事件触发的那个元素上
1.IE8及其以下只有事件冒泡阶段，没有捕获阶段
2.大部分事件都是在冒泡阶段执行，捕获很少使用
3.凡是使用on绑定的事件，都是在冒泡阶段执行
*/
/*
$('.wp').addEventListener('click',function(){
console.log('祖父级');
},true);
$('.far').addEventListener('click',function(){
console.log('父级');
},true);
$('.son').addEventListener('click',function(){
console.log('子级');
},true);
document.addEventListener('click',function(){
console.log('祖先级');
},true);
*/
</script>
6.自定义下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义下拉框</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#select {
width:300px;
height:40px;
border: 1px #ccc solid;
cursor: pointer;
border-radius:4px;
position: relative;
margin:50px auto;
}
#select>span {
display: block;
width:100%;
height:40px;
text-align: center;
line-height:40px;
font-size:20px;
}
#select>ul {
list-style-type: none;
width:300px;
border: 1px #ccc solid;
border-top: none;
position: absolute;
left:-1px;
top:36px;
background:#fff;
display: none;
}
#select>ul>li {
height:30px;
padding-left:12px;
line-height:30px;
}
#select>ul>li:hover {
background:#f60;
color: #fff;
}
</style>
</head>
<body>
<div id="select">
<span>请选择</span>
<ul>
<li>西施</li>
<li>貂蝉</li>
<li>百里玄策</li>
<li>百里守约</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
function $(ele){
return document.querySelector(ele);
}
$('span').onclick = function(e){
$('ul').style.display = 'block';
e.stopPropagation();
};
document.onclick = function(){
$('ul').style.display = 'none';
};
var li = document.querySelectorAll('li');
for(var i=0;i<li.length;i++){
li[i].onclick = function(){
$('span').innerHTML = this.innerHTML;
console.log(i);
};
}
</script>