大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新……
github:https://github.com/Daotin/Web
博客园:http://www.cnblogs.com/lvonve/
CSDN:https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、表单新增内容
1、表单新增属性
1.1、type相关属性
tel
url
number
search
range
color
时间日期相关
1.2、表单其他属性
1、placeholder:提示文本
2、autofocus:自动获取焦点
3、autocomplete:自动完成:on 打开,off 关闭。
前提:必须成功提交过;添加 autocomplete 的元素必须有 name 属性。
4、required:必须输入,如果未输入将阻止表单提交
5、pattern:正则表达式验证
multiple:可以一次选择多个文件(在 email中,multiple 允许填写多个邮件地址,中间用逗号隔开)
2、表单新增元素
datalist 元素
功能:拓展下拉菜单,可以手动输入选项。
1、因为能够手动输入选项,所以需要输入框;
2、输入框通过 list 属性和 datalist 关联起来;
3、value 为选中后输入框的内容,label 为 value 的辅助描述性内容。
注意:如果 type 的类型为 url 网址的话,value 的值必须加 http:// 或 https:// 才能够显示出来。
3、新增表单事件
oninput:当元素中的内容改变时,就会触发。
oninvalid:当验证不通过时触发。
setCustomValidity:修改 pattern 校验失败时,默认的提示信息。
4、进度条
progress:
属性: max 最大值,value:当前值
meter(度量器):
属性:
high:被界定为高的值的范围。
low:被界定为低的值的范围。
max:规定范围的最大值。
min:规定范围的最小值。
optimum: 规定度量的最优值。
value:规定度量的当前值。
5、案例:表单总结
二、多媒体新增内容
audio:音频
属性:
src:播放的音频文件路径
controls:显示音频播放器的控制面板
autoplay:自动播放
loop:循环播放
video
属性:
src:播放的音频文件路径
controls:显示音频播放器的控制面板
autoplay:自动播放
loop:循环播放
weight:宽度(一般只需要设置宽度或者高度,可以使视频等比例缩放。)
height:高度
poster:视频未播放时展示的画面。默认为视频第一帧的画面。
source
由于不同浏览器支持的视频格式不同,所以我们在进行视频添加的时候,需要考虑浏览器是否支持。我们可以准备多种不同格式的视频文件,然后使用source标签,让浏览器选择支持的视频格式播放视频。
浏览器或从上至下,如果浏览器支持mp4格式就播放,不支持看下一个flv格式,如果都不支持就输出 “ 浏览器不支持该格式的视频文件”。
三、新增获取/操作元素
1、新增获取元素
2、新增操作元素类样式
PS:classList 的方式与 document.querySelector("选择器").className 的方法对比:
classList 的方法添加和删除不会清除原来的 class 类样式,只是在其基础上添加和删除。而 className的方式直接对源类样式操作,容易遗漏和误操作。
示例:
四、自定义属性
定义:以 “data-” 开头,后面必须有至少一个字符,多个单词间用 “-” 连接。
建议:
1、名称中应该都是用小写字符;
2、名称中不要包含任何特殊符号;
3、名称中不要由纯数字组成。
获取自定义属性的值
使用 "元素.dataset[]" 的方式获取自定义属性的值。其中自定义属性的名称要使用驼峰命名法填写。
欢迎关注
Web前端之巅
念念不忘,必有回响。
领取专属 10元无门槛券
私享最新 技术干货