Home Explore Help
Sign In
lovecoding
/
W260426
8
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 1 day ago
parent
da60a75566
commit
51d4c2862e
7 changed files with 177 additions and 0 deletions
Unified View Show Diff Stats
  1. 30 0
      4_BOM&DOM/11_新的js选择器.html
  2. 20 0
      4_BOM&DOM/12_this.html
  3. 29 0
      4_BOM&DOM/13_获取当前元素序号.html
  4. BIN
      4_BOM&DOM/img/ad1.jpg
  5. BIN
      4_BOM&DOM/img/ad2.png
  6. BIN
      4_BOM&DOM/img/ad3.jpg
  7. 98 0
      4_BOM&DOM/练习题4_图片切换.html

+ 30 - 0
4_BOM&DOM/11_新的js选择器.html
View File 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li>1</li>
 
+        <li>2</li>
 
+        <li>3</li>
 
+        <li>4</li>
 
+    </ul>
 
+    <div class="box">hello</div>
 
+    <h1 id="title">world</h1>
 
+    <script>
 
+        // 获取元素
 
+        // querySelector() 选择器 只能选择到第一个符合条件的元素 括号内可以使用与css选择器相同的语法
 
+        var ul = document.querySelector("ul li");
 
+        var box = document.querySelector(".box");
 
+        var title = document.querySelector("#title");
 
+        console.log(ul);
 
+
 
+        // querySelectorAll() 选择器 可以选择到所有符合条件的元素 返回的是一个类数组对象
 
+        var lis = document.querySelectorAll("li");
 
+        console.log(lis);
 
+    </script>
 
+</body>
 
+</html>

+ 20 - 0
4_BOM&DOM/12_this.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <button id="btn">按钮</button>
 
+    <script>
 
+        // 获取元素
 
+        var btn = document.getElementById("btn");
 
+        // 绑定事件
 
+        btn.onclick = function(){
 
+            // this 指向当前点击的元素 (谁触发的事件，this就指向谁的)
 
+            console.log(this);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 29 - 0
4_BOM&DOM/13_获取当前元素序号.html
View File 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li>1</li>
 
+        <li>2</li>
 
+        <li>3</li>
 
+        <li>4</li>
 
+        <li>5</li>
 
+    </ul>
 
+    <script>
 
+        // 获取元素
 
+        var lis = document.querySelectorAll("li");
 
+        // 遍历lis数组
 
+        for(var i =0 ;i<lis.length;i++){
 
+            // 给每个li添加一个序号属性
 
+            lis[i].index = i;
 
+            lis[i].onclick = function(){
 
+                console.log(this.index);
 
+            }
 
+        }
 
+    </script>
 
+</body>
 
+</html>

BIN
4_BOM&DOM/img/ad1.jpg
View File


BIN
4_BOM&DOM/img/ad2.png
View File


BIN
4_BOM&DOM/img/ad3.jpg
View File


+ 98 - 0
4_BOM&DOM/练习题4_图片切换.html
View File 

@@ -0,0 +1,98 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        *{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        li{
 
+            list-style: none;
 
+        }
 
+        .clearfix::after{
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
+        .content{
 
+            width: 500px;
 
+            border:2px solid #999;
 
+            margin:100px auto;
 
+            text-align: center;
 
+        }
 
+        .big-img img{
 
+            width: 400px;
 
+            height: 300px;
 
+        }
 
+        .small-img{
 
+            border-top:2px solid #999;  
+        }
 
+        .small-img img{
 
+            width: 100px;
 
+            height: 80px;
 
+        }
 
+        .small-img ul li{
 
+            float: left;
 
+            border-right: 2px solid #999;
 
+            width: 125px;
 
+            box-sizing: border-box;
 
+            text-align: center;
 
+        }
 
+        .small-img ul li:last-child{
 
+            border-right: 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="content">
 
+        <div class="big-img">
 
+            <img id="bigImg" src="./img/phone.png" alt="phone">
 
+        </div>
 
+        <div class="small-img">
 
+            <ul class="clearfix">
 
+                <li><img src="./img/phone.png" alt="phone"></li>
 
+                <li><img src="./img/phone2.png" alt="phone2"></li>
 
+                <li><img src="./img/ad1.jpg" alt="ad1"></li>
 
+                <li><img src="./img/ad2.png" alt="ad2"></li>
 
+            </ul>
 
+        </div>
 
+    </div>
 
+    <script>
 
+        // 获取元素
 
+        var bigImg = document.getElementById("bigImg");
 
+        // var smallImgs = document.getElementsByClassName("small-img")[0].getElementsByTagName("img");
 
+        var smallImgs = document.querySelectorAll(".small-img img");
 
+
 
+        // smallImgs[0].onmouseover = function(){
 
+        //     var thisSrc = smallImgs[0].getAttribute("src");
 
+        //     bigImg.setAttribute("src",thisSrc);
 
+        // }
 
+        // smallImgs[1].onmouseover = function(){
 
+        //     var thisSrc = smallImgs[1].getAttribute("src");
 
+        //     bigImg.setAttribute("src",thisSrc);
 
+        // }
 
+        // smallImgs[2].onmouseover = function(){
 
+        //     var thisSrc = smallImgs[2].getAttribute("src");
 
+        //     bigImg.setAttribute("src",thisSrc);
 
+        // }
 
+        // smallImgs[3].onmouseover = function(){
 
+        //     var thisSrc = smallImgs[3].getAttribute("src");
 
+        //     bigImg.setAttribute("src",thisSrc);
 
+        // }
 
+
 
+        // 循环遍历smallImgs数组
 
+        for(var i=0;i<smallImgs.length;i++){
 
+            smallImgs[i].onmouseover = function(){
 
+                // console.log("鼠标移入");
 
+                console.log(i);
 
+                // var thisSrc = smallImgs[i].getAttribute("src");
 
+                var thisSrc = this.getAttribute("src");
 
+                bigImg.setAttribute("src",thisSrc);
 
+            }
 
+        }
 
+    </script>
 
+</body>
 
+</html>