表单事件、常用的字符串,数组api
程序员文章站
2022-05-29 12:48:53
...
表单事件案例
<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 ]
上一篇: Oracle启动与spfile文件
下一篇: 们如何小弟我动用不了student数据库