前端05

2022-08-26 23:33:27 作者：互联网

DOM文档对象模型
事件
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("天气凉爽啦 标签：jQuery,05,标签,前端,getElementById,let,document,选择器	

来源： https://www.cnblogs.com/040714zq/p/16629488.html