2.1构造函数和对象
构造就是类
function User([参数]){
this.属性=值;
this.属性=值;
this.方法=function(){
}
}
#实例一个对象
new 构造函数();
如果构造函数没有参数 可以 不加()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类和对象</title>
</head>
<body>
<h1>类(构造函数)和对象</h1>
<script>
//构造函数就是类
//定义一个 构造函数 跟函数 一模一样
function User(name,age){
this.userName=name; //userName相当于创建属性 name和age是传进来的值
this.userAge=age;
//声明一下对象的方法
this.getInfo=function(){
console.log('姓名:'+this.userName+',年龄:'+this.userAge+'<br>')
}
}
//实例化对象
var a =new User('小芳',17);
console.log(a);
//使用对象的属性
console.log(a.userName);
console.log(a.userAge);
//调用对象的方法
a.getInfo();
//一个构造函数(类) 能够实例化成多个对象
var b =new User('小红',18);
</script>
</body>
</html>
2.2 JS原型和原型链
原型
每个对象都有原型(原型仍然是一个对象)
对象可以继承原型的属性和方法
__proto__没有对象都有改属性
原型链
原型作为对象也有原型
原型的原型的原型 就构成了 原型链
使用对象中某个属性的时候，先从对象中找，如果没有，从原型上找，原型如果也没有，继续向上找
直到顶层(顶层的原型对象是一个类型(类)(构造函数)是object的对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型</title>
</head>
<body>
<h1>同志交友</h1>
<hr>
<script>
function User(){ //原型相当于父类
this.name='小丽丽';
}
let u =new User();
console.log(u);
console.log(u.__proto__)
console.log(u.__proto__.__proto__)
console.log(u.__proto__.__proto__.__proto__)
console.log(u.name)
console.log(u.toString);//来自原型
//再定义一个对象 object是系统内置的构造函数
var a=new object();
a.__proto__ =u;
console.log(a)
console.log(a.name)
//__proto__该属性指向该对象的原型
</script>
</body>
</html>
2.3JS对象属性的调用
obj.name
obj.age
[]
obj['name']
obj['age']
obj['user-name']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object</title>
</head>
<body>
<script>
//系统内建的构造函数 Object
var o = new Object();
//创建好对象之后，再给对象添加属性和方法
o.name = '小丽丽';
o.age = 10;
o.getInfo = function(){
console.log(this.name, this.age)
}
console.log(o)
console.log(o.name)
console.log(o.age)
o.getInfo()
var o1 = new Object();
//o1.__proto__ = o;
console.log(o1);
console.log('');
//实例化一个 Object类 的对象 简写
// python的key这里叫属性
var data = {'name':'小丽丽', age:19, address:'上海', getInfo:function(){
console.log('getInfo');
}}; //python的字典
data.grade = '11';
console.log(data.constructor);
console.log(data);
console.log(data.name);
data.getInfo();
//声明对象的时候 属性可以不加引号。 但是有些情况必须要加(属性名)
var content = {
name: '小芳',
age:100,
'user-name':'丽丽',
user_name:'大丽丽'
};
console.log(content);
//调用属性
console.log(content.name)
console.log(content.user_name)
console.log(content['user-name'])
console.log(content['name'])
//所有的属性 都可以通过 [] 调用
var b = 123;
console.log(b['constructor'])
</script>
</body>
</html>
总结语法:类与类之间是不能继承的 对象与对象之间是可以继承的 对象与对象之间继承称之为原类 o1.__proto__=o; //o1的原型是o
constructor到底是什么？就为看一下他的构造函数是怎么样的。
2.4object构造函数
js内建的构造方法叫object
var obj =new object()
josn方式定义对象
var obj={属性:值,属性:值} //new object的简写
object的构造含的是object
3.实用技巧
3.1从页面获取元素
document.getElementById() 根据ID的值 #获取的是元素对象
document.getElementsByTagName() 根据标签名 #多了s说明获取由元素对象组成的类数组对象
document.getElementsByClassName() 根据class的值 #多了s说明获取由元素对象组成的类数组对象
document.getElementsByName() 根据name属性的值 #多了s说明获取由元素对象组成的类数组对象
上述只是作为了解一般用下面这种
document.querySelector(css选择器)
document.querySelectorAll(css选择器)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取页面元素</title>
</head>
<body>
<h1>同志交友</h1>
<hr>
<ul class="news-list">
<li><a href="#">long time no see so i can not say something</a></li>
<li><a href="#">long time no see so i can not say something</a></li>
<li><a href="#">long time no see so i can not say something</a></li>
<li><a href="#">long time no see so i can not say something</a></li>
<li><a href="#">long time no see so i can not say something</a></li>
</ul>
<div id="box"></div>
<script>
var boxEle=document.querySelector('#box');
console.log(boxEle); //这个就是输出元素的特性会把样子进行输出
console.dir(boxEle);
var li=document.querySelector('.news-list li');
console.log(li);
li.innerHTML = '哈哈哈,我是第一个'; //innerHTML重新给标签里面里面赋值
//获取所有li元素
var lis =document.querySelectorAll('.news-list li');
//console.log(lis);
</script>
</body>
</html>
3.2给元素绑定事件
先获取元素
ele.onclick=function(){
}
获取元素的类数组对象，遍历挨个给每个元素绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给元素绑定事件</title>
<style>
.list{
list-style: none;
padding: 0;
margin: 0;
600px;
}
.list li{
padding: 10px;
margin: 5px 0px;
border: 1px solid red;
}
#btn {
border: 1px solid #ccc;
padding: 10px 20px;
background: #f5f5f5
}
</style>
</head>
<body>
<h1>同志交友</h1>
<hr>
<button id="btn">点我</button>
<ul class="list">
<li>long time no see i can say no</li>
<li>long time no see i can say no</li>
<li>long time no see i can say no</li>
<li>long time no see i can say no</li>
<li>long time no see i can say no</li>
<li>long time no see i can say no</li>
</ul>
<script>
//要给btn绑定元素
var btn=document.querySelector('#btn');
//绑定事件
btn.onclick=function() {
this.innerHTML='好疼';
}
//给每个li元素都绑定事件
var lis=document.querySelectorAll('.list li')
//遍历，给每个元素绑定事件
for (let i=0;i<lis.length; i++){ //循环8次就不是全局的了 let是局部的不是全局的
lis[i].onclick=function(){
//this表示 目前点的这个元素
this.innerHTML='我被点了'; //var和let
// lis[i].innerHTML='我被点了' //被点的话lis[8] for循环早执行完了
}
}
</script>
</body>
</html>
前端element神器 谷歌浏览器