JavaScript前端开发（八）-CSDN博客

本文链接：https://blog.csdn.net/2302_79631773/article/details/134232159

一、演示键盘输入事件
       //在第一个文本框输入小写字母.下面的文本框默认输出上面的与之对应的大写字母
           思路:给第一个文本框加上键盘输入事件（每敲击一下键盘就触发一下事件）.
           获取第一个文本框的值.然后赋予给第二个文本框

           var i1 = document.getElementById("a");
           var i2 = document.getElementById("b");
           i1.onkeyup = function(){
               i2.value = i1.value.toUpperCase();
           }
二、演示获取焦点和失去焦点事件
           账号：<input type="text" id="a" />         <span id="c"></span>         <br>
           var username = document.getElementById("a");
           var password = document.getElementById("a");
           var tip1 = document.getElementById("c");
           var tip2 = document.getElementById("d");

           //需求:输入账号之后.提示账号输入规则.
           //思路给文本框加上获取焦点事件给第一个span标签生产一个提示用于
           username.onfocus = function(){
               tip1.innerText = "账号的长度要在6-10之间";
               tip1.style.color = "red";
           }

           //需求2:输入完成之后,要判断账号是否符合格式.
           //思路:失去焦点之后判断.
           username.onblur = function(){
               var username123 = username.value;
               if (username123.length >=6 && username123.length<=10) {
                   tip1.innerText = "√";
                   tip1.style.color = "green";
               } else{
                   tip1.innerText = "X";
                   tip1.style.color = "red";
               }
           }
三、复习表单
表单：form
           应用场景：用户登录、用户注册添加一个商品信息

           凡是需要将多个数据打包发送的都可以使用表单。

           form表单三大属性:

           A.action表示将表单提交给谁。一般放一个URL地址其中#表示不提交
           B.method表示表单的提交方式：只有2个选择、1.get 2.post 默认是get。


               区别如下：
               get的速度快。因为只能携带极少的数据。不安全，会将表单数据全部显示在url地址。是客户端行为（只依赖浏览器）

               post的速度慢：因为可以携带理论上无限大的数据。安全。不会将表单数据全部显示在url地址。是服务端行为（依赖服务器）

           C.enctype：表示该表单是什么类型的表单。
           默认值1：   application/x-www-form-urlencoded 表示普通表单所以：绝大部分表单都可以不用加。
           可选值2： multipart/form-data 表示文件上传的表单。如果需要文件上传就只能用这个。
           可选值3： text/plain 表示大文本类型常用于国家化传输邮件。


           如何将表单打包发送给action的路径：
           通过提交按钮：以下三种方式均可。一般使用第三种。
           1 <button>提交（登录）</button>
           2 <button type="submit">登录提交</button>
           3 <input type="submit" value="登录提交" />


           后台如何获取表单内部的数据。
           只需要在表单内部的标签元素中添加name属性即可。（必须要加的，否则获取不到值）
           后台只需要根据name来取值。



           串讲：button标签的易错事项。

           button标签的完整写法：
           <button type="xxx">按钮</button>
           其中type的取值有3个：
           1.submit 默认值表示提交按钮
           2.button 可选择表示普通的按钮
           3.reset 可选择表示重置按钮

           button标签中type属性的默认值是 submit 如果该标签放在form表单则会提交表单。
           但是如果没在，就是一个普通的按钮
四、下拉菜单事件
       onchange事件: 一般只会作用于下拉框点击下拉框且改变值.
           //适用场景: 银行卡的互动. 地址栏的联动

           var a = document.getElementById("a");
           var b = document.getElementById("b");


           //需求实现两个下拉框的联动效果.
           //思路:给第一个下拉框加上一个onchange事件
           //思路:获取第一个下拉框的第几个元素(下标)
           //思路:将上一步的思路的下标赋予给第二个下拉框即可
           a.οnchange= function(){
               // 如何获取下拉框的下标
               // console.log(a.selectedIndex);
               b.selectedIndex = a.selectedIndex;
           }

           b.οnchange= function(){
               // 如何获取下拉框的下标
               // console.log(a.selectedIndex);
               a.selectedIndex = b.selectedIndex;
           }
五、html元素是有很多属性的.
           //例如 id class name src href

           document.getElementsByTagName("button")[0].onclick = function(){
               //将xxx元素的aaa属性改成bbb
               //xxx.setAttribute("aaa","bbb");

               //var a = xxx.getAttribute("aaa");表示xxx的aaa属性的值

               // document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");


               if(document.getElementsByTagName("img")[0].getAttribute("src") == "img/1.PNG" ){
                   document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
               }else{
                   document.getElementsByTagName("img")[0].setAttribute("src","img/1.PNG");
               }
           }
六、简化版的轮播图
       //只要有需求: 每隔一段事件就要作什么事就需要联想到使用定时器

           var img = document.getElementsByTagName("img")[0];
           实现图片的替换但是图片的文件名可能不是有规律.
           所以可以将图片的所有文件名路径名存到数组中. 数组是有规律的.
           var src_1 = ["img/1.PNG","img/2.PNG","img/3.PNG","img/4.PNG"];

           var index = 1;
           setInterval(function(){

               img.s ("src",src_1[index]);
               index++;
               if(index==4){
                   index = 0;
               }
           },1000);