DOM编程与JQuery学习笔记
DOM编程
教程：https://li-xinyang.gitbooks.io/frontend-notebook/content/chapter3/00_intro.html
1.文档树：指的是将网页视为树结构，并把一些元素定义成节点。并且赋予一些节点关系，比如父子关系、兄弟关系。
2.节点操作：
（1）获取元素节点：比如document.getElementsByTagName("ul")[0];，通过标签名进行获取。
- getElementById（通过id）
- getElementsByTagName（通过标签）
- getElementsByClassName （IE9不支持）
- querySelector （IE9不支持）后面在样式操作中会讲到。
- querySelectorAll （IE9不支持）
（2）创建节点：var element = document.createElement('tagName');
（3）修改节点：
- textContent(获取或设置节点以及其后代节点的文本内容)：
element.textContent; element.textContent = 'New Content'; - appendChild(在指定的元素内追加一个元素节点):
var aChild = element.appendChild(aChild); - insertBefore(在指定元素的指定节点前插入指定的元素):
var aChild = element.insertBefore(aChild, referenceChild); - removeChild(删除指定的节点的子元素节点。):
var child = element.removeChild(child); - innerHTML(获取或设置指定节点之中所有的 HTML 内容):
var elementsHTML = element.innerHTML;
3.属性操作：
- 读取属性：
var attribtue = element.getAttribute('attributeName'); - 写入属性：
element.setAttribute('attributeName', value); dataset属性：自定义属性，其为 HTMLElement 上的属性也是 data-* 的属性集。主要用于在元素上保存数据。获取的均为属性字符串。数据通常使用 AJAX 获取并存储在节点之上。比如：
div.dataset.id; // '1234' div.dataset.username; // 'x' div.dataset.email; // '[email protected]'
4.样式操作：
（1）内部样式表
- 对应所有样式的列表：
element.sheet.cssRules;—-body{margin:30;p{color: #aaa; line-height:20px} - 对应相应的 CSS 选择器：
element.sheet.cssRules[1].selectorText;—-p - 对应一个样式：
element.sheet.cssRules[1]—-p{color: #aaa; line-height:20px} - 对应所有样式的键值对：
element.sheet.cssRules[1].style;—-color: #aaa; line-height:20px - 对应的属性值：
element.sheet.cssRules[1].stlye.color;—-#aaa
（2）行内样式：element.style.color;
（3）更新样式：element.style.cssText = 'color: red; background: black';
（4）更新 class：
- 首先创建对应样式的css样式
- 在JavaScript中填写
element.className += ' angry';
（5）统一更新多个元素样式：element.setAttribute('href', 'style2.css');
—>
5.事件：
（1）事件流，主要分为三个过程：捕获过程、触发过程、冒泡过程。主要见廖雪峰博客。
6.多媒体(具体用法见文档)：
- 音频：
- 视频：
7.画布（具体用法见文档）：
8.BOM：为浏览器窗口对象的一组API（具体用法见文档）
9.数据通信(见廖雪峰博客)：
10.数据存储：
（1） cookie:浏览器中的 Cookie 是指小型文本文件，通常在4kb大小左右。由于流量代价、安全性（明文传递）、大小限制的弊端引入Storage。
（2） Storage：作用域的不同 Storage 分为 Local Storage 和 Session Storage，前者在用户不清理的情况下默认时间为永久，后者默认事件则为浏览器的会话时间（浏览器不同窗口直接不共享 Session Storage）。读取：localStorage.name
Storage常用的API操作：
- localStorage.length 获取键值对数量
- localStorage.getItem(‘name’) 获取对应值
- localStorage.key(i) 对应值的索引获取
- localStorage.setItem(‘name’, ‘value’) 设置键值对
- localStorage.removeItem(‘name’) 删除一个值
- localStorage.clear() 删除所有数据
11.动画：主要利用js实现动画，js动画三要素：dom对象，属性，定时器。（等用到的时候看文档吧）
（1）定时器
（2）动画函数
12.表单操作：
- 文本框，对应的
，用于输入文本； - 口令框，对应的
，用于输入口令； - 单选框，对应的
，用于选择一项； - 复选框，对应的
，用于选择多项； - 下拉框，对应的
，用于选择一项； - 隐藏文本，对应的
，用户不可见，但表单提交时会把隐藏文本发送到服务器。
JQuery
1. 符号:‘ 符 号 : ‘ `是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名。
2.查找（返回的是一个JQuery对象数组）：
- 按id查找：
var div = $('#abc'); - 按tag查找：
var ps = $('p'); - 按class查找：
var a = $('.red'); - 按属性查找：
var email = $('[name=email]'); // 找出 - 组合查找：组合查找就是把上述简单选择器组合起来使用。
var emailInput = $('input[name=email]'); // 不会找出- 多项选择器：多项选择器就是把多个选择器用,组合起来一块选。
$('p.red,p.green'); // 把和
都选出来
3.层级选择器（Descendant Selector）：
$('ancestor descendant')（1）子选择器：
$('parent>child')（2）过滤器（Filter）：过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。观察过滤器的效果：
$(‘ul.lang li’); // 选出JavaScript、Python和Lua 3个节点
$(‘ul.lang li:first-child’); // 仅选出JavaScript
$(‘ul.lang li:last-child’); // 仅选出Lua
$(‘ul.lang li:nth-child(2)’); // 选出第N个元素，N从1开始
$(‘ul.lang li:nth-child(even)’); // 选出序号为偶数的元素
$(‘ul.lang li:nth-child(odd)’); // 选出序号为奇数的元素
（3）表单相关：针对表单元素，jQuery还有一组特殊的选择器：
- :input：
可以选择，
- 多项选择器：多项选择器就是把多个选择器用,组合起来一块选。