前一段时间笔记
作者：互联网
计划
-
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对象。
标签：jQuery,name,DOM,一段时间,笔记,选择器,var,节点 来源： https://www.cnblogs.com/anatkh/p/14401542.html