JavaScript知识点-周4.md

最新推荐文章于 2022-06-03 23:20:55 发布

小小勤~

最新推荐文章于 2022-06-03 23:20:55 发布

阅读量238

点赞数

分类专栏： JavaScript知识点文章标签： javascript

本文链接：https://blog.csdn.net/qq_41008567/article/details/108964781

版权

一、操作表单

1、快速获取表单元素

form.name值

   <form action="#">

   请输入姓名: <input type="text" name="userName" id=""><br>

   请输入密码: <input type="password" name="pass" id=""><br>

   性别: <input type="radio" name="nan" id="" group="sex">男

            <input type="radio" name="nv" id="" group="sex">女<br>

   爱好: 

        <input type="checkbox" name="basketball" id="" group="hobby">  打篮球

        <input type="checkbox" name="itworker" id="" group="hobby"> 写代码

        <input type="checkbox" name="study" id="" group="hobby"> 学习

        <input type="checkbox" name="LOL" id="" group="hobby"> 英雄联盟

   </form>

   // 快速获取表单元素的方法: form.name值

   var form = document.getElementsByTagName('form')[0];

   console.log(form);
 
   console.log(form.userName);

   console.log(form.pass);

   console.log(form.nan);

   console.log(form.LOL);

2、表单事件

事件	方法
提交	onsubmit
重置	onreset
聚焦	onfocus
失焦	onblur

提交: onsubmit
1. 在表单提交的时候会触发这个事件
2. 如果这个事件返回true表示可以提交, 如果返回false表示阻止提交
3. 事件加给form元素
重置: onreset
1. 在表单提交的时候会触发这个事件
2. 如果这个事件返回true表示重置, 如果返回false表示阻止重置
3. 事件加给form元素
聚焦: onfocus
失焦: onblur

3.4添加给表单元素, 3在表单的文本选中的时候触发这个事件, 4在表单的文本失去焦点的时候触发这个事件

   form.onsubmit = function(){
   

       if(form.userName.value == '' || form.pass.value == ''){
   

           alert('请输入账号和密码');

           return false;

       } else {
   

           return true;

       }

   }

   form.onreset = function(){
   

       // console.log('重置了');

       if(confirm('是否重置')){
   

           return true;

       } else {
   

           return false;

       }

   }

   
   form.pass.onfocus = function(){
   

       // 判断当前输入框是否可输入

       console.log(1);

   }

   

   form.pass.onblur = function(){
   

       // 密码校验、文本输入是否正确

       console.log(2);

   }

3、表单方法

方法	用法
submit()	加给form元素, 将指定的form元素提交
reset()	加给form元素, 将指定form元素重置
focus()	表单元素, 将指定的表单元素获取焦点
blur()	表单元素, 将指定的表单元素失去焦点
select()	表单元素, 让form中的表单元素被选中

   var div = document.getElementsByTagName('div')[0];

   div.onclick = function(){
   
          // 提交
          form.submit();

         
          // 重置

          form.reset();

      

          // 获取焦点, 一次只能聚焦一个

          form.pass.focus();

          // form.userName.focus();

    }

    setTimeout(function(){
   

          form.pass.blur();

          // 表单元素被选中, 一次只能选中一个

          // form.pass.select();

          form.nan.select();

      }, 5000);

二、系统对话框

1、alert(弹出的内容): 警告框

2、带有确认按钮的对话框

confirm(要弹出的内容), 具有返回值, 点击确定返回true, 点击取消返回false

3、带有输入框的对话框

prompt(提示内容, 默认值), 具有返回值, 点击确定, 返回的是输入框中的内容, 点击取消返回null

4、打印预览: print()

5、查找: find(要查找的字符)

   // window: 窗口, window和document的关系:窗口包含文档   

   // window.alert(1);

   var a1 = 1;

   console.log(window); 

   // 系统对话框

   // 1. alert(弹出的内容): 警告框

   // 2. 带有确认按钮的对话框: confirm(要弹出的内容), 具有返回值, 点击确定返回true, 点击取消返回false

   var sm = confirm('这是一个新页面, 你知道了吗？');
   
   console.log(sm);

   

   // 3. 带有输入框的对话框: prompt(提示内容, 默认值), 具有返回值, 点击确定, 返回的是输入框中的内容, 点击取消返回null

    var s = prompt('当前你想跳转到第几页', '');

    console.log(s);

   

    // 4. 打印预览: print();

    var btn = document.getElementsByTagName('button')[0];

    btn.onclick = function(){
   

               // print();

               // find(1);

               find('a');

     }
     // 5. 查找: find(要查找的字符);