前一段时间笔记

计划

• html

• css

• javascript

• es6

• typescript

• vue

• react

• angular

• 对于三大框架中的各个，是了解其成套的配套信用方法

• 了解三大框架在食用过程中的作用

 

html

有一些作用不同，但是效果是相同的，在文本部分

像背单词一样，记得表单部分比较重要

 

css

style引入的方式

<p style="color:red;font-size:50px;">这是一段文本</p>     

<style type="text/css"> p { color: blue; font-size: 40px;
 }

<link rel="stylesheet" type="text/css" href="style.css">

样式优先级

样式表层叠通过五种方式进行， 如果样式相同， 那么比如会产生冲突替换。 这时， 它的优先级顺序就显的比较重要。 以下优先级从低到高： (1).浏览器样式（ 元素自身携带的样式） ； (2).外部引入样式（ 使用<link>引入的样式） ； (3).文档内嵌样式（ 使用<style>元素设置） ； (4).元素内嵌样式（ 使用 style 属性设置） 。

3.样式继承 如果某一个元素并没有设置父元素相关的样式， 那么就会使用继承机制将父元素的样式集成下来。 //<b>元素继承了<p>元素的样式 1. <p style="color:red;">这是HTML5</p> 样式继承只适用于元素的外观（ 文字、 颜色、 字体等） ， 而元素在页面上的布局样式则不会被继承。 如果继承这种样 式， 就必须使用强制继承： inherit。 //强制继承布局样式

<p>这是<b>HTML5</b></p>
<style type="text/css">
 p { border: 1px solid red;
 } b { border : inherit;
}
 </style>  

选择器

基本选择器

属性选择器

伪选择器

 

颜色的表达rgb(),rgba()

margin padding 等细微的差别

字体的复合式写法

盒子模型

 

JS

apply call 和闭包的用法

function* generator

更细心的同学指出， number 对象调用 toString() 报SyntaxError： 1. 123.toString(); // SyntaxError 遇到这种情况， 要特殊处理一下： 1. 123..toString(); // '123', 注意是两个点！ 2. (123).toString(); // '123'

正则

全局搜索

贪婪匹配

json解析和反向序列化

xiaoming.__proto__ = Student;

原型链

原型继承浏览器对象

windows对象

navigator 对象表示浏览器的信息， 最常用的属性包括： navigator.appName： 浏览器名称； navigator.appVersion： 浏览器版本； navigator.language： 浏览器设置的语言； navigator.platform： 操作系统类型； navigator.userAgent： 浏览器设定的 User-Agent 字符串。

screen

location

document

button与js挂钩

type="button" onclick="fn()"

js中fn，用dom修改、

history对象

在操作一个DOM节点前， 我们需要通过各种方式先拿到这个DOM节点。 最常用的方法 是 document.getElementById() 和 document.getElementsByTagName() ， 以及CSS选择 器 document.getElementsByClassName() id选择器唯一，也可以用bytagname和classname组合

// 返回ID为'test'的节点：
2. var test = document.getElementById('test');
3.
4. // 先定位ID为'test-table'的节点， 再返回其内部所有tr节点：
5. var trs = document.getElementById('test-table').getElementsByTagName('tr');
6.
7. // 先定位ID为'test-div'的节点， 再返回其内部所有class包含red的节点：
8. var reds = document.getElementById('test-div').getElementsByClassName('red');
9.
10. // 获取节点test下的所有直属子节点:
11. var cs = test.children;
12.
13. // 获取节点test下第一个、 最后一个子节点：
14. var first = test.firstElementChild;
15. var last = test.lastElementChild;

第二种方法是使用 querySelector() 和 querySelectorAll() ， 需要了解selector语法

  // 通过querySelector获取ID为q1的节点：
2. var q1 = document.querySelector('#q1');
3.
4. // 通过querySelectorAll获取q1节点内的符合条件的所有节点：
5. var ps = q1.querySelectorAll('div.highlighted > p'); 

 

第二种是修改 innerText 或 textContent 属性， 这样可以自动对字符串进行HTML编码， 保证无法 设置任何HTML标签：

1. // 获取<p id="p-id">...</p>
2. var p = document.getElementById('p-id');
3. // 设置文本:
4. p.innerText = '<script>alert("Hi")</script>';
5. // HTML被自动编码， 无法设置一个<script>节点:
6. // <p id="p-id"><script>alert("Hi")</script></p>  

这里的 innerText是指html内容，带有编码的，innerHtml直接改变元素内容，含危险，网络攻击

dom的删除插入

删除一个DOM节点就比插入要容易得多。 要删除一个节点， 首先要获得该节点本身以及它的父节点， 然后， 调用父节点的 removeChild 把自 己删掉：

var parent = document.getElementById('parent');
2. parent.removeChild(parent.children[0]);

因此， 删除多个节点时， 要注意 children 属性时刻都在变化

操作表单，文件，ajax要重新学

跨域

Jquery

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

window.jQuery; // jQuery(selector, context)
2. window.$; // jQuery(selector, context)
3. $ === jQuery; // true
4. typeof($); // 'function'

按ID查找 选择器 本文档使用 书栈网 · BookStack.CN 构建 - 202 -

1. // 查找<div id="abc">:
2. var div = $('#abc');

注意， #abc 以 # 开头。 返回的对象是jQuery对象。

总之jQuery的选择器不会返回 undefined 或者 null ， 这样的好处是你不必在下一行判断 if (div === undefined) 。 jQuery对象和DOM对象之间可以互相转化：

 var div = $('#abc'); // jQuery对象
 var divDom = div.get(0); // 假设存在div， 获取第1个DOM元素
 var another = $(divDom); // 重新把DOM包装为jQuery对象

通常情况下你不需要获取DOM对象， 直接使用jQuery对象更加方便。 如果你拿到了一个DOM对象， 那可 以简单地调用 $(aDomObject) 把它变成jQuery对象， 这样就可以方便地使用jQuery的API了。

按tag查找只需要写上tag名称就可以了： 1. var ps = $('p'); // 返回所有<p>节点 2. ps.length; // 数一数页面有多少个<p>节点 按class查找注意在class名称前加一个 . ：

var a = $('.red'); // 所有节点包含`class="red"`都将返回
 // 例如:
// <div class="red">...</div>

按class查找注意在class名称前加一个 . var a = $('.red'); // 所有节点包含class="red"都将返回

一个DOM节点除了 id 和 class 外还可以有很多属性， 很多时候按属性查找会非常方便， 比如在一 个表单中按属性来查找： 1. var email = $('[name=email]'); // 找出<??? name="email"> 2. var passwordInput = $('[type=password]'); // 找出<??? type="password"> 3. var a = $('[items="A B"]'); // 找出<??? items="A B"> 当属性的值包含空格等特殊字符时， 需要用双引号括起来。 按属性查找还可以使用前缀查找或者后缀查找： 1. var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM 2. // 例如: name="icon-1", name="icon-2" 3. var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM 4. // 例如: name="startswith", name="endswith"

要选出JavaScript， 可以用层级选择器： 1. $('ul.lang li.lang-javascript'); // [<li class="langjavascript">JavaScript</li>] 2. $('div.testing li.lang-javascript'); // [<li class="langjavascript">JavaScript</li>]

$('form[name=upload] input');

子选择器 $('parent>child') 类似层级选择器， 但是限定了层级关系必须是父子关系， 就 是 <child> 节点必须是 <parent> 节点的直属子节点。 还是以上面的例子： 1. $('ul.lang>li.lang-javascript'); // 可以选出[<li class="langjavascript">JavaScript</li>] 2. $('div.testing>li.lang-javascript'); // [], 无法选出， 因为<div>和<li>不构成父子关系

过滤器一般不单独使用， 它通常附加在选择器上， 帮助我们更精确地定位元素。 观察过滤器的效果： 1. $('ul.lang li'); // 选出JavaScript、 Python和Lua 3个节点 2. 3. $('ul.lang li:first-child'); // 仅选出JavaScript 4. $('ul.lang li:last-child'); // 仅选出Lua 5. $('ul.lang li:nth-child(2)'); // 选出第N个元素， N从1开始 6. $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素 7. $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素 Node.js加载了 hello.js 后， 它可以把代码包装一下， 变成这样执行：

 (function () {
// 读取的hello.js代码:
 var s = 'Hello';
 var name = 'world';
​
 console.log(s + ' ' + name + '!');
 // hello.js代码结束
 })();

这样一来， 原来的全局变量 s 现在变成了匿名函数内部的局部变量。 如果Node.js继续加载其他模 块， 这些模块中定义的“全局”变量 s 也互不干扰。

这样一来， 原来的全局变量 s 现在变成了匿名函数内部的局部变量。 如果Node.js继续加载其他模 块， 这些模块中定义的“全局”变量 s 也互不干扰。

通常情况下你不需要获取DOM对象， 直接使用jQuery对象更加方便。 如果你拿到了一个DOM对象， 那可 以简单地调用 $(aDomObject) 把它变成jQuery对象， 这样就可以方便地使用jQuery的API了。

注意， #abc 以 # 开头。 返回的对象是jQuery对象。