表单事件案例

<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节点操作

表单事件、常用的字符串,数组api

表单事件案例

常用的字符串,数组api

更多相关文章

随机推荐