引入
window对象
- 所有浏览器都支持 window 对象。它表示浏览器窗口。
- *如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
- *没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。全局函数是 window 对象的方法。
- 接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
- 一些常用的Window方法：
-
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
window的子对象
- navigator对象
- 浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息;
-
navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统 #爬虫伪造
- screen对象
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
- history对象
-
history.forward() // 前进一页 history.back() // 后退一页
-
- location对象
- window.location对象用于获得当前页面的地址,并把浏览器重定向到新的页面
-
location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面
弹出框
- 警告框:用户确保用户可以得到某些信息
- 语法:alert('确认是否')
- 警告框出现后,用户需要点击确定按钮才能继续进行操作;
- 确认框:用户可以验证或者接受某些信息
- 当确认框出现后,用户需要点击或则取消按钮才能继续进行操作;
- 语法:confirm('Are you sure')
- 提示框:经常用于提示用户在进入页面前输入某个值
- 用户需要输入值,才能继续进行,点击确认后,那么返回值为输入的值,点击取消,返回null;
- 语法:prompt('输入你的答案')
计时相关
- 通过使用这个内置函数,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件;
- setTimeout()语法: var t = setTimeout('js语句',毫秒);
-
function foo(){ alert(666); }; var t = setTimeout('console.log(555)',2000); #字符串类型 # undefined 555 #两秒之后执行
-
function foo(){ alert(666); }; var t = setTimeout(foo,2000); #这里传入的是函数名;加上括号是返回值
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
- clearTimeout():清除时间对象;
- setinterval()周期调用函数或计算表达式;
-
var t = setInterval(function (){console.log(123)},1000) undefined 123 clearInterval(t)
HTML DOM树
DOM标准规定HTML文档中的每个成分都是一个节点(node):
- 文档节点(document对象):代表整个文档
- 元素节点(element对象):代表一个元素(标签)
- 文本节点(text对象):代表元素(标签)中的文本
- 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
- 注释节点(comment对象):
查找标签
- 直接查找
-
通过id获取一个标签 document.getElementById('ls') 通过class获取一个标签 document.getElementByClassName('ck') 得到的是一个类似列表的东西 document.getElementsByTagName 根据标签属性名获取标签合集 得到的也是一个类似列表的东西;
#先找到标签属性,例如 span div p input 标签里面有自定义属性,通过attribute修改 - 间接查找
-
parentElement 父节点标签元素 children 所有子标签 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素 #******这些都是属性,不需要括号
节点操作
- 创建节点:createElement(标签名)
- 语法: var divEle = document.creatElement('div');
- 添加节点:somenode.appendChild(newnode);
- 原有节点调用函数,参数为创建的新标签;为原有标签追加一个子节点;
- somenode.insertBefore(newnode,某个节点);
- 把增加的节点放到某个节点的前边
- 删除节点:removeChild(要删除的节点)
- 注意注意:::该方法通过父元素调用删除
- 替换节点:节点对象.replaceChild(新节点,某个节点)
- 属性节点
- 获取文本节点的值
-
var divEle = document.getElementById("d1") divEle.innerText ='<p>gg</p>' #会把value值一起原样添加到父节点 divEle.innerHTML ='<p>gg</p>'#会解析语句是否是标签,若是,按规则添加;
会直接替换掉原有标签
- attribute操作
-
var deEle = document.getElementById('s1') undefined deEle.getAttribute('age') #通过标签对象获取标签是否含有age属性 null deEle.setAttribute('age','18') #给标签对象设置自定义属性( age = '18') undefined
deEle.removeAttribute('age') #删除该属性
-
- 获取值操作
- 适用标签 input select textarea 找到之后修改value值,直接赋值
- class的操作
-
className 获取所有样式类名(字符串) classList.remove(cls) 删除指定类 classList.add(cls) 添加类 classList.contains(cls) 存在返回true，否则返回false classList.toggle(cls) 存在就删除，否则添加 -
#例子:::
var t = document.getElementById('s1')
t.classList.remove('h2') undefined t.classList.add('h2') undefined t.classList.remove('h2') undefined t.classList.add('h2') undefined
-
-
指定css操作
-
t.style.borderRadius = '30%'; #属性中有中横线的把中横线去掉,然后把首字母大写 例如: border-radius 改为 borderRadius
事件
- 常用事件
-
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击，使用的对象是form。
- 绑定方式:
-
<div id="s1" class="h1 h2"></div> <button onclick="changeStyle();">点我</button> <button id="b2">再点一下</button> <script> ####方式一 (通过标签里的方法,直接调用) function changeStyle() { var s = document.getElementById('s1'); s.classList.toggle('h2'); s.style.borderRadius = '20%'; } ####方式二(通过标签先找到事件对象,然后再调用事件) var sw = document.getElementById('b2'); sw.onclick = function secondChange() { var s = document.getElementById('s1'); s.style.borderRadius = '50%'; } -
select联动<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <label id = 's1' for = "province">省</label> <select name="proVince" id="d"> <option value="">请选择省</option> </select> <label id = 's2' for="county">市</label> <select name="counTy" id="c"> </select> <script> var dic = { '北京':['昌平区','怀柔区','海淀区'], '上海':['浦东区','徐汇区','普通信区'], '山东':['烟台区','青岛区','威海区'] }; var sel1ELe = document.getElementById('d'); (function () { for (var i in dic){ // 用document创建节点; var tem = document.createElement('option'); // 给节点添加属性; tem.innerText = i; // 给节点安排位置 sel1ELe.appendChild(tem); } })(); var sel2Ele = document.getElementById('c'); sel1ELe.onchange = function (ev) { // 普通写法 // innerHTML代表改变标签调用对象的值,如果有标签会被识别; // sel2Ele.innerText = ''; // 单独for循环遍历时,若是对象,则i代表第一个key值,若是列表则代表索引; // for (var i in dic[sel1ELe.value]){ // var tem = document.createElement('option'); // tem.innerText = dic[sel1ELe.value][i]; // sel2Ele.appendChild(tem); // } // forEach写法 // innerHTML代表改变标签调用对象的值,如果有标签会被识别; sel2Ele.innerText = ''; // 列表单独的方法,这里参数i代表列表中的值 dic[sel1ELe.value].forEach(function (i) { var tem = document.createElement('option'); tem.innerText = i; sel2Ele.appendChild(tem); }) } </script> </body> </html>
-
