前端基本功---webAPI（1）案例

最新推荐文章于 2023-04-06 08:23:52 发布

原创最新推荐文章于 2023-04-06 08:23:52 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

博客围绕DOM操作展开，包含获取页面元素、注册事件等内容。重点介绍了点击切换图片、操作元素属性等功能，还有美女相册示例。最后有总结、课堂测试题目及扩展内容，涉及切换多张图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、dom.html

nl<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

</body>
<script>
  console.log(document);  //整个页面
  console.log(document.documentElement);  //html标签
  console.log(document.body);  //body标签
</script>
</html>

2.获取页面元素.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div id="four">4</div>
  <div id="box">
    <div>哈哈</div>
    <div>呵呵</div>
  </div>
  <script>
//    批量获取页面上指定的标签
//      getElementsByTagName('标签名')  //通过标签名获取多个元素 返回一个伪数组 包含了符合条件的所有元素
//        var result = document.getElementsByTagName('div');
//        console.log(result);
//        console.log(result[3]);


//        var result = document.getElementsByTagName('span');  //如果找不到就返回一个空的伪数组
//        console.log(result);

//    获取指定的元素
//      getElementById('id名')   //通过id获取元素  返回的就是那个对应的元素
    
//        var result = document.getElementById('four');
//        console.log(result);
    
//        var result1 = document.getElementById('one'); //如果找不到返回的是null
//        console.log(result1);


//      console.log(document.getElementsByTagName('div')); //在整个页面的范围内找
//        var box = document.getElementById('box');
//        console.log(box.getElementsByTagName('div'));  //在元素的范围中去找
    
    
    
//    总结:
//      批量获取 : document/element.getElementsByTagName('标签名')  返回一个伪数组,如果找不到返回空的伪数组
//      通过id获取: document.getElementById('id名')  返回具体的元素, 找不到返回null
  </script>
</body>
</html>

3、事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    //需求: 点击div,alert一句话
    //1. 获取div
    var box = document.getElementById('box');
    //2. 注册事件
//    box.onclick = function(){
//      alert('box被点击了');
//    }
    
//    注册事件的语法: 元素.on + 事件名 = 函数;
    
//    事件的三要素:
//    事件源 : 给谁注册事件,谁就是事件源
//    事件名  : 要注册什么事件,那个事件名就是什么  点击事件的事件名是: click
//    事件处理函数 : 事件触发的时候会被调用的函数
  </script>
</body>
</html>

4、点击切换图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

<button id="btn">点击切换图片</button>

<br>

<img id="img" src="images/a.jpg" alt="图片" width="500" height="350">

</body>
</html>
<script>
  //需求: 点击btn按钮,点击的时候切换图片
  //1. 获取元素btn,img
      var btn = document.getElementById('btn');
      var img = document.getElementById('img');
//  2. 给btn注册点击事件
      btn.onclick = function(){
        //  3. 在事件处理函数中,修改img图片(修改img的src属性的值)
//        console.log(img.src); //注意返回的是绝对路径
          img.src = 'images/b.jpg';
      }


</script>

5、点击回来切换图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

<!--<button id="btn">点击切换图片</button>-->
<a href="" id="btn"> 点击来回切换图片</a>

<br>

<img id="img" src="images/a.jpg" alt="图片" width="500" height="350">

</body>
</html>
<script>
  //需求: 点击btn按钮,点击的时候来回切换图片
  //1. 获取元素btn,img
  var btn = document.getElementById('btn');
  var img = document.getElementById('img');
  var flag = true;// 默认展示的是a.jpg, flag为true的时候,表示当前展示的是a.jpg
  //如果flag是false,就代表当前展示的是b.jpg
  //  2. 给btn注册点击事件
  btn.onclick = function(){
    //  3. 在事件处理函数中,修改img图片(修改img的src属性的值)
        console.log(img.src); //注意返回的是绝对路径
//        判断如果是a.jpg就切换到b.jpg,否则就换回a.jpg
    if(flag){
      //证明当前展示的a.jpg
      img.src = 'images/b.jpg';
      flag = false; //图片发生变化,flag也要跟着改变状态
    }else{
      //证明当前展示的是b.jpg
      img.src = 'images/a.jpg';
      flag = true;
    }
    return false;
  }


</script>

6、给a标签注册点击事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--a标签默认行为 : 页面跳转-->
<a href="" id="link">点击在控制台打印一句话</a>
<script>
  var link = document.getElementById('link');
  //由于a标签的超链接功能,导致事件触发之后,还会默认刷新页面/跳转页面,我们不能到达我们最终的目的
  link.onclick = function(){
    console.log('a被点击了');
    
    return false; //在事件处理函数的最后一行,写一个return false,就可以组织a的默认行为
  }
</script>
</body>
</html>

7、操作元素的属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id='box'>
  哈哈哈哈哈
  <span>span的文本</span>
</div>
<!--<img src="images/1.jpg" alt="" title="哈哈" id="img">-->
<input type="text" value='哈哈哈'>
<script>
  var img = document.getElementById('img');
//  console.log(img.src);
  //  console.log(img.title);
  //  console.log(img.id);
  //
  //  img.src = 'images/2.jpg';
  //  img.title = '呵呵';
  //  img.id = 'img1111'
  
//  innerText  获取/操作元素里面的文本
//  innerHTML  获取/操作元素里面的内容 (会识别html标签)
//  共同点: 都会覆盖原来的内容
//  注意: innerText , innerHTML 一般用来操作双标签
  
//  var box = document.getElementById('box');
//  console.log(box.innerText); //返回元素里面所有的文本
//  console.log(box.innerHTML); //返回元素里面所有的内容
  
//  box.innerText = '我是动态加的内容<p>p的内容</p>'; //不会识别标签
//  box.innerHTML = '我是动态加的内容<p>p的内容</p>';  //会识别标签,把标签直接渲染出来
  
//  var input = document.getElementsByTagName('input');
//  console.log(input[0].innerText);
//  console.log(input[0].innerHTML);
//  console.log(input[0].value);


</script>
</body>
</html>

8、美女相册


<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
      font-family: "Helvetica","Arial",serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }
    h1 {
      color: #333;
      background-color: transparent;
    }
    a {
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }
    ul {
      padding: 0;
    }
    li {
      float: left;
      padding: 1em;
      list-style: none;
    }
    #imagegallery {
    }
    
    #imagegallery a {
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }
    
    #imagegallery a img {
      border: 0;
    }
  </style>

</head>
<body>
<h2>
  美女画廊
</h2>

<div id="imagegallery">
  <a href="images/1.jpg" title="美女A">
  <img src="images/1-small.jpg" width="100px" alt="美女1" />
</a>
  <a href="images/2.jpg" title="美女B">
    <img src="images/2-small.jpg" width="100px" alt="美女2" />
  </a>
  <a href="images/3.jpg" title="美女C">
    <img src="images/3-small.jpg" width="100px" alt="美女3" />
  </a>
  <a href="images/4.jpg" title="美女D">
    <img src="images/4-small.jpg" width="100px" alt="美女4" />
  </a>
</div>

<div style="clear:both"></div>

<img id="image" src="images/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>

</body>
</html>
<script>
 //需求: 点击小图,修改大图和对应的文本
//  给每一个a注册点击事件,在事件处理函数中,获取到当前a的href的值和title的值.分别赋值给img的src 和 p的innerText
 
//  1. 获取元素
      var imagegallery = document.getElementById('imagegallery');
      var links = imagegallery.getElementsByTagName('a');
      var image = document.getElementById('image');
      var des = document.getElementById('des');
//  2. 给每一个a注册点击事件
//      links[0].onclick = function(){}
//      links[1].onclick = function(){}
//      links[2].onclick = function(){}
//      links[3].onclick = function(){}
        for(var i = 0; i < links.length; i++) {
          links[i].onclick = function(){
            //  3. 在事件处理函数中,获取到当前点击的a,然后拿到href 和title,再去赋值
//            console.log(links[i]);
//              console.log(this);  //指向我们点击的事件源
//              console.log(this.href);  //
//              console.log(this.title);  //
            image.src = this.href;
            des.innerText = this.title;
            
            return false;//阻止a的默认行为
          }
        }

        
       
</script>

9、总结

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
//  DOM: 把页面上的标签抽象成对象,在js中通过操作对象,实现操作页面上标签的目的
//  元素: 在html中<div>叫标签, 在DOM中,称之为元素
//  获取元素:
//      document/element.getElementsByTagName('标签名') 返回一个伪数组 ,如果找不到返回空的
//  伪数组
//      document.getElementById('id名') 返回符合条件的那个元素  ,如果找不到就是null
//    获取body : document.body
//    获取html: document.documentElement
//
//  事件:   点击事件 click
//  事件源 : 给谁注册事件,谁就是事件源
//  事件名 : 注册的是什么事件
//  事件处理函数 : 触发事件时,调用的函数
//  事件源.on + 事件名 = 事件处理函数
//
//  操作元素的属性:
//  innerText
//  innerHTML
//  相同点: 都会覆盖原来的内容
//  不同点: innerText 只识别文本
//          innerHTML 可以识别标签
//  注意: 一般用于双标签
</script>
</body>
</html>

10、课堂测试题目

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--如果a的href属性里面写了javascript: .这个javascript代表协议. 作用: 改变了a的默认行为, 会执行javascript后面的代码-->
<!--void是js中的一个关键字 作用: 什么都不做-->
<!--<a href="javascript:void(0) ;">点击</a>-->
<!--<a href="javascript:void 0;">点击</a>-->
<!--<a href="javascript:;">点击</a>-->
</body>
</html>

11、扩展内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #wrap div{
      
    }
  </style>
</head>
<body>
<div id="wrap">
  <div class="one">1</div>
  <div class="one">2</div>
  <div class="one">3</div>
</div>
<div class="one">4</div>
<div class="one">5</div>
<input type="text" name="one">

<script>
//  var box = document.getElementById('box');
//  console.log(box); //不是标准的方式  不建议使用
  
  
//  获取元素的其他方式:
//console.log(document.getElementsByName('one')); //通过name属性找元素, 返回的是伪数组,找不到是空的伪数组

////console.log(document.getElementsByClassName('one')); //通过类型获取元素.返回伪数组,找不到返回空的伪数组
//  var wrap = document.getElementById('wrap');
//console.log(wrap.getElementsByClassName('one')); //也可以使用element调用

//console.log(document.querySelector('.one')); //通过选择器查找元素 ,返回所有符合条件里面的第一个
//console.log(document.querySelectorAll('#wrap div')); //通过选择器查找元素 ,返回一个伪数组

</script>
</body>
</html>

12、切换多张图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <button id="btn">点击切换</button>
  <br>
  <img src="images/0.jpg" alt="" id="img">
  <script>
    //需求: 点击按钮,修改img的src路径
    //1. 获取元素
      var btn = document.getElementById('btn');
      var img = document.getElementById('img');
      var index = 0; //标记当前展示的是第几张
//    2. 给按钮注册点击事件
      btn.onclick = function(){
        //    3. 在事件处理函数中,判断当前是哪一张,修改展示下一张
        index++;
        img.src = 'images/'+index+'.jpg';
        //判断是否是第9张,如果是第几张,就把index变成-1.
//        因为下一次在点击进来的时候,会先index++, -1就变成了0
        if(index==9){
          index = -1;
        }
      }

   
    
  </script>
</body>
</html>