JavaScript基础知识<三>

本文深入探讨了JavaScript中事件监听、DOM编程及BOM编程的核心概念与实践应用,包括事件源、事件类型、监听器的使用方法,以及如何通过DOM获取、修改文档节点和样式。同时介绍了表单验证、页面加载、滚动、调整大小等事件,以及如何通过BOM实现窗口操作。文章旨在提供全面的JavaScript基础知识,帮助开发者掌握关键技能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一,JavaScript的监听事件

三个部分:事件源(div),事件(点击),监听器(function)
    1)event   事件对象
    属性  type(事件类型)  clientX(事件发生的坐标x)clientY(y)
    2)<div id="test" onclick="f(this);">HelloWorld</div>
    把当前发生事件的事件源对象传递到函数中
标准的使用方式
1)html组件
2)javascript的function
3)html组件中绑定一个事件,触发function执行onclick="f(this);"
一般性事件
onclick=“f();”  单击事件
ondblclick            双击事件
onmousedown         鼠标点下去

onmousemove         鼠标移动 

onmouseout             鼠标移出
onmouseover         鼠标移入
onmouseup             鼠标抬起来
body相关事件
onload=“fun();”  页面加载时触发该函数
onscroll                  页面滚动时触发
onresize                 页面调整大小时触发
form表单相关事件
        onblur:当前元素失去焦点触发
        onchange:当前元素失去焦点并且值发生改变时触发
        onfocus:获得焦点时触发
        onsubmit:表单提交时触发(form标签中)
        onsubmit="return test2();" test2函数中有返回值,true/false代表是否提交数据
二.DOM编程

通过document对象获取,文档的节点(标签)
Dom中常见的函数
    1)document.getElementById(“id”);  返回一个元素
    2)document.getElementsByName("name"); 返回一组数据 arr
    3)document.getElementsByTagName("tagName");返回一组数据
样式修改
    css:background-image
    js:backgroundImage
常见的属性
    1)this代表当前的标签对象
    2)innerHTML  标签体内容
    3)e.childNodes 获得子节点
    4)e.nodeValue 获得节点的内容
    5)e.firstChild  获得第一个子节点
    6)e.lastChild    获得最后一个子节点
    7)e.parentNode 获得父节点
Dom结构修改的方法
    1)createElement("标签名称");
    2)removeChild(被删除子标签);
    3)replaceChild(新标签,旧标签);
    4)createTextNode("文本内容");
    5)appendChild(子节点对象);
表单的方法 验证
    form.submit();手动提交表达
    input.select();文本处于选中
    input.focus();使光标落入文本框中
三,BOM编程

常见的方法
1)window.open("url");
    2)window.close();关闭浏览器窗口
    3)window.setTimeOut(fun,time);重复调用方法
    4)window.location.href="table.html";









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值