id和class的区别和联系。 联系:class 和id都是用来选择调用CSS样式属性。 区别:class:.css5{属性:属性值;}可以无数次调用。id:代表着标签的身份,只能出现一次,并且具有唯一性。
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;不换行 overflow: hidden;溢出的文字隐藏 text-overflow: ellipsis;溢出的文字用省略号代替
js变量的命名规则:
区分大小写。
要以字母、下划线_或$开始,不能以数字开始,其他位置可以是字母、下划线、数字和$。
标识符一般都采用驼峰命名法,即首字母小写,每个单词的开头大写,其余字母小写,如helloWorld。
全局变量和局部变量 函数里定义的变量是局部变量,只能在本函数里使用,函数外定义的变量是全局变量,在整个文件里都可以使用。
预解析 浏览器获得JS文件的时候,不是去立刻去执行代码,而是全篇快速扫描一遍,把变量的声明提前。
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;
}
需要注意的是预解析不会跨< script >
闭包:变量的私有化问题
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提供了独立于内容而与浏览器窗口进行交互的对象; 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window; 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) ;
运算 在JS中整数运算基本可以保证精确,但是浮点运算可能得到一个不精确的结果。 例如0.1+0.2= 0.30000000000000004
null和undefined
var res = null ;
console. log