BOM与DOM操作
目录
BOM
BOM指浏览器对象模型， 主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
window对象
所有浏览器都支持window对象，它表示浏览器窗口。
window是浏览器中的顶级对象，所有JavaScript的全局对象、函数以及变量都会成为window中的对象的属性或者方法，在调用window是可以省略“window”
常用的window方法
- window.innerHeight // 获得浏览器窗口的内部高度
- window.innerWidth // 获得浏览器窗口的内部宽度
- window.open() // 打开新窗口
- window.close() // 关闭当前窗口
window的子对象
navigator对象
window.navigator浏览器对象，通过这个对象可以判定用户使用的浏览器信息，window.可省略
- window.navigator.appName // web浏览器全称
- navigator.appVersion // web浏览器厂商和版本详细信息
- navigator.userAgent // 客户端大部分信息
- navigator.platform // 浏览器运行所在的操作系统
screen对象
window.screen屏幕对象
- screen.availWidth // 可用的屏幕宽度
- screen.availHeight // 可用的屏幕高度
history 对象
window.history对象，对象包含浏览器的浏览记录
- history.forward() // 前进一页
- history.back() // 后退一页
location对象
window.location对象，用于获得当前页面URL，以及重定向
- location.href // 获取当前页面的URL
- location.href="URL" // 跳转到指定的URL地址
- location.reload() // 重新加载页面
弹出框
在JavaScript中有三种类型的弹出框：警告框、确认框、提示框
- alert("这是一个警告框，只有一个确认按钮，必须点击确认才能进行其他操作")
- confirm("这是一个确认框，有确认-返回true、取消-false两个按钮，可用于验证或接受消息")
- prompt("这是一个提示框，需要输入值，有确认-返回输入的值或者“ ”、取消-返回null两个按钮")
计时
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，即计时事件
- var t=setTimeout(“JS语句”,毫秒) // 相隔xx毫秒，执行JS语句
- clearTimeout("计时变量") // 清除取消setTimeout设置
- var t=setInterval(“JS语句”,时间间隔毫秒) // 每隔xx毫秒，就执行一次JS语句
- clearInterval("计时变量") // 清除取消setInterval设置
<script>
// setTimeout
var t=setTimeout(function () {alert("提示框出来啦");},3000)
// 清除setTimeout
clearTimeout(t)
// 每隔3秒就执行一次相应函数
var t2 = setInterval(function(){alert("提示框出来啦");}, 3000)
// 取消setInterval设置
clearInterval(t2);
</script>
DOM
DOM指文档对象模型，它定义了访问和处理HTML文档中的标准方法。HTML文档中每一个成分都代表着树中的一个节点。
节点分为：文档节点、元素节点、属性节点、文本节点，通过这些节点可以控制并修改HTML
查找标签
直接查找
- document.getElementById("id值") // 根据id值获取一个标签
- document.getElementsByClassName("类值") // 根据class属性获取，返回的是数组
- document.getElementsByTagName("标签名") // 根据标签名获取标签合集，返回的是数组
间接查找
- parentElement // 父节点标签元素
- children // 所有子标签
- firstElementChild // 第一个子标签元素
- lastElementChild // 最后一个子标签元素
- nextElementSibling // 下一个兄弟标签元素
- previousElementSibling // 上一个兄弟标签元素
节点操作
创建节点
-
语法：createElement(标签名)
实例：
var divEle = document.createElement("div");
添加节点
- 语法：父元素.appendChild(newnode) // 在最后追加一个子节点
- 语法： 父元素.insertBefore(newnode,某个节点); // 把增加的节点放到某个节点的前边。
删除节点
- 父元素.removeChild(要删除的节点) // 获得要删除的元素，通过父元素调用该方法删除。
替换节点
- 父元素.replaceChild(newnode, 某个节点);
属性节点
-
获取文本节点的值
var divEle = document.getElementById("d1") divEle.innerText divEle.innerHTML -
设置文本节点的值
var divEle = document.getElementById("d1") divEle.innerText="1" divEle.innerHTML="<p>2</p>" -
attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src=".."
获取值操作
-
语法：elementNode.value
var iEle = document.getElementById("i1"); //input console.log(iEle.value); var sEle = document.getElementById("s1"); // select console.log(sEle.value); var tEle = document.getElementById("t1"); // textarea console.log(tEle.value);
class操作
- className // 获取所有样式类名(字符串)
- classList.remove(cls) // 删除指定类
- classList.add(cls) // 添加类
- classList.contains(cls) // 判断是否存在，存在返回true，否则返回false
- classList.toggle(cls) // 判断是否存在，存在就删除，否则添加
指定css操作
- 对于没有中横线的CSS属性一般直接使用style.属性名即可。
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
- 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
常用事件
- onclick // 当用户点击某个对象时调用的事件句柄
- ondblclick // 当用户双击某个对象时调用的事件句柄
- onfocus // 元素获得焦点
- onblur // 元素失去焦点
- onchange // 域的内容被改变
- onkeydown // 某个键盘按键被按下
- onkeypress // 某个键盘按键被按下并松开
- onkeyup // 某个键盘按键被松开
- onload // 一张页面或一幅图像完成加载
- onmousedown // 鼠标按钮被按下
- onmousemove // 鼠标被移动
- onmouseout // 鼠标从某元素移开
- onmouseover // 鼠标移到某元素之上
- onselect // 在文本框中的文本被选中时发生
- onsubmit // 确认按钮被点击，使用的对象是form
js绑定事件的方式
- 方式1 不推荐使用
<button onclick="func()">按钮</button> - 方式2 推荐使用 标签查找动态绑定的方式
function func() { alert('我被点击了') } var i1Ele = document.getElementById('d1'); i1Ele.onclick = function () { // i1Ele标签被点击之后 你能做的事 func() }
```
解决 js代码体现运行报错的情况
- 方式1
利用 window.onload事件 等待某个对象加载完毕之后再执行
xxx.onload = function () - 方式2
直接将你的js代码写在body最下方
jQuery
jQuery介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库，能够更方便的处理并简化JavaScript编程
类似python的模块
jQuery的使用
必须要先导入，再使用。引入本地jQuery文件，或者是在线文档，如：
jQuery语法结构
- jQuery('选择器').action(属性)
- $('选择器').action(属性)
查找标签
基本选择器
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器：
$("*")
组合选择器：
$("#id, .className, tagName")
层次选择器
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
