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 id='user' data-id='1234' data-username='x' data-email='mail@gmail.com'></div>

div.dataset.id; // '1234'
div.dataset.username;   // 'x'
div.dataset.email;  // 'mail@gmail.com'

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');

<link rel="stylesheet" type="text/css" href="base.css"> —> <link rel="stylesheet" type="text/css" href="style2.css">

5.事件：

（1）事件流，主要分为三个过程：捕获过程、触发过程、冒泡过程。主要见廖雪峰博客。

6.多媒体(具体用法见文档)：

• 音频：<audio>
• 视频：<video>

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.表单操作：

• 文本框，对应的<input type="text">，用于输入文本；
• 口令框，对应的<input type="password">，用于输入口令；
• 单选框，对应的<input type="radio">，用于选择一项；
• 复选框，对应的<input type="checkbox">，用于选择多项；
• 下拉框，对应的<select>，用于选择一项；
• 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

JQuery

1.$符号:`$`是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名。

2.查找（返回的是一个JQuery对象数组）：

• 按id查找：var div = $('#abc');
• 按tag查找：var ps = $('p');
• 按class查找：var a = $('.red');
• 按属性查找：var email = $('[name=email]'); // 找出<??? name="email">
• 组合查找：组合查找就是把上述简单选择器组合起来使用。var emailInput = $('input[name=email]'); // 不会找出<div name="email">
• 多项选择器：多项选择器就是把多个选择器用,组合起来一块选。$('p.red,p.green'); // 把<p class="red">和<p class="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：可以选择<input>，<textarea>，<select>和<button>；
• :file：可以选择<input type="file">，和input[type=file]一样；
• :checkbox：可以选择复选框，和input[type=checkbox]一样；
• :radio：可以选择单选框，和input[type=radio]一样；
• :focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；
• :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；
• :enabled：可以选择可以正常输入的<input>、<select>等，也就是没有灰掉的输入；
• :disabled：和:enabled正好相反，选择那些不能输入的。

4.查找和过滤

（1）查找：最常见的查找是在某个节点的所有子节点中查找，使用find()方法，它本身又接收一个任意的选择器。比如：

var ul = $(‘ul.lang’); // 获得ul

var dy = ul.find(‘.dy’); // 获得JavaScript, Python, Scheme

5.操作DOM

• 修改Text和HTML：jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本。

• 修改CSS：$('ul.lang').css('color', 'red')

6.修改DOM结构：

• 添加节点：ul.append('<li><span>Haskell</span></li>');
• 删除节点：var li = $('#test-div>ul>li');li.remove(); // 所有<li>全被删除

7.事件：

• on：on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。如：
  

  var a = $(‘#test-link’);
  a.on(‘click’, function () {
  alert(‘Hello!’);
  });

• click: 鼠标单击时触发；
• dblclick：鼠标双击时触发；
• mouseenter：鼠标进入时触发；
• mouseleave：鼠标移出时触发；
• mousemove：鼠标在DOM内部移动时触发；
• hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

（2）键盘事件：

• keydown：键盘按下时触发；
• keyup：键盘松开时触发；
• keypress：按一次键后触发。

（3）其他事件：

• focus：当DOM获得焦点时触发；
• blur：当DOM失去焦点时触发；
• change：当<input>、<select>或<textarea>的内容改变时触发；
• submit：当<form>提交时触发；
• ready：当页面被载入并且DOM树完成初始化后触发。

8.AJAX。

jQuery在全局对象jQuery（也就是$）绑定了ajax()函数，可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象，常用的选项如下：

• async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
• method：发送的Method，缺省为’GET’，可指定为’POST’、’PUT’等；
• contentType：发送POST请求的格式，默认值为’application/x-www-form-urlencoded; charset=UTF-8’，也可以指定为text/plain、application/json；
• data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
• headers：发送的额外的HTTP头，必须是一个object；
• dataType：接收的数据格式，可以指定为’html’、’xml’、’json’、’text’等，缺省情况下根据响应的Content-Type猜测。

比如：


var jqxhr = $.ajax('/api/categories', {
dataType: 'json'
}).done(function (data) {
ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
})


9.扩展：我们可以扩展jQuery来实现自定义方法。