01. BOM & DOM
1.BOM
Browser Object Model 是指浏览器对象模型，它使JavaScript有能力与浏览器对话
window对象
所有浏览器都支持window对象，它表示浏览器窗口。
Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。
所有javascript全局对象，函数以及变量均自动成为window对象的成员
全局变量时window对象的属性，全局函数是window对象的属性之一
HTML DOW 的 document 也是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对象
window.history 对象包含浏览器的历史
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用前进或后退一个页面
history.forward() // 前进一页
history.back() // 后退一页
location对象
location.href // 获取url
location.href="url" // 跳转到指定页面
location.reload() // 重新加载页面
弹出框
警告框；需要用户确认后才能继续操作
alert("文本")；
确认框；如果用户确认返回值为true，如果用户点击取消，那么返回值为false
confirm("文本");
提示框；如果用户有输入，返回输入值。如果用户点击取消，返回值为null
prompt("文本","值")
计时相关
setTimeout() 间隔多少毫秒后执行
var t = setTimeout("js语句",毫秒数)
var t = setTimeout(function(){alert('abc');},3000)
clearTimeout() 关闭setTimeout
clearTimeout(t) // 将t对象关闭
setInterval() 每隔多少毫秒执行一次
setInterval("js语句",间隔毫秒数)
var t = setInterval(function(){alert('abc');},3000)
clearInterval() 关闭setInterval
clearInterval(t)
02.DOM
DOM 是一套对文档的内容进行抽象和概念化的方法。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object model）。HTML DOM 模型被构造为对象的树
img
DOM标准规定HTML文档中的每一个成分都是一个节点（node）
文档节点（document对象）代表整个文档
元素节点（element 对象）代表一个元素（标签）
文本节点（text 对象）代表元素（标签）中的文本
属性节点（attribute 对象）代表一个属性，元素（标签）才含有属性
注释是注释节点（comment 对象）
JavaScript 可以通过DOM创建动态的HTML
JavaScript 能够改变页面中的所有HTML元素
JavaScript 能够改变页面中所有的HTML属性
JavaScript 能够改变页面中的所有CSS样式
JavaScript 能够对页面中的所有事件做出反应
查找标签
直接查找
document.getElementById // 根据ID获取一个标签
var d1Ele = document.getElementById('d1');
document.getElementsByClassName // 根据class属性查找
var c1Ele = document.getElementsByClassName('c1')[0]; // 会返回一个数组
document.getElementsByTagName // 根据标签名查找
var spEle = document.getElementsByTagName('span')[0]; // 会返回一个数组
// 涉及到DOM操作的代码应放在页面的最尾端
间接查找
paremtElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
节点操作
创建节点
var divEle = document.createElement("div"); // 创建一个div标签
添加节点
somenode.appendChild(newnode)； // 追加一个子节点（作为最后的子节点）
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
somenode.insertBefore(newnode,某个节点); // 把增加的节点放到某个节点的前边。
var c1Ele = document.getElementsByClassName("c1")[0];
d1Ele.insertBefore(imgEle,c1Ele) // 将img标签插入到class值为c1的标签前面
删除节点
var c1Ele = document.getElementsByClassName("c1")[0]; // 获的要删除的元素
var fEle = c1Ele.parentElement; // 获得该元素的父标签
fEle.removeChild(c1Ele); // 删除该元素
替换节点
somenode.replaceChild(newnode, 某个节点);
c1.replaceChild(spEle,spEle3); // c1父节点，spEle新节点，spEle3旧节点
属性节点
获取文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText // 只获取节点内的文本
divEle.innerHTML // 获取节点内的所有HTML字符
设置文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText="1" // 输入的只是字符串
divEle.innerHTML="<p>2</p>" // 可以输入HTML代码
attribute 操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
获取值操作
elementNode.value
适用于input、select、textarea 标签
var d1Ele = document.getElementById("d1");
console.log(d1Ele.value);
// input多选只能获取第一个值
// 文件只能得到文件路径
d1Ele.files[0]; // 获取文件对象
class的操作
var divEle = document.getElementsByTagName('div')[0]
divEle.classList; // 获取divEle对象的所有class值
divEle.classList.remove("cls") 删除指定类
divEle.classList.add('cls') 添加类
divEle.classList.contains('cls') 存在返回true，否则返回false
divEle.classList.toggle('cls') 存在就删除，否则添加
指定css操作
obj.style.backgroundColor = "red"
JS操作CSS属性的规律
对于没有中横线的CSS属性一般直接使用style.属性名即可。如
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
如果有中横线则将中横线省略，将后一个字母大写。如
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
使HTML事件触发浏览器中的动作（action），比如当用户点击某个HTML元素是启动一段JacaScript。下面是一个属性列表。这些属性可插入HTML标签来定义事件动作
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
事件的绑定方法
直接在标签内绑定
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
<!-- this相当于python中的self，即这个div标签本身 -->
获取标签对象后绑定
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
02.JQuery介绍
1. jQuery介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大的简化JavaScript编程。它的宗旨是 Write less, do more.
2.jQuery优势
一款轻量级的js框架。jQuery核心js文件才几十kb，不会影响页面的加载速度。
丰富的DOM选择器，jQuery的选择器使用起来很方便，
链式表达。jQuery的链式操作可以把多个操作写在一行代码里
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强
Ajax操作支持。jQuery简化了AJAX操作，后端只需要返回一个JSON格式的字符串就能完成与前端的通信
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器
插件拓展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
3.jQuery内容
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax
4.jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery。那么他就可以使用jQuery里的方法；例如$("#d1").html()
$("#d1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
5.jQuery基础语法
$(selector).action()
6.查找标签
基本选择器
// id选择器
$("#id")
// 标签选择器
$("TagName")
// class选择器
$(".class")
// 配合使用
$("div.c1") // 找到有c1 class类的div标签
// 所有元素选择器
$("*")
// 组合选择器
$("#id, .class, TayName")
层级选择器
// x和y可以为任意选择器
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y"); // 找到所有紧挨在x后面的y
$("x ~ y"); // x之后所有的兄弟y
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
// 例子
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
来源：https://www.cnblogs.com/gfhh/p/11886396.html