JavaScript学习笔记-Underscore Arrays
Array FunctionsNote: All array functions will also work on the arguments object. However, Underscore functions are not designed to work on “sparse” arrays.
first _.first(array, [n]) Aliases: head, takeReturns the first element of an array. Passing n will return the first n elements of the array.
_.first([5, 4, 3, 2, 1]);=> 5
initial_.initial(array, [n])Returns everything but the last entry of the array. Especially useful on the arguments object. Pass n to exclude the last n elements from the ...
JavaScript学习笔记-Underscore Collections
Installation
Node.js npm install underscore
Meteor.js meteor add underscore
Require.js require(["underscore"], ...
Bower bower install underscore
Component component install jashkenas/underscore
collections 工具map/filter和Array的map()与filter()类似，但是underscore的map()和filter()可以作用于Object。当作用于Object时，传入的函数为function (value, key)，第一个参数接收value，第二个参数接收key：
var obj = { name: 'bob', school: 'No.1 middle school', address: 'xueyuan road'};var ...
JavaScript学习笔记-jQuery Selector
jQuery selector选择器是jQuery的核心。一个选择器写出来类似$(‘#dom-id’)。
对于原生JS，选择器：
// 按ID查找：var a = document.getElementById('dom-id');// 按tag查找：var divs = document.getElementsByTagName('div');// 查找<p class="red">：var ps = document.getElementsByTagName('p');// 过滤出class="red":// TODO:// 查找<table class="green">里面的所有<tr>：var table = ...for (var i=0; i<table.children; i++) { // TODO: 过滤出<tr>}
jQuery 的选择器就是帮助我们快速定位到一个或多 ...
JavaScript学习笔记-jQuery Descendant Selector
层级选择器 Descendant Selector 如果两个DOM元素具有层级关系，就可以用 $('ancestor descendant') 来选择，层级之间用空格隔开。
<!-- HTML结构 --><div class="testing"> <ul class="lang"> <li class="lang-javascript">JavaScript</li> <li class="lang-python">Python</li> <li class="lang-lua">Lua</li> </ul></div>
$('ul.lang li.lang-javascript'); // [<li class="lang-javascript&quo ...
JavaScript学习笔记-jQuery
使用jQuery在<script> 标签内引用src 属性
<!doctype html><html><head> <meta charset='utf-8'></meta> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script></head> <body> <button type='button' onclick="alert('jQuery版本：' + $.fn.jquery)">获取版本号 </button> </body></html>
$ 符号 jQuery 把所有功能全部封装在一个全局变量 jQuery 中，而 $ 也是一个合法的变量名，它是变量 jQuery 的别名：
window.jQuery; // jQuery(sel ...
JavaScript学习笔记-删除DOM元素
删除一个DOM节点就比插入要容易得多。要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：
/ 拿到待删除节点:var self = document.getElementById('to-be-removed');// 拿到父节点:var parent = self.parentElement;// 删除:var removed = parent.removeChild(self);removed === self; // true
当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新
试验：
<!-- HTML结构 --><ul id="test-list"> <li>JavaScript</li> <li>Swift</li> <li>HTML</li> <li>ANSI C&l ...
JavaScript学习笔记-添加DOM元素
appenChild
insertBefore parentElement.insertBefore(newElement, referenceElement);
createElement
setAttribute
试验：
<!Doctype><html><head><meta charset="utf-8"></meta><title>js test</title><script>function change(id,is){ var js=document.getElementById(id); var ls=document.getElementById(is); ls.appendChild(js)}function append(){ var list=document.getElementById("list"); var haskell=document.createElement(' ...
JavaScript学习笔记-更改DOM元素
更新DOM修改节点的文本，方法有两种：
修改innerHTML属性这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：
// 获取<p id="p-id">...</p>var p = document.getElementById('p-id');// 设置文本为abc:p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>// 设置HTML:p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';// <p>...</p>的内部结构已修改
修改innerText或textContent属性这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：// 获取<p id="p-id&qu ...
JavaScript学习笔记-操作DOM
DOM 节点选择document.getElementById()document.getElementsByTagName()document.getElementsByClassName()
由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。
// 返回ID为'test'的节点：var test = document.getElementById('test');// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：var trs = document.getElementById('test-table').getElementsByTagName('tr');// ...
JavaScript学习笔记- window对象
windowsget the inner size of browser:windows.innerWidthwindows.innerHeight
get the global size of browser:windows.outerWidthwindows.outerHeight
navigatorget information of browsernavigator.appName:浏览器名称；navigator.appVersion:浏览器版本；navigator.language:浏览器设置的语言；navigator.platform:操作系统类型；navigator.userAgent:浏览器设定的User-Agent字符串。
screenuse screen to get screen information:screen.width:screen.height:screen.colorDepth:
locationfor a url=http://www.example.com:8080/path/index.html?a=1&b=2#TOP
l ...
JavaScript学习笔记-Class(ES6)
之前的原型继承关系可以看出，JS在实现继承时还是很麻烦的，需要大量代码。但是，class出现了。
classclass从ES6开始正式被引入到JavaScript中,目的就是让定义类更简单。
先前的类方法：
function Student(name){ this.name=name;}Student.prototype.hello= function(){ alert("Hello, "+this.name); }
用class 构建：
class Student{ constructor(name){ this.name=name; } hello(){ alert('Hello, '+this.name); }}
实例化：
var xiaoming = new Student('小明');xiaoming.hello();
class继承利用class继承非常方便，直接通过 extends 来实现：
class ...
