小兔仙注册案例

最新推荐文章于 2024-09-16 08:47:17 发布

心动の弟弟

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量360

点赞数

分类专栏：案例总结文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_49077562/article/details/123818779

版权

本文回顾了JavaScript中的立即执行函数，并详细比较了change事件与input和blur事件的区别，还探讨了classList在前端开发中的应用。通过阅读，你将加深对这些前端知识点的理解。

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

立即执行函数(回顾)

多个立即执行函数用分号隔开 分号放在立即执行函数前面或者后面
      ; (function () {
   

    }())

  (function () {
   

    }());

补充内容：chang事件与input和blur的区别

   <input type="text" name="" id="">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <script>
        let input = document.querySelector('input');
        input.addEventListener('change', function () {
   
            // change 事件 ：离开表单时并且当表单的值发生变化的时候触发 和blur不一样 blur：焦点离开表单时就触发
            console.log(123);
        })
        let text = document.querySelector('textarea')
        text.addEventListener('blur', function () {
   
            // change 事件 ：当表单的值发生变化的时候触发 和blur不一样 
            //blur：焦点离开表单域就触发
            //input:只要输入内容就触发
            console.log(456);
        })

    </script>

补充内容 classList

 //判断勾选按钮是否含有一个叫icon-queren2的类名 如果有 
          // classList.add() 追加
          // classList.remove() 移除
          // classList.toggle() 切换
          // classList.contains() 是否包含 如果有则返回true 如果没有该类名则返回false
          // 括号内写类名字符串

正文

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <!-- <link rel="shortcut icon" href="./favicon.ico"> -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/register.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="./login.html">请先登录</a>
        </li>
        <li>
          <a href="./register.html">免费注册</a>
        </li>
        <li>
          <a href="./center-order.html">我的订单</a>
        </li>
        <li>
          <a href="./center.html">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i>
            手机版
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class