你还在为学Webapi烦恼吗?初学者快速入门第一站

最新推荐文章于 2023-03-06 21:44:20 发布

流川枫不风流

最新推荐文章于 2023-03-06 21:44:20 发布

阅读量94

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/YasWestmere/article/details/127502938

版权

本文介绍了WebAPI的基础知识，包括理解DOM对象、使用querySelectorAll选择元素、操作标签的style属性和class属性，以及处理单选框、复选框的选中状态。还讲解了定时器间歇函数的应用，按钮的禁用与启用状态，并提供了一个用户倒计时的实战案例。

摘要由CSDN通过智能技术生成

1.了解DOM对象

使用js 的语法, 获取到html 标签, 对于js来说标签就是对象

作用,可以借助DOM 对象对html 里面的标签和标签的属性进行增删改查

标签身上, 有什么属性,DOM对象身上也会有什么属性

如下图代码

<body>
    <div id="box" title="hello">

    </div>
    <script>
        //DOM对象
        // 使用js 的语法, 获取到html 标签, 对于js来说 标签就是对象
        // 作用,可以借助DOM 对象 对html 里面的标签和标签的属性进行增删改查
        // 标签身上, 有什么属性,DOM对象身上也会有什么属性

        //const box = document.querySelector('#box')这一步是获取DOM对象
        const box = document.querySelector('#box')
       
         console.dir(box) // dir能看到box结构
            //一般我们用console.log(box) 打印一下,但是dir会更清楚的看清box内部结构
                
    </script>
</body>

2.使用document.QuerySelectorAll('CSS选择器')

1.注意点document.QuerySelectorAll() 括号内写的是'css选择器'一定要带引号

2.如果是后代选择器记得加'.' id选择器加'#'

<body>
  <div class ='box'></div>
  <div id = 'box1'></div> 

   <script> 
    const box = document.querySelectorAll('.box')
    const box1 = document.querySelectorAll('#box')
   </script>

</body>

<body>
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>梨子</li>
      <li>桃子</li>
    </ul>
    <script>
        //目标:使用document.QuerySelectorAll('CSS选择器')获取 页面上面 指定的li
        // 语法: document.QuerySelectorAll('CSS选择器')
       // 返回值:
        // 获取成功: 得到一个伪数组 数组里面 存放就是DOM对象
        // 获取失败: 得到一个 空数组
            // 1.没有对应的 html 标签
            // 2. 选择器写错了
            // 访问dom对象 需要用下标来访问

        const lis = document.querySelectorAll('ul li')
        for(let i = 0; i< lis.length; i++)  {
             console.log(lis[i]);
        }
    </script>
</body>

3.操作标签style属性

//目标:通过js 来操作标签的 style 属性设置行内样式

dom对象.style.css属性= 值

注意:

1.css属性值如果有单位记得带上需要使用字符串的方式表示

2.若属性是多个英文字母,要删除中划线并且使用小驼峰命名法

 <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 目标:操作标签 class 属性 
        // 语法: className 给标签的class属性值 设置
        //  dom.对象className = '值'
        // 通过className获取
        
        //获取dom 对象
        const div = document.querySelector('div')
        // 给div dom 对象添加类名
         div.className = 'box' //设置
         console.log(div); // 获取
    </script>

4.操作标签 class 属性

操作标签 class 属性

语法: className 给标签的class属性值设置

dom.对象className = '值'

通过className获取

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 目标:操作标签 class 属性 
        // 语法: className 给标签的class属性值 设置
        //  dom.对象className = '值'
        // 通过className获取
        
        //获取dom 对象
        const div = document.querySelector('div')
        // 给div dom 对象添加类名
         div.className = 'box' //设置
         console.log(div); // 获取
    </script>

5.单选框与复选框选中状态

对象.checked = true 选中

对象.checked = false 未选中

下面举例案例代码说明

<body>
     <input type="text" value="张三">
     <input type="radio" checked>
    <script>
        // 目标: 获取到input 标签的 value 属性值
         //  1. 获取 input dom 元素
         //  dom 元素.value 属性,获取和设置 value属性值
        // const input = document.querySelector('input')
        //   const value = input.value // 获取值
        //   input.value =  '王宝强' 
         
        // checked 默认转换为布尔类型, true为选中,false为未选中
          const input = document.querySelector('input')
        //    input.checked = true  //选中
           input = false // 未选中
           console.log(input);
    </script>
</body>

6.定时器间歇函数

1.掌握间歇函数的使用

2.语法:

setInterval(函数,毫秒时间

只要毫秒时间到了,就会去执行函数里面的代码

注意:函数不要小括号)

<script>
     /*  目标:掌握 定时器- 间歇函数的使用
         语法:
           setInterval(函数,毫秒时间
           只要毫秒时间到了,就会去执行函数里面的代码
           注意:函数不要 小括号)
    */ 
   function fn() {
     console.log('我饿了');

   }
    //  fn()
    // 每隔1s让fn 函数 执行一次
    setInterval(fn,1000)
    
     </script>

7.按钮禁用与启动状态

1.注意点,小伙伴们千万要注意,按钮禁用和启动状态和复选框的启动状态千万不要搞混了

复选框状态:

对象.checked = true 选中

对象.checked = false 未选中

按钮状态:

按钮.disabled = true 未选中

按钮.disabled = false 选中

下面举个案例代码说明:

<body>
    <button id="btn" disabled>按钮</button>
    <script>
        const btn = document.querySelector('#btn')
         btn.disabled = true // 设置为禁用状态
       // btn.disabled = false // 设置为启用状态
    </script>
</body>

8.用户倒计时案例应用

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
      <br>
      <button class="btn">我已经阅读用户协议(5)</button>
     <script>
        // 目标: 实现注册 倒计时功能
         // 1.找到button 标签 设置为禁用
         // 2. 先定义 变量 默认值为5
         // 3.开启定时器 每隔1秒 让变量的值-1
         // 4.需要获取 button 标签
         // 5.通过dom 对象的innerHTML 属性 写入对应的内容
         // 6 判断 变量的值 是否 小于等于0 将按钮设置启动状态 同时修改按钮里面
         //  文字 停止定时器
        let i =5 
        const btn = document.querySelector('.btn')
      let id = setInterval(function(){
        i--
        btn.innerHTML = `我已经阅读用户协议(${i})`
        
         if(i <= 0){
            btn.disabled = false
            btn.innerHTML = '我同意'
            clearInterval(id)
         }
      },1000)
        
    
 
     </script>
</body>