day48

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标签