HTML5教程

前端05

本文主要是介绍前端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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航