BOM操作
操作浏览器，需要调用window对象，它是所有浏览器都支持的对象，表示的就是浏览器窗口
window对象可以通过点调用子对象
window.navigator
navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统window.screen
window.history
history.forward() // 前进一页 history.back() // 后退一页window.location(重点)
location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面弹出框
警告框(alert) 确认框(confirm) 提示框(prompt)计时器相关(重点)
setTimeout与clearTimeout(设置单次定时触发，清除)
setInterval与clearInterval(循环触发，清除)
function f1() { alert(123); } function clear() { var t = setInterval(f1,3000); function inner() { clearInterval(t); } setTimeout(inner,9000) } clear();
DOM操作
通过JS代码操作html页面，实现相应效果
要想操作html页面，实现相应动态效果，第一步还是得先解决查找标签的事情
查找标签
直接查找
document.getElementById
document.getElementsByClassName
document.getElementsByTagName间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素js代码在书写时，一定要保证在页面html文件全部加载完毕后才能正常执行，否则报错。两种解决方式
- window.onload = function(里面写js代码)title标签内部
- js写在html文档最下方
节点操作
1.创建节点，2.添加自定义属性，3.添加固有属性，4.添加到DOM树中浏览器展示
// appendChild 直接尾部添加 // 创建标签 var imgEle = document.createElement('img'); // 设置自定义属性 imgEle.setAttribute('id','i1') // 设置固有的属性 imgEle.src = 'longzhu.png' // 添加到DOM树中，让浏览器展示出来 var d1Ele = document.getElementById('d1') d1Ele.appendChild(imgEle)1.创建节点，2.添加固有属性和标签文本值，3.指定位置添加标签
<span>div上面的span</span> <div>div <p>div里面的第一个p</p> <span id="s1"> div里面的span </span> <p>div里面的第二个p <span>div里面的p里面的span</span> </p> </div> <span>div的邻居</span>// insertBefore 固定位置添加 // 创建标签 var aEle = document.createElement("a") aEle.href = 'https:www.baidu.com' aEle.innerText = '点我点我' // 获取参考点标签 var spanEle = document.getElementById('s1'); var divEle = document.getElementsByTagName('div')[0]; // 在d3标签内部，s1标签上方添加创建的a标签 divEle.insertBefore(spanEle,aEle)innerText和innerHTML的区别
// 获取一个标签 var d2Ele = document.getElementById('d2'); // 仅仅能获取到d2标签的内部文本 d2Ele.innerText // 不仅获取文本，标签页全部获取到 d2Ele.innerHTML // 获取标签 var d2Ele = document.getElementById('d2'); // 设置内部文本 d2Ele.innerText = '哈哈' d2Ele.innerHTML = '呵呵' // 设置内部文本(文本中包含标签) d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签 d2Ele.innerHTML = '<h1>我是h1</h1>' // 能够识别html标签
1.获取用户输入的操作
<input type="text"> <textarea name="" id="t1" cols="30" rows="10"></textarea>var inputEle = document.getElementsByTagName('input')[0] inputEle.value // 获取到用户输入的值 并且得到用户输入值 inputEle.value = 'hello world' // 给input框赋值- class操作
<style> .c1 { width: 400px; height: 400px; border-radius: 50%; border: 3px solid black; } .bg_red { background-color: red; } .bg_green { background-color: green; } </style> <div class="c1 bg_red bg_green"></div>// 注意点：通过class获取到的数据是一个数组，需要通过索引拿到单个对象 // 根据class找到相应的标签对象 var cEle = document.getElementsByClassName('c1')[0] // 获取该标签对象的class属性列表并移除背景绿色 cEle.classList.remove('bg_green') // 添加属性 cEle.classList.add('bg-green') // 添加属性 cEle.classList.add('bg-green') cEle.classList.contains('bg-red') // 有则删除，无则添加 cEle.classList.toggle('bg-green')- style样式操作
// 修改高度样式 d1Ele.style.height = '200px' // 修改宽度样式 d1Ele.style.width = '200px' // 修改背景色样式 d1Ele.style.backgroundColor = 'blue'
事件绑定
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。两种绑定事件的方法
- 标签内直接调用相应事件函数
- js代码自动查找标签并绑定事件
(onfocus,onblur)用户输入获取焦点示例
<input type="text" name="" id="inp" value="点击我获取焦点">
<script>
let inpEle = document.getElementById('inp');
inpEle.onfocus = function () { //onfocus 在输入框中获取焦点
inpEle.value = ''
};
inpEle.onblur = function() {
inpEle.value = '点击我获取焦点'
}
</script>(onclick)点击事件案例
<input type="text" name="" id="inp" >
<button id="btn1">开始</button>
<button id="btn2">结束</button>
<script>
// 定义一个存储定时器的全局变量
var flag;
// 先获取代码中需要用到的一些固定标签对象
var inpEle = document.getElementById('inp');
var btn1Ele = document.getElementById('btn1');
var btn2Ele = document.getElementById('btn2');
// 定义一个展示时间的函数
var showTime = function () {
// 获取当前时间
var time1= new Date();
inpEle.value = time1.toLocaleString()
};
// 给b1标签绑定点击事件
btn1Ele.onclick = function () {
// 先判断flag是否已经指代了一个定时器
if (!flag){
flag = setInterval(showTime,1000)
}
};
btn2Ele.onclick = function () {
// 取消定时器
clearInterval(flag);
// 将标志位手动置为布尔值为false的值即可
flag = null;
}
</script>onchange(事件)实现省市联动:
<select name="" id="s1"></select>
<select name="" id="s2"></select>
<script>
// 先获取需要操作的标签对象
var s1Ele = document.getElementById('s1');
var s2Ele = document.getElementById('s2');
var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
// 将所有的省渲染到proEle标签内部 for循环获取所有的省
for (let pro in data){
// 创建option标签
let opEle = document.createElement('option');
// 给option标签设置文本值
opEle.innerText = pro;
// 将生成的option标签添加到proEle中
s1Ele.appendChild(opEle)
}
s1Ele.onchange = function () {
// 先清空cityEle标签内所有的内容
s2Ele.innerHTML = '';
// 获取用户选择的省 根据省拿到对应的市
let choicePro= s1Ele.value;
let cityList = data[choicePro];
// for循环创建option标签添加到cityEle标签内
for (let i =0;i<cityList.length;i++){
// 创建option标签并添加文本
let cEle = document.createElement('option');
// 给option标签设置文本值
cEle.innerText = cityList[i];
// 将生成的option标签添加到proEle中
s2Ele.appendChild(cEle)
}
}
</script>window.onload
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
注意：.onload()函数存在覆盖现象。
扫一扫
1094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
