![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：不错
Collection
Collection
1，练习JS创建对象，属性，方法。
<!DOCTYPE html>
<html>
<head>
<title>js面向对象</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//创建一个新的对象
var obj = new Object();
//给对象设置属性，一个name属性，并且值是一个字符串
obj.name = 'php';
//给对象设置方法
obj.rand = function(){
console.log(Math.random());//控制台输出一个随机数，每刷新一次随机生成
}
obj.sum = function(num1,num2){
return num1+num2;
}
//给予2个值，并且通过对象输出两个值的和
console.log(obj.sum(5,6));
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<title>js面向对象</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//建立一个对象，属性table的值是abc，this表示返回这个对象中的值也就是abc
var obj = {
table:'abc',
find:function(){
return this.table;
},
where:function(){
return this;
}
};
//另新建一个对象，并且把第一个对象赋值给这个对象obj2.这是两个对象公用一个指针，也就是一个内存地址，所以当obj2中的table的值发生变化时，obj中的table值也跟着发生变化。
var obj2 = new Object();
obj2 = obj;
obj2.table = 'sdfasfafgsagsd';
var res = obj.where().find();
console.log(res);
</script>点击 "运行实例" 按钮查看在线实例
2，通过jauery的id，class选择器选择元素，$.each遍历数组。
遍历数组，通过if判断不输出4，5两个值
<!DOCTYPE html>
<html>
<head>
<title>js面向对象</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" style="background: coral;width: 100%;height: 50px;"></div>
<p class="p1" style="background: green;width: 100%;height: 50px;"></p>
</body>
</html>
<script type="text/javascript">
var arr = [1,2,3,4,5,6,7,8];
$.each(arr,function(i,v){
if (v==4||v==5) {
return true;
}
console.log('索引:'+i+'值:'+v);//遍历数组
});
</script>点击 "运行实例" 按钮查看在线实例
下面代码通过点击事件触发颜色的改变，使用ID选择器操作CSS样式。
<!DOCTYPE html>
<html>
<head>
<title>js面向对象</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" style="background: coral;width: 100%;height: 50px;"></div>
<p class="p1" style="background: green;width: 100%;height: 50px;"></p>
<button onclick="change_color_div()">改变颜色</button>
</body>
</html>
<script type="text/javascript">
function change_color_div(){
$('#div1').css({'background':'#00ff00'});
}
</script>点击 "运行实例" 按钮查看在线实例
通过class选择器更改元素DIV的样式背景颜色
<!DOCTYPE html>
<html>
<head>
<title>js面向对象</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" style="background: coral;width: 100%;height: 50px;"></div>
<p class="p1" style="background: green;width: 100%;height: 50px;"></p>
<button onclick="change_color_div()">改变颜色</button>
</body>
</html>
<script type="text/javascript">
function change_color_div(){
$('.p1').css({'background':'#00ff00'});
}
</script>点击 "运行实例" 按钮查看在线实例
