表单事件案例

<style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        form{
            width: 26.875em;
            height: 15em;
            padding: 2em;
            display: grid;
            grid-template-rows: repeat(4,1fr);
            background-color: rgb(215, 246, 253);
            place-content: center;
            /* place-items: center; */
        }
        h2{
            text-align: center;
            color: green;
        }
        input{
            height: 2em;
            padding: 0 1em;
        }
</style>
<body>
    <form action="">
        <h2>用户登录</h2>
        <p>用户名：<input type="text" name="uname" onblur="check(this)"></p>
        <p>密　码：<input type="password" name="pwd" onblur="check(this)"></p>
        <button>登 录</button>
    </form>
    <script>
        let btn=document.querySelector('button');
        btn.onclick=()=>{
            // 阻止表单的默认提交行为：
            // 方法一：return false
            // return false;
            // 方法二：event.preventDefault()
            event.preventDefault();
            // 阻止冒泡
            event.stopPropagation();
            // 非空验证
            // 表单内的每个元素都有一个form属性与当前表单绑定，可利用其获取每个元素的值。
            let uname=btn.form.uname;
            let pwd=btn.form.pwd;
            if(uname.value==''){
                alert('用户名不能为空！');
                return false;
                uname.focus();
            }
            if(pwd.value==''){
                alert('密码不能为空！');
                return false;
                pwd.focus();
            }
            alert('登录成功！');
        }
        function check(obj){
            // 方法二：event.preventDefault()
            event.preventDefault();
            // 阻止冒泡
            event.stopPropagation();
            // 非空验证
            if(obj.value==''){
                alert(obj.parentNode.innerText + '不能为空！');
                return false; //必需写在obj.focus()前面，否则死循环，一直弹窗。
                obj.focus();
            }
        }
    </script>
</body>

常用的字符串,数组api

const pp='好好学习，天天向上！';
// 常用的字符串API
// 1.length:获取长度
console.log(pp.length);
// 2.indexOf()判断指定字符在目标字符串中的索引
console.log(pp.indexOf('天天')); // 返回 5
    // 当不存在时，返回-1
console.log(pp.indexOf('李')); // 返回 －1
// 3.search() 功能跟indexOf一样，但支持正规表达式且语义化更好。
console.log(pp.search('天天')); // 返回5
// 4.``模板字面量，可用作字符串拼接等。
// 5.split（）把字符串转成数组，如果参数为空字符串，则会将原始字符串打散，返回以单个字符组成的数组
console.log(pp.split('，')); //返回 [ '好好学习', '天天向上！' ]
// 6.join()把数组用指定字符拼装成字符串
const arr=['my','name','is','lst'];
console.log(arr.join(' ')); // 返回 my name is lst
// 7.replace('要替换的内容','新内容')字符串替换
console.log(pp.replace('好好','日日')); // 返回 日日学习，天天向上！
// 8.slice(起始索引,结束索引)字符串截取。注：不包含最后一个
console.log(pp.slice(0,3)); // 返回 好好学
// 9.substr(开始索引,数量)字符串截取,如果只有一个参数，表示从开始索引起到之后的所有字符。支持反向截取（原始字符串从后往前数索引分别为：-1,-2,……，截取时也是从起始位置往后数）
console.log(pp.substr(0,4)); // 返回 好好学习
console.log(pp.substr(-5,1)); //返回 天
console.log(pp.substr(-5,5)); //返回 天天向上！
console.log(pp.substr(-5)); //返回 天天向上！
// 10.toLowerCase转小写；toUpperCase转大写
let str='abcde';
console.log(str.toLowerCase()); // 返回abcde
console.log(str.toUpperCase()); // 返回ABCDE
// 11. link生成a链接
console.log(pp.link('http://baidu.com')); // 返回 <a href="http://baidu.com">好好学习，天天向上！</a> 
// 常用的数组API
let Arr=[1,2,3,4,5];
// 1.rest语法 ...arr
let arr2=[...Arr];
console.log(arr2); // 返回 [ 1, 2, 3, 4, 5 ] 
console.log([0,...Arr,7,8,9]); // 返回 [ 0, 1, 2, 3, 4, 5, 7, 8, 9 ]
// 2. Array.of 将离散的值转成数组
console.log(Array.of(1,2,3,4,5)); // 返回 [ 1, 2, 3, 4, 5 ] 
// 3.Array.from(类数组) 将一个类数组(集合)转成数组：常用于获取DOM节点操作
let Arrs=[];
// 4.数组的增加删除 － 从数组的尾部开始
    // 增加：push() 将元素增加到数组的尾部。可一次追加多个元素，用,隔开。
    Arrs.push('笔记本');
    Arrs.push('手机');
    console.log(Arrs); // 返回 [ '笔记本', '手机' ] 
    // 删除：pop() 从数组尾部开始删除
    Arrs.pop();
    console.log(Arrs); // 返回 [ '笔记本' ]
// 5.数组的增加删除 － 从数组的头部开始
    // 增加：unshift() 将元素增加到数组的头部，可一次追加多个元素，用,隔开。
    Arrs.unshift('平板');
    console.log(Arrs);   // 返回 [ '平板', '笔记本' ] 
    // 删除：shift() 从数组头部开始删除
    Arrs.shift();
    console.log(Arrs); // 返回 [ '笔记本' ]
    // 如果一次添加多个元素，unshift(1,2,3) 执行结果是按倒序进行添加，即：先添加3，再2，再1。即：1在最上面，3在最下面。跟书写顺序相同。
    Arrs.unshift(1,2,3);
    console.log(Arrs);  // 返回 [ 1, 2, 3, '笔记本' ] 
// 6. delete Arr[索引] 删除数组中任意位置的元素。此方法删除元素后，只是把内容删了，索引还在，只是内容变成了空白，length不变。不影响遍例
    delete Arrs[2];
    console.log(Arrs); // 返回 [ 1, 2, , '笔记本' ]
    // 7.数组的length属性是可写属性，可以设置。如果设置的值小于当前数组长度，则从数组尾部开始删除
    Arrs.length=2;
    console.log(Arrs); // 返回 [ 1, 2 ] 
// 数组的迭代（遍例）
let Arr2=[1,2,3,4,5];
// 1.arr.forEach(function(item,index,arr){...})
    // 作用：对数组的每个元素进行调用处理
    // 参数说明：
    // item:(必选参数)数组中的每一个元素的值
    // index:(可选参数)每个元素的索引
    // arr:(可选参数)当前数组
    // 没有返回值
    Arr2.forEach((item)=>{
        item+=1;
        console.log(item); // 返回 2,3,4,5,6
    });
// 2.arr.map(function(item,index,arr){...})
    // 作用、参数、功能跟forEach一样，只是有返回值,返回一个处理后的数组。
    let newArr=Arr2.map(item=>item*2);
    console.log(newArr); // 返回新数组 [ 2, 4, 6, 8, 10 ]
// 3.arr.every(function(item){...})
    // 作用：数组成员全部满足条件，返回true，否则返回false
    // 返回值：true/false
    let a=Arr2.every(item=>item>4);
    console.log(a); // 返回 false
    a=Arr2.every(item=>item>0.5);
    console.log(a); // 返回 true
// 4.arr.some(function(item){...})
    // 作用：数组成员中只要有一个满足条件就返回true,全部不满足时和返回false
    // 返回值：true/false
    a=Arr2.some(item=>item>=5);
    console.log(a); // 返回 true
    a=Arr2.some(item=>item>=55);
    console.log(a); // 返回 false
// 5.arr.filter(function(item){...})
    // 作用：返回数组中满足条件的元素所组成的新数组
    // 返回值：满足条件的新数组
    a=Arr2.filter(item=>item>2);
    console.log(a); // 返回 [3,4,5]
// 6.arr.find(function(item){...})
    // 作用：返回数组中满足条件的第一个元素的值
    // 返回值：元素的值
    a=Arr2.find(item=>item>3);
    console.log(a); // 返回 4
// 7.arr.findIndex(function(item){...})
    // 作用：返回数组中满足条件的第一个元素的索引
    // 返回值：元素的索引int
    a=Arr2.findIndex(item=>item>3);
    console.log(a); // 返回 3
// 8.arr.reduce(function(acc,cur,index,arr){...},number)
    // 作用：归并操作，比如求数组所有元素之和、乘积等等
    // 参数说明：第一个是回调函数，有4个参数。第二个是number默认为0，可选，表示从几开始累加。例如求和：意思就是数组所有元素之和再+number,用于初始化等操作。
    // acc:累加器
    // cur:当前元素
    // index:当前元素索引
    // arr:当前数组
    // number:默认值0，可选。
    a=Arr2.reduce((acc,item)=>acc+item);
    console.log(a); // 返回 15
    a=Arr2.reduce((acc,item)=>acc+item,60);
    console.log(a); // 返回 75
// 数组排序
let Arr3=[1,10,2,20,3,4,5];
// 1.arr.sort(callback)
    // 参数说明：可选
    // 如果不写参数，则按照ask码排序，1,10,2,20,3...不是理想结果,想按照数字顺序排需要加入回调函数参数
    // 顺序排：function(a,b){a-b}
    // 倒序排：function(a,b){b-a}
    Arr3.sort();
    console.log(Arr3); // 返回 [ 1, 10, 2, 20, 3, 4, 5 ]
    Arr3.sort((a,b)=>a-b);
    console.log(Arr3); // 返回 [ 1, 2, 3, 4, 5, 10, 20 ]
    Arr3.sort((a,b)=>b-a);
    console.log(Arr3); // 返回 [ 20, 10, 5, 4, 3, 2, 1 ]
// 数组截取元素
// 1.arr.slice(开始索引，结束索引),返回的结果不包含最后索引本身的元素。
    // 用法同字符串的str.slice一样。可正向可反向取
    a=Arr3.slice(3,5);
    console.log(a); // 返回 [ 4, 3 ] 结果不包含结束索引5所在的元素。
// 数组元素的增删改，最强大的一个函数
    // arr.splice(参数数量可变)
    // 参数说明：参数数量可变。但前两个固定
    // 第一个：index 为起始索引，即从第几个元素开始操作
    // 第二个：删除数量，即删除几个元素。如果为0则一般用于插入操作
    // 1.删除操作
    let Arr4=[1,2,3,4,5,6,7,8];
    Arr4.splice(1,2); // 从第2个起删除两个
    console.log(Arr4); // 返回 [ 1, 4, 5, 6, 7, 8 ]
    // 2.更新操作(先删除再填充)
    Arr4.splice(1,2,10,20);
    console.log(Arr4); // 返回 [ 1, 10, 20, 6, 7, 8 ]
    // 3.插入操作：在索引前方插入
    Arr4.splice(2,0,'My','Name','Is');
    console.log(Arr4); // 返回 [ 1, 10, 'My', 'Name', 'Is', 20, 6, 7, 8 ]
    // 可以用...arr 语法操作
    let news=[666,888,999];
    Arr4.splice(5,0,...news); // 在索引5的元素前面插入news数组元素
    console.log(Arr4); // 返回 [ 1, 10, 'My', 'Name', 'Is', 666, 888, 999, 20, 6, 7, 8 ]

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Ement常用语法、元素四类属性、布局标签、div+class与 html5语义化标签的优缺点

2021-12-22 23:47:07