前端05
2022/8/27 6:24:43
本文主要是介绍前端05,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录- DOM文档对象模型
- 获取标签值操作
- JS类属性操作
- JS样式操作
- 事件
- jQuery类库
- 作业
DOM文档对象模型
获取标签值操作
1.操作标签:input、select、textarea
2.语法结构:查找到的标签.value
3.实操
let iEli = document.getElementById("d1"); //查找标签(也可通过类 属性) console.log(iELI.value); //获得标签值 VM171:2 秋天到啦!
JS类属性操作
1.className:获取所有标签下的类名(字符串)
2.classList.remove(cls):删除指定的类
3.classList.add(cls):添加类
4.classList.contains(cls):存在返回true 不存在返回false
5.classList.toggle(cls):存在就删除 否则添加
JS样式操作
1.对于CSS属性操作 使用style.属性名
注:对于属性名中存在-(中横杠)取掉中横杠并将第一个字母大写
let cEli = document.getElementsByClassName("c4")[0]; cEli.style.backgroundColor = "red"; 'red'
事件
1.定义:可以理解为给html标签绑定一些额外的功能(能够触发JS代码运行)
2.分类:
名称 | 作用 |
---|---|
onclick | 单击某个对象时调用的事件句柄 |
ondblcick | 双击某个对象时调用的事件句柄 |
onfocus | 元素获得焦点 //输入框 |
onblur | 元素失去焦点 |
onchange | 域的内容被改变 |
onkeydown | 某个键盘键被按下 |
onkeypress | 某个键盘键按下松开 |
onkeyup | 某个键盘架被松开 |
onload | 一张页面或一副图像完成加载 |
onmousedown | 鼠标按钮被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标移到某元素上 |
onselect | 在文本框中的文本被选中时发生 |
onsubmit | 确认按钮被点击 使用的对象是form |
3.绑定事件的方式
3.1 提前写函数 标签内部指定
<body> <div> <form action=""> <input type="button" value="点我" onclick = func()> </form> </div> <script> function func(){ alert("天气凉爽啦
这篇关于前端05的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21动态面包屑教程:新手入门指南
- 2024-12-21动态主题处理教程:新手必读指南
- 2024-12-21富文本编辑器教程:新手入门指南
- 2024-12-21前端项目部署教程:从零开始的全面指南
- 2024-12-21拖拽表格教程:轻松入门指南
- 2024-12-21Element-Plus教程:新手入门与实战指南
- 2024-12-21TagsView标签栏导航教程:轻松掌握标签栏导航
- 2024-12-21动态表格实战:新手入门教程
- 2024-12-21动态菜单项实战:一步步教你实现动态菜单项
- 2024-12-21动态面包屑实战:新手教程