first commit

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/图片预览/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./index.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .main img {
+            height: 200px;
+            width: 300px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main"></div>
+</body>
+<script src="./index.js"></script>
+<script>
+    var img = [
+        `https://img0.baidu.com/it/u=1132032928,2577726940&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082`,
+        `https://img2.baidu.com/it/u=3395582942,4228440123&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500`,
+        `https://img2.baidu.com/it/u=4247972487,2176045580&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313`,
+        `https://img2.baidu.com/it/u=3081609058,4054949655&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281`
+    ];
+
+    //将图片显示到网页上的循环
+    img.forEach(v => {   //function (v) {
+        $(".main").innerHTML += ` <img src="${v}" alt="">`
+    })
+    _(".main img").forEach((v, i) => {
+        v.onclick = () => {
+            console.log("被点击了:", v);
+        }
+    })
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/图片预览/index.js

@@ -0,0 +1,7 @@
+class PicturePreview {
+    constructor() {
+    }
+
+
+}
+var text = new PicturePreview("")

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/图片预览/this指向笔记.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+</body>
+<script>
+    //类的本质就是对象
+    class PicturePreview {
+        constructor(text) {//如果不写text 那么打印出来 “我是构造函数 undefined”
+            //this   //通过this定义一个
+            this.a = text;
+            //console.log("我是构造函数", text);//如果不写text 你好不会被打印
+            console.log("我是构造函数", this.a);
+        }
+
+        getA() {
+            console.log(this.a);
+        }
+    }
+    var text = new PicturePreview("你好")//如果不写new “constructor”不执行 console.log也不会打印
+
+    //console.log(text);//打印出来是PicturePreview {}
+
+    text.getA()
+
+</script>
+
+</html>