Jscript常用基本对象和事件监听

Jscript常用基本对象和事件监听

事件

JavaScript响应事件的函数叫作事件处理程序或者事件侦听器。事

件处理程序的名字以“on”开头,如click事件的事件处理程序就 是onclick

document.getElementById("txt")  //通过id获取标签

鼠标事件

事件 介绍

onload 某个页面或图像被完成加载

onclick 鼠标点击某个对象

ondblclick 鼠标双击某个对象

onmousedown 某个鼠标按键被按下

onmousemove 鼠标被移动

onmouseout 鼠标从某元素移开

onmouseover 鼠标被移到某元素之上

onmouseup 某个鼠标按键被松开

键盘事件

事件 介绍

onchange 用户改变域的内容

onkeydown 某个键盘的键被按下

onkeypress 某个键盘的键被按下或按住

onkeyup 某个键盘的键被松开

onreset 重置按钮被点击

onsubmit 提交按钮被点击

onselect 文本被选定

onblur 元素失去焦点

onfocus 元素获得焦点

Event对象常用的属性和方法

属性 描述

srcElement 对于生成事件的 Window 对象、Document 对象或Element 对象的引用

keyCode 针对于键盘事件,返回键盘按下的字符编码值

pageX 事件触发时,鼠标在整个网页中的水平位置

pageY 事件触发时,鼠标在整个网页中的垂直位置

type 事件句柄

cancelable 返回事件是否有默认动作

方法 描述

preventDefault() 停止事件的默认行为

stopPropagation() 阻止事件冒泡

事件方法是值调用改方法触发对于的事件,即通过代码触发事件

方法 描述

click() 相当于鼠标单击

blur() 使对象失去焦点

focus() 实现对象得到焦点

select() 选择表单元素的内容


window对象

window常用几个属性
属性描述
history对 History 对象的只读引用 表示有关客户访问过的URL信息(历史信息)
location用于窗口或框架的location对象 表示当前的Url信息
document对 Document 对象的只读引用
window.location=http://www.baidu.com**   //修改当前url表示跳转到百度
window常用的方法
方法名称说明
prompt()显示可提示用户输入的对话框 返回输入的字符
alert( )显示带有一个提示信息和一个确定按钮的警示框
confirm( )显示一个带有提示信息、确定和取消按钮的对话框 返回boolean值
close()关闭浏览器窗口
open(‘地址’,‘名字’,‘特征’)打开一个新的浏览器窗口,加载给定 URL 所指定的
setTimeout(函数,时间 )在指定的毫秒数后调用函数或计算表达式 //延时函数
setInterval(函数,时间 )按照指定的周期(以毫秒计)来调用函数或表达式(死循环) 可以用clearInterval()方法关闭 定时函数
window常用的事件
名称说明
onload一个页面一幅图像完成加载面或
onmouseover鼠标移到某元素之上
onlick当用户单击某个对象时调用的事件句柄
onkeydown某个键盘按键被 按下
onchange域的内容被改变

history对象

表示有关客户访问过的URL信息(历史信息)

常用方法
名称说明
back()加载history对象列表中的前一个URL
forward()加载history对象列表中的下一个URL
go()加载history对象列表中的某个具体的URL

history.back()----------等价-------------history.go(-1) 浏览器中的后退

history.forward()----------等价-------------history.go(1) 浏览器中的前进

location对象

表示当前的Url信息 浏览器当前url

常用属性
名称说明
host设置或返回主机名和当前URL的端口号
hostname设置或返回当前URL的主机名
href设置或返回完整的URL
常用方法
名称说明
reload重新加载当前文档
replace用新的文档替换当前文档

decment对象

常用方法
名称说明
getElementById()返回对拥有指定id的第一 个对象的引用 (对象的唯一)
getElementsByName()返回带有指定名称的对象 的集合 (相同name属性)
getElementsByTagName()返回带有指定标签名的对 象的集合 (相同元素)
getElementsByTagName()向文档写文本、HTML表
标签对象

(1)标签对象.innerHTML:获取双标签结构的,一对标签结构的,一对标签中间的所有内容

​ 给innerHTML赋值就是改变标签里面的内容

(2)标签对象.value:获取对象的value值 一般用于input标签

复选框的属性

checked属性值 选中:true 未选中:false


动态创建和添加节点(案例)

docment.createElement(“标签名‘)

--------创建节点

docment.createTextNode(“文本”)

--------创建标签节点中的文本对象(字符串)

标签对象.appendChild(文本对象);

---------将文本对象添加到标签中

最后将创建好的标签 添加到HTML中指定的位置

	<ul id="ulid">
			<li>烈火燎原</li>
			<li>冰封</li>
			<li>治愈</li>
		</ul>
		<input type="button" name="" id="" value="学习技能" οnclick="addLi()" />
		
		<script type="text/javascript">
			function addLi(){
				
				var str=prompt("请输入学习的技能名称:");
				var li=document.createElement("li")
				var str=document.createTextNode(str)
				li.appendChild(str)
				document.getElementById("ulid").appendChild(li)
				
			}

标签对象.parentNode() :获取当前对象的父标签

标签对象.removeChild(“子节点对象”) :删除该对象指定的子节点

标签对象.children :获取该对象所有的子元素节点

docment节点对象(根据层次关系访问节点)

常用的几种节点访问方式
属性名称描述
children获取该对象所有的子元素节点 返回一个对象集合
parentNode获取当前对象的父标签
nextElementSibling下一个节点
previousElementSibling上一个节点
创建和插入节点
创建
属性描述
createElement( tagName)创建一个标签名为tagName的新元素节点
createTextNode(“文本”)创建标签节点中的文本对象(字符串)
插入
A.appendChild( B)把B节点追加至A节点的末尾
insertBefore( A,B )把A节点插入到B节点之前
cloneNode(deep)复制某个指定的节点
appendChild(A)在该标签中的末尾插入A标签
删除和替换
名称描述
removeChild( node)删除指定的节点
replaceChild( newNode, oldNode)属性attr用其他的节点替换指定的节点

总结

window对象实现弹出窗口、关闭当前窗口、弹 出页面消息框等效果

Date对象获得当前系统的日期、时间

定时函数:setTimeout()和setInterval()

history和location对象实现浏览器中后退前进和刷新

document对象的方法 getElementById() 、getElementsByName()、getElementsByTagName()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值