js的实际应用
1.查找元素:根据id查找,注意,在给标签设置id时,id的值一定要唯一,不能重复document.getElementById(标签的id值)
;根据标签的名字查找多个元素document.getElementsByTagName(标签名字)
;查找属于父元素的所有与标签名称相符合的子标签父元素.getElementsByTagName(标签名字)
2.通过选择器进行查找:选择器包括#id .class值 元素
document.querySelector("选择器")
查找与选择器匹配的标签,只匹配第一个;document.querySelectorAll("选择器")
查找与选择器匹配的标签,匹配所有
3.修改:修改内容.innerText
在赋值时,把字符串当作普通的文本进行处理,如果字符串中加了标签,则标签会原样输出。innerHTML
在赋值时,会把字符串当成HTML
代码进行处理,会解析成HTML
标签进行结果的显示
4.删除:父元素.removeChild(子元素)
5.新增:父元素.appendChild(子元素)
建立父子元素关系document.createElement("标签")
创建新的标签元素
事件
在js中可以给标签加上事件,事件则会调用相应的函数,完成人们想要的页面效果。事件类型如下:
onclick //鼠标单击事件
ondblclick //鼠标双击事件
onmouseover //鼠标移入事件
onmouseout //鼠标移出事件
onmousedown //鼠标点击事件
window.event 中有一个buttons属性
取值为1时,左键被按下
取值为2时,右键被按下
取值为4时,中间滚轮被按下
onfocus //光标移入事件
onblur //光标移出事件
onchange //值改变事件
onkeydown //按下键盘按键时
onkeypress //按下按键时
onkeyup //松开按键时
事件对象(window.event
):表示事件发生时,所有跟事件相关联的信息,可以简写为event
event.preventDefault //阻止事件的默认行为
event.stopPropagation() //停止事件冒泡
事件冒泡是指:在子标签上触发的一个事件,会沿着标签的包含关系,逐级向上传播
this:this代表了触发当前事件的标签对像,例如<input type="button" value="增加" onclick="delete(this)">
这里的this
就代表当前的input
按钮
window (代表整个浏览器窗口对象):.alert("提示的文字") //弹出对话框窗口
.confirm("提示的文字") //弹出确认框窗口 如果点击了确定就返回true 如果点击了取消则返回false
.setTimeout(函数名称,毫秒值) //延时执行一个函数
举例:
function delay() { console.log("ok"); } var n = window.setTimeout(delay, 10000); // 执行会返回一个数字 window.clearTimeout(n); // 根据setTimeout返回的数字,可以使用clearTimeout清除延时效果 .setInterval(函数名称, 毫秒值); // 根据时间间隔执行函数
.clearInterval() // 取消间隔执行location 对浏览器地址栏的抽象
location.href 用来获取或改变地址栏的值
location.reload(); // 刷新页面history.back(); // 上一个网页
history.forward(); // 下一个网页