webapi练习二--重点全选案例和排他思想,还有阻止a跳转

最新推荐文章于 2022-09-22 15:18:07 发布
最新推荐文章于 2022-09-22 15:18:07 发布
阅读量172 收藏
点赞数
分类专栏： 编程语言 前端 js基础 webapi 练习 JavaScript WebAPI 文章标签： 原生js webapi js基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44114310/article/details/88751590
版权
前端 同时被 3 个专栏收录
45 篇文章 0 订阅
订阅专栏
编程语言
31 篇文章 0 订阅
订阅专栏
js基础
20 篇文章 0 订阅
订阅专栏

总结一波第二天的练习题

1.给多个按钮注册点击事件，当点击按钮，显示对应的图片 -- title属性记录图片src

<!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">
  <title>Document</title>
</head>
<body>
  <button title="./images/1.jpg">按钮1</button>
  <button title="./images/2.jpg">按钮2</button>
  <button title="./images/3.jpg">按钮3</button>
  <button title="./images/4.jpg">按钮4</button>
  <button title="./images/5.jpg">按钮5</button>
  <button title="./images/6.jpg">按钮6</button>
  <br>
  <img src="./images/1.jpg" alt="">
  <script>
    var im = document.querySelector('img')
    var btns = document.querySelectorAll('button')
    var index;
    for(var i =0 ; i < btns.length ; i++){
      btns[i].onclick = function(){
        im.src = this.title
      }
    }
  </script>
</body>
</html>


2.美女相册案例

<!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">
  <title>Document</title>
  <style>
      *{
        margin: 0 auto;
        padding: 0;
        list-style: none;
      }
      body{
        margin-left: 100px;
      }
      ul{
        overflow :hidden;
        margin: 50px 0;
      }
      ul li {
        float: left;
        margin-right: 10px;
      }
    
    </style>
</head>
<body>
    <h1>美女相册</h1>
    <ul id="imgs">
      <li>
        <a href="image/1.jpg" title="美女1">
          <img src="image/1-small.jpg" alt="">
        </a>
      </li>
      <li>
          <a href="image/2.jpg" title="美女2">
            <img src="image/2-small.jpg" alt="">
          </a>
        </li>
        <li>
            <a href="image/3.jpg" title="美女3">
              <img src="image/3-small.jpg" alt="">
            </a>
          </li>
          <li>
              <a href="image/4.jpg" title="美女4">
                <img src="image/4-small.jpg" alt="">
              </a>
            </li>
    </ul>
    <img id="big" src="image/placeholder.png" alt="" width="400" height="250">
    <p id="p">这是描述信息</p>
  <script>
    var as = document.querySelectorAll('a')
    var big = document.querySelector('#big')
    var p = document.querySelector('#p')
    for(var i =0 ; i < as.length ; i++){
      as[i].onclick = function(){
        big.src = this.href
        p.innerText = this.title
        return false
      }
    }
    
  </script>
  
</body>
</html>


3.二维码案例

<!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">
  <title>Document</title>
  <style>
    .small{
      width: 50px;
      height: 50px;
      background:url(imag/bgs.png) no-repeat -159px -51px;
      position: fixed;
      top: 40%;
      right: 10px;
    }
    .erweima{
      position: absolute;
      top: 0px;
      left: -150px;
    }
    .small a {
        display: block;
        width: 50px;
        height: 50px;
    }
    .hide {
        display: none;
    }
  </style>
</head>
<body>
  <div class="small">
    <a href="#" id="link"></a>
    <div class="erweima hide" id="er">
      <img src="imag/456.png" alt="">
    </div>
  </div>
<script>
  var link = document.querySelector('#link')
  var er = document.querySelector('#er')
  link.onmouseover = function(){
    er.className = 'erweima'
  }
  link.onmouseout = function(){
    er.className = 'hide'
  }
  
</script>
</body>
</html>


4【案例：禁用多个文本框.html】

<!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">
  <title>Document</title>
</head>
<body>
  <button>a按钮</button><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text">
  <script>
    var btn = document.querySelector('button')
    var inputs = document.querySelectorAll('input')
    btn.onclick = function(){
      for(var i =0 ; i < inputs.length ; i++){
        inputs[i].disabled = true
      }
      this.disabled = true
    }
  
  </script>
</body>
</html>


6【案例：设置下拉框选中.html】

<!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">
  <title>Document</title>
</head>
<body>
    <button id="btn">翻牌子</button>
    <select id="sel">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
    <script>
      var btn = document.querySelector('#btn')
      var ops = document.querySelectorAll('#sel option')
      btn.onclick = function(){
        var i = parseInt(Math.random()*6)
        console.log(i)
        ops[i].selected = true
      }
    </script>
</body>
</html>


7【案例：仿京东搜索文本框案例.html】

<!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">
  <title>Document</title>
</head>
<body>
  <input type="text" value="手机">
  <script>
    var ipt = document.querySelector('input')
    ipt.onfocus = function(){
      if(ipt.value == '手机'){
        ipt.value = ""
      }
    }
    ipt.onblur = function(){
      if(ipt.value == ''){
        ipt.value = "手机"
      }
    }
  
  
  </script>
</body>
</html>


8【案例：表格全选案例.html】

<!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">
  <title>Document</title>
  <style>
      *{
        margin: 0;
        padding: 0;
      }
    div{
      width: 300px;
      margin: 100px auto 0;
    }
    table{
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th{
      background-color: #09c;
      color: #fff;
      font: bold 16px "微软雅黑";
    }
    td{
      font: bold 14px "微软雅黑";
    }
    tbody tr{
      background-color: #fff;
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div>
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" id="all"></th>
            <th>菜名</th>
            <th>饭店</th>
          </tr>
        </thead>
        <tbody id="dan">
            <tr>
                <td><input type="checkbox"></td>
                <td>红烧肉</td>
                <td>真好</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>红烧肉</td>
                <td>真好</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>红烧肉</td>
                <td>真好</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>红烧肉</td>
                <td>真好</td>
              </tr>
        </tbody>
      </table>
    </div>
  <script>
    var all = document.querySelector('#all')
    var chs = document.querySelectorAll('#dan input')
    
    // 当点击全选时,全部一样
    all.onclick = function(){
      for(var i =0 ; i < chs.length ; i++){
        chs[i].checked = all.checked
      }
    }
    
    for(var i =0 ; i < chs.length ; i++){
      chs[i].onclick = function(){
        var n = 0
        for(var i =0 ; i < chs.length ; i++){
          if(chs[i].checked){
            n++
          }
        }
        if( n == 4){
          all.checked = true
        }else{
          all.checked = false
        }
      }
    }
  
  </script>
</body>
</html>

9【案例：排他思想.html】

<!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">
  <title>Document</title>
  <style>
    .red{
      background-color: pink;
    }
  </style>
</head>
<body>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <script>
    var btns = document.querySelectorAll('button')
    for(var i =0 ; i < btns.length ; i++){
      btns[i].onclick = function(){
        for(var i =0 ; i < btns.length ; i++){
          btns[i].className = ''
        }
        this.className = 'red'
      }
    }
  </script>
</body>
</html>

 

Joy Weijiao
关注
专栏目录
计数排序思想附练习题
qq_39910498的博客
12-19 445
计数排序其实算不上严格意义上的排序，它对数据的范围有着要求。 ————————————————————— 所谓计数排序，即记录下每个元素出现的次数，这里就有一个问题，即使用数组存的话就只能统计一定范围的数字，同时若果数组开的太大，遍历一遍也会超时。 因此，计数排序更多的是一种基本思想，（对数字取模再存————哈希？） 这里有一道计数排序的题，当然用快排什么的也都可以过P1271 【深基9.例1】选举学生会 #include<stdio.h> #include<stdlib.h> #d
【Web前端笔记-基础】第十四课，Javascript的排他思想
嘿嘿嘿的博客
11-29 373
一：排他思想 如果有同一组元素，想要某个元素实现某种样式，需要用到排他思想。 先将其他元素的这个属性清空（干掉他人）。 在这个特殊元素下添加表现（留下自己）。 二：小案例 1.百度换肤，点击相应的图片，背景变成相应的图片。 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8...
6、排他思想（算法）
weixin_45998542的博客
12-16 127
6、排他思想（算法） 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button>
Web API-排他思想及其案例
crystal_iwwish的博客
10-07 137
通过循环将其他元素调整为B状态，通过this或者下标将当前元素调整为A状态 案例-按钮切换（只允许一个按钮有背景颜色） <style> .pink { background: orangered; } </style> <body> <button>第1个</button> <button>第2个</button> .
Web API及DOM介绍(二) ——排他思想（多案例）
X-77
10-22 465
本篇博客的主要内容就是排他思想。 一、排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 案例代码： <button>按钮1</button> <button>按钮2</button> <button>按钮3</but...
Web API【黑马前端--笔记整理】
weixin_60599272的博客
09-22 3362
API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了,不必纠结内部何实现Web APl主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。WebAPI一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数)学习Web API可以结合前面学习内置对象方法的思路学习文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML、XML）的标准编程接口。
JavaScript WebAPI 系列二 排他思想；自定义属性（包括h5新增的data-）；父、子、兄弟节点；创建、添加、删除、复制节点
m0_55170432的博客
03-29 268
1.0 操作元素–排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 // 1. 获取所以按钮元素 var btns = document.getElementsByTagName('button'); // btns 得到的是伪数组 里面的每一个元素 btns[i] for (v
一、Web API介绍
weixin_52580155的博客
11-09 1333
Web API介绍一级目录二级目录三级目录## 一、Web API介绍1.1 API的概念二、DOM介绍DOM是什么？2.3获取元素2.3.1 根据ID去获取2.3.2根据标签名获取元素2.3.3 H5新增的获取元素的方法2.3.4 获取特殊元素三、事件基础3.1事件三要素3.2常见的鼠标事件四、操作元素4.1改变元素内容（获取或设置）4.2 常用元素的属性操作获取属性的值设置对象的值4.3分时问候4.4表单元素的属性操作4.5全选和反选4.6样式属性操作4.7点击和关闭案例排他操作自定义属性
常用API和Web API知识点
weixin_46341513的博客
02-28 509
API和Web API 接口文档 API：应用程序编程接口 简单理解：是一种工具，实现想要完成的功能 Web API 是一套操作浏览器功能和玉面元素的API（BOM和DOM） 总结 DOM介绍 DOM简介 是W3C组织推荐的处理可扩展标记语言的标准编程接口 文档(document)：一个页面就是一个文档 元素(element)：页面中的所有标签 节点(node)：网页中的所有内容(标签、属性、文本、注释等) DOM把以上内容都看做是对象 获取元素 根据ID 使用getElementById()方法 //
js-webapi
知识改变一切
08-07 5784
1.JavaScript分三个部分     2.元素：页面中的所有的 标签 都是元素，元素可以看成是对象    element 3.节点：页面中所有 内容 都是节点：标签，属性，文本    node 4.文档：一个页面就是一个文档    document 5.文档 &gt; 节点  &gt; 元素 6.树状图：                 由文档及文档中的所有元素(标签)组...
Web APIs第02天笔记——排他思想、自定义属性操作、节点操作
m0_55879104的博客
08-14 448
/ 1. 获取元素的属性值 // (1) element.属性 console . log(div . id);//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console . log(div . getAttribute('id'));自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。............
前端学习第二十二课（Web_API-排他、属性、节点操作）
damadashen的博客
04-28 401
目录 1.1 排他操作 1.2 自定义属性操作 1.2.1 获取属性值 1.2.2 设置属性值 1.2.3 移除属性 1.2.4 H5自定义属性 1.3 节点操作 1.3.1 节点概述 1.3.2 节点层级 1.3.3 父级节点 1.3.4 子节点 1.3.5 兄弟节点 1.3.6 创建节点 1.3.7 添加节点 1.3.8 简单留言板案例 1.1 排他操作 1）排他思想： 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有.
webapi练习
南北极之间
05-21 419
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> .cls { background-color: black;...
【前端】【JS】前端学习之路（六）：DOM练习（一）（排他功能/innerText&value/className改变类样式）
SuiKaSan的自学室
06-18 506
1.点击图片改变图片和文字 &lt;div id="dv1"&gt; &lt;P&gt;你是谁&lt;/P&gt; &lt;P&gt;你是谁&lt;/P&gt; &lt;P&gt;你是谁&lt;/P&gt; &lt;P&gt;你是谁&lt;/P&gt; &lt;P&gt;你是谁&
JavaScript进阶学习-webAPI（总结）
weixin_43294092的博客
04-16 1935
webAPI DOM 概念 JS分三个部分： ECMAScript标准：js的基本语法 DOM：Document object model —文档对象模型—操作页面的元素 BOM: Browser object model —>浏览器对象模型—操作的是浏览器 DOM文档对象模型 文档 把一个HTML文件看成一个文档，由于万物皆对象，所以把这个文档看成是一个对象 XML 文件也可以看成是一个文...
JavaScript WebAPI学习 demo5
菜鸟小铭的博客
05-03 735
JavaScript WebAPI学习 这篇文章讲解了修改元素属性，自定义属性，节点的增删添加删除等操作 这篇文章实在是太长了，里面主要有一些代码占据了很多的空间，我尝试能不能把他们折叠起来 这篇博客是初学者写下的笔记，如有错误，欢迎前来指正！ 最后推荐大家看这部分知识点的总结，六分钟回顾一下这里的知识点 js案例 案例：排他思想 案例：当点击一个按钮时选中它，并且其他的按钮都恢复未被选中的...
js开发实例 —— 仿京东侧边导航栏&网页轮播图
mocoll的博客
08-22 1783
二十四、仿京东侧边导航栏 HTML 代码： JS代码 二十五、网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 ①因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中。 ②此时需要添加load事件。 ③鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 ④显示隐藏display按钮 JS代码： 2.动态生成小圆圈 ① 动态生成小圆圈。。 ② 核心思路:小圆圈的个数要跟图片张数一致。 ③ 所以首先先得到u里
JS---排他思想及Tab栏的切换
热门推荐
F__Rong的博客
07-30 1万+
JS的排他思想及tab栏切换,利用数组，循环，自定义属性，通过标签名字选择等
如何在vue项目中使用PWA
WjiaoJ的学习
04-24 9109
pwa ? 这是什么？ 第一次听到pwa的时候是隔壁桌的大佬在交流前端的时候说的“这是前端目前很火的技术，用户体验很好，简单方便 ... ...”。听起来就很想试一试，在大佬的帮助下完成了自己人生的第一个pwa项目。强烈安利，接下来就好好的去了解一下所谓的pwa 什么是pwa ？ Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值