id和class的区别和联系。
post是通过data发送的，即body，而get是通过params发送的。
ES6 rest参数
AMD、CDM、CommonJS和ES6是模块化开发的方案，也是标准。
AMD是RequireJS在推广过程中对模块化定义的规范化产出。 AMD异步模块定义，AMD是一个概念，RequireJs是对AMD的实现，像javas对ECMAScript的现实。
CMD是SeaJS在推广过程中对模块定义的规范化产出。CMD是同步模块定义，SeaJS是对CMD的实现，是淘宝团队提供的框架。CommonJS是通过module.exports来定义的，浏览器不支持module.exports，ES6也不支持，它是在服务端nodeJS后端使用的。输出有两种方式，一种是匿名输出module.export，另一种是exports.name[实际名字]输出。
ES6 export/import 先export后import 。AMD、CMD、CommonJSo都是ES5里，export和import是ES6新增的。
post是通过data发送的，即body，而get是通过params发送的。
asset和static都是存放静态资源的，但是asset更倾向于主键资源，但是页面上加载的图片会放到static里面，webpack在打包时会将asset里面的资源打包，webpack在打包时，如果asset里面的图片足够小，那么会 生成base64格式，但是static里面的图片一般是通过src的方式被加载
id和class具有相同的属性的时候，id的优先级高于class。
link引用的是css样式，script引用的是javascript脚本，css放页头，js放页尾。
块级元素
总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素
行内元素
和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下：
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
position:absolute; 是相对于position:relative;来的
鼠标移上去变成小手cursor: pointer;
就表现而言em,i表现都一样，都是表示斜体。i是视觉要素，表示无意义的加粗，无意义的斜体，仅仅表示样式上是粗体或斜体，而没有强调的语义，这两个标签在HTML4.01中不推荐使用，建议用CSS样式；em是表达要素。 em表示一般的强调文本，这个标签具有语义。该标签中的内容在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。
white-space: nowrap;不换行
js变量的命名规则：
区分大小写。
要以字母、下划线_或$开始，不能以数字开始，其他位置可以是字母、下划线、数字和$。
标识符一般都采用驼峰命名法，即首字母小写，每个单词的开头大写，其余字母小写，如helloWorld。
全局变量和局部变量
预解析
console. log ( x) ;
var x = 1 ;
函数作用域 尚硅谷的视频讲的很清楚，里面是一些小的练习?：https://www.bilibili.com/video/av34087791/?p=60 ，只看前3分半就可以。
fun ( ) ;
fun2 ( ) ;
function fun ( ) {
console. log ( "我是一个fun函数" ) ;
}
var fun2 = function ( ) {
console. log ( "我是fun2函数" ) ;
} ;
console. log ( "y1=" + y) ;
var res = add ( 1 , 2 ) ;
console. log ( "y2=" + y) ;
function add ( a, b) {
y = 1 ;
return a+ b;
}
闭包：变量的私有化问题
function add ( ) {
var counter = 0 ;
plus = function ( ) {
counter++ ;
console. log ( "counter=" + counter) ;
}
}
add ( ) ;
plus ( ) ;
plus ( ) ;
console. log ( counter) ;
函数
function mianji ( r) {
return 3.14 * r* r;
}
console. log ( mianji ( 10 ) ) ;
console. log ( mianji) ;
函数立即执行参考：https://www.cnblogs.com/cnfxx/p/7337889.html
对象及其属性
var person = {
name: "chenyz" ,
sex: "female" ,
age: 18 ,
major: "dase" ,
"now-city" : "shanghai" ,
"g f" : "liuhuan" ,
dog: {
name: "doudou" ,
sex: "male" ,
age: "1" ,
}
}
var name = person. name;
var name = person[ "name" ] ;
var city = person[ "now-city" ] ;
person. height = 175 ;
delete person. age;
for ( var pN in person) {
console. log ( "属性名是：" + pN + "属性值是：" + person[ pN] ) ;
}
console. log ( "name" in person) ;
var person2 = person;
自定义类（ES6方法）
class Person {
constructor ( name, age) {
this . name = name;
this . age = age;
}
slogan ( ) {
return "我的名字是" + this . name + "，我今年" + this . age + "岁" ;
}
}
var per_one = new Person ( "刘欢" , "24" ) ;
console. log ( per_one. slogan ( ) ) ;
浏览器加载页面过程
输入一个网址：http://www.baidu.com
浏览器把www.baidu.com发送给DNS服务器，将网址解析出IP地址14.215.177.39/。
浏览器收到14.215.177.39后将IP地址缓存到本地，下次访问时不用再次利用DNS解析
服务器将收到的请求内容进行处理，并返回给浏览器页面的内容。
浏览器收到服务器发来的文件，将内容进行解析
显示页面
HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。
根据端口号确定送给哪个应用程序处理，例如80端口是指http服务，53端口是指dns服务。
JS时间线：第一阶段->载入阶段 默认同步 loading
获取页面内容.html进行解析
构建DOM树 html head meta title script...逐个标签向下读取
解析完成
渲染->文件下载 图片
载入阶段结束
BOM弹窗
var cc = "Chenyz" ;
console. log ( window. cc) ;
alert ( "alert 弹窗" ) ;
var bcf = confirm ( "confirm 窗口" ) ;
console. log ( bcf) ;
var strpt = prompt ( "prompt输入：" , "prompt默认的输入" ) ;
console. log ( strpt) ;
BOM导航栏
screen;
navigator;
window. location;
location. reload ( ) ;
location. replace ( " " ) ;
history. back ( ) ;
history. forward ( ) ;
history. go ( 0 ) ;
history. go ( 1 ) ;
history. go ( - 1 ) ;
BOM计时器
var num = 0 ;
function add ( ) {
console. log ( "num = " + ++ num) ;
}
function end ( ) {
console. log ( "setTimeout clearInterval" ) ;
clearInterval ( sil) ;
}
var sil = setInterval ( add, 1000 ) ;
var clear = setTimeout ( end, 5000 ) ;
BOM和DOM
BOM（Browser Object Model）即浏览器对象模型。 BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
DOM（Document Object Model）即文档对象模型。它是HTML文档的对象化描述，也是HTML元素与外界（如Javascript）的接口。
DOM树元素节点
document节点
标签节点/元素节点
文本节点
找到节点的方法
var res = document. getElementById ( "id1" ) ;
var className = document. getElementsByClassName ( "testClass" ) ;
var tagName = document. getElementsByTagName ( "p" ) ;
添加删除节点
var res = document. getElementById ( "div1" ) ;
var createP = document. createElement ( "p" ) ;
var pTxt = document. createTextNode ( "这个JS教程快学完了hhhh" ) ;
createP. appendChild ( pTxt) ;
res. appendChild ( createP) ;
var res2 = document. getElementById ( "div2" ) ;
res2. parentNode. removeChild ( res2) ;
节点属性/内容修改
var res = document. getElementById ( "div2" ) ;
res. getAttribute ( "class" )
res. setAttribute ( "class" , "newName" ) ;
res. removeAttribute ( "class" ) ;
< p id= "p1" > 内容修改之前< / p>
var p1 = document. getElementById ( "p1" ) ;
p1. innerHTML = "我的内容变了！我可以指向一个网址<a href='https://www.baidu.com'>点一下进入百度?首页</a>" ;
p1. textContent = "只能显示纯文本！" ;
事件处理
html属性
var num = 0 ;
function add ( ) {
console. log ( "num = " + ++ num) ;
}
var res = document. getElementById ( "div2" ) ;
res. onclick = add;
< div class = "testClass" id= "div2" onclick= "add()" > hahah< / div>
< >
通过调用系统提供的方法
res. addEventListener ( "click" , add) ;
res. removeEventListener ( "click" , add) ;
关于target
target = "_black" ;
target = "_self" ;
target = "_parent" ;
target = "_top" ;
keydown和keypress的区别
KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符。
KeyDown是任何键都会触发，比如shift、Ctrl等；而KeyPress只接受有内容的键，比如A-Z、0-9、]；等等
事件传播
在默认情况下，点击页面的一个标签，处在处在传播路径 (在DOM树上处在同一路径上的)
事件流：对应标签接收到事件的顺序https://www.bilibili.com/video/av26779705/?p=28
res. addEventListener ( "click" , add) ;
事件代理 点开参考呀
< ul>
< li> li1< / li>
< li> li2< / li>
< li> li3< / li>
< li> li4< / li>
< li> li5< / li>
< / ul>
function clik ( event) {
console. log ( event. target) ;
}
var ul1 = document. getElementsByTagName ( "ul" ) [ 0 ] ;
ul1. addEventListener ( "click" , clik) ;
script标签一旦用于引入外部文件了，就不能再便编写代码了，即使编写了浏览器也会忽略，如果需要可以再创建新的script标签用于编写内部代码。
Number
Number. MAX_VALUE
Number. MAX_VALUE * Number. MAX_VALUE
var a = Infinity ;
console. log ( typeof a) ;
Number. MIN_VALUE
Number. MIN_VALUE * Number. MIN_VALUE
var str = "abc" * "def" ;
console. log ( typeof str) ;
运算
null和undefined
var res = null ;
console. log
本文涵盖了前端开发中的一些基础知识，包括id与class的区别、HTTP的GET与POST请求、ES6的rest参数、模块化开发的AMD、CMD、CommonJS和ES6介绍，以及CSS的布局和JavaScript的变量命名规则等。还提到了BOM对象中的Window、Navigator、Location、History和Screen等概念。
最低0.47元/天 解锁文章
扫一扫
2225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
