BOM&DOM

BOM:Browser Object Model是指浏览器对象模型，它使JavaScript有能力与浏览器进行对话

DOM:Document Object Model是指文档对象模型，通过它可以访问HTML文档的所有元素

Window对象

　　所有浏览器都支持window对象，它表示浏览器窗口

一些常用的window方法
    window.innerHeight - 浏览器窗口的内部高度
    window.innerWidth - 浏览器窗口的内部宽度
    window.open() - 打开新窗口
    window.close() - 关闭当前窗口　　

window的子对象

navigator对象
    浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息
    navigator.appName - Web浏览器全称
    navigator.appVersion - Web浏览器厂商和版本的详细字符串
    navigator.userAent - 客户端绝大部分信息
    navigator.platform - 浏览器运行所在的操作系统

screen对象
    屏幕对象
    screen.availWidth - 可用的屏幕宽度
    screen.availHeight - 可用的屏幕高度

history对象
    浏览历史对象
    history.forward() - 前进一页
    history.back() - 后退一页

location对象
    用于获取当前页面的地址，并把浏览器重定向到新的页面
    location.href - 获取URl
    location.href = "URL" - 跳转到指定页面
    location.reload() - 重新加载页面警告框：

警告框：alert

确认框：confirm

提示框：prompt

计时相关

setTimeout()：指定时间之后执行
    语法：var t = setTimeout("JS语句",毫秒);
clearTimeout()
    语法：clearTimeout()

setInterval()：按照指定周期执行
    语法：setInterval("JS语句","毫秒");
clearInterval()
    语法：clearInterval()

DOM

　　查找标签

直接查找
　　document.getElementById - 根据id获取标签
　　document.getElementByClassName - 根据class属性获取
　　document.getElementByTagName - 根据标签名获取标签集合
间接查找
　　parentElement - 父节点标签元素
　　children - 所有子标签
　　firstElementChild - 第一个子标签
　　lastElementChild - 最后一个子标签
　　nextElementSibling - 下个兄弟标签
　　previousElementSibling - 上一个兄弟标签

　　节点操作

创建节点
　　语法：createElement(标签名)
增加节点
　　语法：appendChild(节点名)
　　　　　insertBefore(节点名,某个节点)
删除节点
　　语法：removeChild(节点名)
替换节点
　　语法：replaceChild(节点名，某个节点）
属性节点
　　innerText
　　innerHTML
attribute操作，增加特殊的属性
　　自带属性还可以直接点属性来设置

获取值操作
　　.value
　　适用于input，select，textarea
class操作
　　className - 获取所有样式类名
　　classList.remove() - 删除指定类
　　classlist.add() - 添加类
　　classlist.contains() - 判断类是否存在
　　classList.toggle() - 类存在就删除，不存在就添加
指定CSS操作
　　obj.style + CSS属性

事件

常用事件
　　onclick - 当用户点击某个对象时调用事件
　　ondblclick - 当用户双击某个对象调用事件
　　onfocus - 元素获得焦点
　　onblur - 元素失去焦点
　　onchange - 域的内容改变
　　
　　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>
　　方式二：
　　　　<div id="d2">点击</div>
　　　　<script>
　　　　　　var divEle2 = document.getElementById("d2");
　　　　　　divEle2.onclick = function () {
　　　　　　　　this.innerText="heh";
　　　　　　}
　　　　</script>

window.onload

　　等待视图加载完成

https://www.cnblogs.com/Dominic-Ji/p/9121560.html

 

jQuery入门

　　jQuery是一个轻量级的，兼容多浏览器的JavaScript库

jQuery基础语法

　　$().action()

查找标签

基本选择器
id选择器　　$("#id")
标签选择器　　$("标签名")
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

基本筛选器
:first　　第一个
:last　　最后一个
:eq(index)　　索引等于index的元素
:even　　匹配所有索引为偶数的元素
:odd　　匹配所有索引为奇数的元素
:gt(index)　　匹配所有索引大于index的元素
:lt(index)　　匹配所有索引小于index的元素
:not()　　移除所有满足not条件的标签　　
:has()　　选取所有包含一个或多个标签在其内的标签

属性选择器
　　[属性]
　　[属性等于某个值]
　　[属性不等于某个值]

表单选择器
　　：text
　　：password
　　：file
　　：radio
　　：checkbox
　　：submit
　　：reset
　　：button
表单对象属性
　　：enabled
　　：disabled
　　：checked
　　：selected

筛选器方法

下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父元素
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()

儿子和兄弟元素
$("#id").children();
$("#id").siblings();

查找：$("div").find("p")
筛选：$("div").filter(".c1")

.first() 　　获取匹配的第一个元素
.last()　　获取匹配的最后一个元素
.not()　　从匹配元素的集合中删除域指定表达式匹配的元素
.has()　　保留包含特定后代元素，去除那些不含有指定的后代元素
.eq()　　所有等于指定的元素

https://www.cnblogs.com/Dominic-Ji/p/10490669.html?tdsourcetag=s_pctim_aiomsg