![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：js中的对象是个另类, 理解有难度, 加油
Collection
Collection
练习javascript面向对象的基本使用、初步了解jquery基础知识
练习课堂知识：
1、感觉js的面向对象都是基于prototype的属性实现，而且写法非常多且怪异，继承问题看不懂。ES6之后又包装出class关键字，至少写法上感觉正常了不少。对初学者造成的困惑是：实际应用中，哪些场景用类来实现？该用什么语法来写？
2、jq初步知道选择器的语法形式，CSS样式的动态修改。
练习代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../static/jquery-3.4.1.js"></script>
<title>js 面向对象</title>
</head>
<body>
<div id="div1" class="div1" style="background: red;width:100%;height:50px;"></div>
<p id="p1" class="p1" style="background: green;width:100%;height:50px;"></p>
<button onclick="change_color_div()">改变DIV颜色</button>
<script>
var res = document.getElementById('p1');
var res = document.getElementsByClassName('p1');
console.log(res);
var val = 3;
function func() {
// val = 5;
var val = 5;
}
func();
// alert(val);
//----------------------------------------------------------------
var obj = new Object();
obj.rand = function() {
console.log(Math.random());
}
obj.rand();
obj.name = 'PHP';
console.log(obj.name);
obj.sum = function(num1, num2) {
return num1 + num2;
}
console.log(obj.sum(2, 3));
//----------------------------------------------------------------
var obj = {};
obj.name = 'php';
console.log(obj.name);
obj.rand = function() {
console.log(Math.random());
}
obj.rand();
///----------------------------------------------------------------
var obj3 = {
name: 'javascript',
rand: function() {
console.log(Math.random());
},
sun: function(num1, num2) {
return num1 + num2;
}
};
obj3.abc = 'new add';
alert(obj3.abc);
//----------------------------------------------------------------
var obj = {
table: 'test',
find: function() {
return this.table;
},
where: function() {
return this;
}
};
var obj2 = obj;
obj2.table = 'this is obj2.table';
console.log(obj2.where().find());
console.log(obj.where().find());
//----------------------------------------------------------------
//使用function也可以实现类
function User() {
this.name = 'Function实现类';
this.getName = function() {
return this.name;
}
this.rand = function() {
console.log(Math.random());
}
}
var user = new User;
// alert(user.name);
// alert(user.getName());
user.rand();
//-----------------------------------------------------------------
//使用prototype关键字和this关键字实现
function ObjClass(name) {
this.name = name;
this.age = 18;
}
ObjClass.prototype = {
getName: function() {
return this.name;
}
}
var obj5 = new ObjClass('西门老师');
alert(obj5.getName());
//-----------------------------------------------------------------
User2 = {
name: '西门老师',
getName: function() {
return this.name;
}
}
var user3 = Object.create(User2);
alert(user3.getName());
//----------------------------------------------------------------
//使用prototype实现继承；
function extend(Sub, Sup) {
var F = function() {
}
F.prototype = Sup.prototype;
Sub.prototype = new F();
Sub.prototype.constructor = Sub;
Sub.sup = Sup.prototype;
if (Sup.prototype.constructor === Object.prototype.constructor) {
Sup.prototype.constructor = Sup;
}
}
//----------------------------------------------------------------
// 工厂模式
function Person(name, age, job) {
var O = new Object();
O.name = name;
O.age = age;
O.job = job;
O.sayName = function() {
alert(this.name);
};
return O;
}
var person1 = Person('Nacy', 28, 'Engineer');
var person2 = Person('Victor', 25, "Doctor");
//-----------------------------------------------------------------
//组合使用构造函数模式和原型模式（最常用）
function Parent(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ['aa', 'bb'];
}
Parent.prototype = {
constructor: Parent,
sayName: function() {
alert(this.name);
}
}
var son1 = new Parent('AAA', 18, 'AAAJob');
var son2 = new Parent('BBB', 20, 'BBBJob');
son1.friends.push('cc');
alert(son1.friends);
alert(son2.friends);
//---------------------------------------------------------------------------
// 封装DOM查询的原型链继承的例子
function Elem(id) {
this.elem = document.getElementById(id);
}
Elem.prototype.html = function(val) {
var elem = this.elem;
if (val) {
elem.innerHTML = val;
return this; // 链式操作
} else {
return elem.innerHTML;
}
}
Elem.prototype.on = function(type, fn) {
var elem = this.elem;
elem.addEventListener(type, fn);
return this;
}
// 用法
var box = new Elem('div1');
console.log(box.html());
box.html("<p>hello world</p>").on('click', function() {
console.log('click');
}).html("<p>hello javascript</p>")
//--------------------------------------------------------------------------
//ES6提供了class关键字
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name);
}
}
class Dog extends Animal {
speak() {
console.log(this.name);
}
}
let d = new Dog();
d.name = 'wangwang';
d.speak();
class Cat {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name);
};
}
class Lion extends Cat {
speak() {
super.speak();
}
}
let l = new Lion();
l.name = 'shizi';
l.speak();
//-------------------------------
class Point {
constructor() {
// ...
}
}
Object.assign(Point.prototype, {
toString() {},
toValue() {}
});
let methodName = "getArea";
class Square {
constructor(length) {
this.length = length;
console.log(this.length);
}
[methodName]() {
console.log('表达式当做方法名');
}
}
let s = new Square(20);
//---------------------------------------------------------------------------
function change_color_div() {
$('#div1').css('background', '#ff00ff');
}
var arr = [1, 5, 3, 6, 9, 8];
$.each(arr, function(i, v) {
if (v == 3 || v == 6) {
return true;
}
console.log('index:' + i + 'value:' + v);
});
</script>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例