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);
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 );
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();
// 在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">
function show(){
console.log('秋风宝剑孤臣泪');
}
function see(){
console.log('商女不知亡国恨');
}
var btn = document.getElementById("btn");
btn.onclick = show;
btn.onclick = see;
btn.onclick = null;
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);
};
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">
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);
};
$('.wp').onmousemove = function(){
num++;
this.innerHTML = num;
};
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);
};
$('.wp1').oncontextmenu = function(){
console.log('右键');
return false;
};
// $('.wp1').oncontextmenu = null;
document.addEventListener('contextmenu',function(e){
console.log(e);
console.log('两情若是久长时');
e.preventDefault();
});
$('.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">
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');
};
</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>