本文概述了前端与移动开发领域的关键技术，包括HTML5、CSS3、JavaScript、响应式设计、移动端事件、Web存储、AJAX、触摸事件、Flex布局、Zepto库以及响应式框架Bootstrap的使用。深入探讨了移动端Web开发的挑战与解决方案。
Java script学习考点
-
原生js获取元素的方式总结
- document.getElementById(“id属性值”)；
- document.getElementsByTagName(“标签名”)；
- document.getElementsByName(“name属性值”)；
- document.getElementsByClassName(“类样式名”)；
- document.querySelector(“选择器的名字”)
- document.querySelectorAll(“选择器的名字”)
-
已知一个元素，获取其他元素的方法（已知的元素全部用obj来代替）
- obj.parentNode;
- obj.parentElement;
- obj.childNodes
- obj.children；
- obj.firstChild;
- obj.firstElementChild;
- obj.lastChild;
- obj.lastElementChild;
- obj.previousSibling;
- obj.previousElementSibling;
- obj.nextSibling
- obj.nextElementSibling
-
直接可以通过document获取的元素
- document.body
- document.title
- document.html
-
元素的创建三种方式
- document.write(“html代码”) 缺点：页面中所有的元素都会被清除，只剩下创建的元素
- 父级元素.innerHTML(“html代码”) 缺点：必须有父级元素，且父级元素内的所有内容被清空，只剩下创建的元素
- document.creatElement(“标签名”) 没有以上缺点，但是要和父级元素.appendChild(“创建的元素”)搭配使用，将创建的元素追加到父级元素中，否则创建的元素是显示不出来的
- 针对创建的元素几种插入方法：
- 父级对象.insertBefore(newchild,参照子对象)； 插入再参照子对象之前
- 父级对象.replace(newchild,参照子对象)； 替换参照子对象
- 父级对象.appendChild(newchild); 默认插入为第一个子元素
- 移除子元素的方法：
- 父级元素.removeChild(子元素)；
- 针对创建的元素几种插入方法：
-
自定义属性相关操作
- 元素.setAttribute(自定义属性名字，自定义属性值)； 自定义属性的创建
- 元素.getAttribute(属性名字) 获取属性的值，不仅可以自定义的，也可以获取原本的
- 元素.removeAttribute(属性名字) 移除元素的属性，可以移除自带的，也可以移除自定义的
-
目前为止学过的事件
-
onclick 点击事件
-
onmouseover 鼠标进入事件
-
onmouseleave 鼠标离开事件
-
onmousemove 鼠标移动事件
-
onfocus 获取焦点事件 ---- 多用于表单中
-
onblur 失去焦点事件 ---- 多用于表单中
-
onchange 内容改变事件 ---- 多用于表单中
-
oninvalid 验证不通过事件，一般来说是在pattern（正则表达式）验证。例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <input type="tel" name="userphone" value="" placeholder="" id="userphone" pattern="^1\d{10}$"> <input type="submit" name="" value="提交" placeholder=""> </body> <script> document.getElementById('userphone').oninvalid=function() { console.log(1); }; </script> </html> -
onscroll 滚动事件
-
onmousedown 鼠标按下事件
-
onmouseup 鼠标松开事件
-
onkeydown 键盘按下事件
-
onkeyup 键盘松开事件
-
onload 页面加载事件 ===使用时总是 window.onload
-
ononline:网络连通是触发这个事件
-
onoffline:网络断开时触发这个事件
-
应用于被拖拽元素的事件（所有的都是针对鼠标而言）
- ondrag：应用于拖拽元素，整个拖拽过程都会被触发。
- ondragstart：应用于拖拽元素，拖拽开始时调用。
- ondragleave：应用于拖拽元素，鼠标离开时拖拽元素时调用（相对于元素未拖拽时的位置）。
- ondragend：应用于拖拽元素，拖拽结束时调用。
-
应用于目标事件（所有的都是针对鼠标而言）
- ondragenter：应用于目标元素，当拖拽元素进入时调用。
- ondragover：应用于目标元素，当停留在目标元素时调用。
- ondrop：应用于目标元素，在目标元素上松开时调用。（这个事件浏览器会默认阻止，因此要在ondragover中阻止浏览器的默认行为）
- ondragleave：应用于目标元素，当鼠标离开目标元素时调用。
-
移动端touch事件（触屏事件） ====>移动端特有的事件
触屏的事件：
- ontouchstart：添加开始触摸事件，当手指触摸到屏幕到屏幕时触发。
- ontouchmove：添加手指滑动事件，当手指在屏幕滑动时触发。
- ontouchend：添加触摸结束事件，当手指离开屏幕时 触发。
- ontouchcancel：添加触摸意外终止事件。
-
-
事件的绑定与解绑（这里的事件多用onclick代替）
-
事件的绑定方式
- 元素.οnclick=事件处理函数 ====主要用在pc端
- 元素.addEventListener(去掉on的click,事件处理函数，false); ====主要用在移动端
- 元素.attachEvent(onclick，事件处理函数) ----一般很少用，一般都用前两个
-
事件绑定的对应的解绑
-
元素.οnclick=null;
-
元素.removeEventLIstener(“click”,命名函数,false); —不一定要写成命名函数的形式，只是解绑的时候方便，若不需要解绑，可写为匿名函数的形式。例如：
function f1(){ console.log(1); } 元素.addEventListener("click",f1,false); 绑定 元素.removeEventLIstener("click",f1,false); 解绑 -
元素.detach(“onclick”,命名函数)
-
-
-
DOM中的属性和方法
-
设置文本的属性和方法
- 元素.innerText=“文本内容”
- 元素.textContent=“文本内容”
- 元素.innerHTML(“文本内容或者html代码”)
-
DOM中类样式属性【class属性】
-
元素.className=“类样式名” ==== 注意的是类样式名可以是多个。例如：
元素.className=“cls color”;这样的形式，如果只写一个，那这个元素就只有一个样式了
-
类样式的清除：元素.className="";
-
-
DOM中的其他属性
-
对于其他属性，一般都可以用元素.属性的方式来设置或获取该元素此属性的值
<body> <div id="dv" class="div color"> <p id="p1">p1</p> </div> </body> <script> var obj=document.getElementById('dv'); obj.style.width="200px"; //设置 console.log(obj.style.width); //获取:200px </script>
-
-
DOM中的三大系列（offset,scroll,client）
-
offset系列
-
元素.offsetWidth; ===元素实际占据的宽度：border+padding+width,返回的值数值类型
-
元素.offsetHeight; ===元素实际占据的高度：border+padding+height,返回的值数值类型
-
元素.offsetLeft ==== 没有脱离文档流：父元素margin+父元素padding+父元素border+自己的margin（元素距离左边页面的值）
脱离文档流 ：offsetLeft=left+margin（相对于参考位置左边的位置）
-
元素.offsetTop ====没有脱离文档流：父元素margin+父元素padding+父元素border+自己的margin（元素距离左边页面的值）
脱离文档流 ：offsetLeft=left+margin（相对于参考位置左边的位置）
-
-
scroll系列
- scrollWidth：元素中内容的宽度（没有边框），如果没有内容，就是元素的宽
- scrollHeight：元素中内容的高度（没有边框），如果没有内容，就是元素的高
- scrollTop：元素中内容向上卷曲出去的距离
- scrollLeft：元素中内容向左卷曲出去的距离
-
client系列（可视区域）
- clientWidth：可视区域的宽度（没有边框），边框内部的宽度
- clientHeight：可视区域的高度（没有边框），边框内部的高度
- clientLeft：可视区域距离左边框的距离（等价于左边框的宽度）
- clientTop：可视区域距离上边框的距离（等价于上边框的宽度）
-
-
事件参数对象e的学习
- e.stopPropagation(); 阻止事件冒泡 === e.cancelBubble=true; 阻止事件冒泡
- e.target : 选中的对象，就是当前正在被操作的对象
- e.target.id : 选中的对象的id，就是当前正在被操作的对象的id
- e.dataTansfer.setData(“html/text”,存储的文本内容)；
- e.dataTransfer.getData(“html/text”) ===> 获取刚才存储的文本内容
- 关于事件参数e中的手指对象。
- e.touches：是指屏幕上所有得手指对象。
- e.targetTouches：当前元素得手指对象
- e.changedTouches：当前屏幕上变换得手指对象【数组对象】
jquery学习考点
-
jquery中的选择器
- 选择器
- id选择器===KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id属性值")，返回的是一个元…("#id")
- 标签选择器=== ( " 标 签 名 字 " ) ， 返 回 的 是 一 个 数 组 ， 例 ： ("标签名字")，返回的是一个数组，例： ("标签名字")，返回的是一个数组，例：(“p”)
- 类选择器=== " . 类 样 式 的 名 字 " ) ， 返 回 的 是 一 个 数 组 ， 例 ： ".类样式的名字")，返回的是一个数组，例： ".类样式的名字")，返回的是一个数组，例：(".dv")
- 交集选择器=== " 标 签 名 . 类 样 式 的 名 字 " ) ， 返 回 的 是 一 个 数 组 ， 例 ： "标签名.类样式的名字")，返回的是一个数组，例： "标签名.类样式的名字")，返回的是一个数组，例：(“div.cls”)
- 并集选择器=== ( " 选 择 器 " ) ， 返 回 的 是 一 个 数 组 ， 例 ： ("选择器")，返回的是一个数组，例： ("选择器")，返回的是一个数组，例：("#id,p,.dv")
- 筛选器（从已经选择的对象中在进行筛选）
- 索引筛选器1=== ( " 选 择 器 ： e q ( 索 引 值 ) " ) ， 注 意 的 是 选 择 器 获 取 的 元 素 应 该 是 多 个 ， 例 如 ： ("选择器：eq(索引值)")，注意的是选择器获取的元素应该是多个，例如： ("选择器：eq(索引值)")，注意的是选择器获取的元素应该是多个，例如：(“li:eq(2)”),表示的意思是多个li元素中选取第二个li元素
- 索引筛选器2=== ( " 选 择 器 ： l t ( 索 引 值 ) " ) ， 注 意 的 是 选 择 器 获 取 的 元 素 应 该 是 多 个 ， 例 如 ： ("选择器：lt(索引值)")，注意的是选择器获取的元素应该是多个，例如： ("选择器：lt(索引值)")，注意的是选择器获取的元素应该是多个，例如：(“li:lt(2)”),表示的意思是获取小于索引2的元素
- 索引筛选器=== ( " 选 择 器 ： g t ( 索 引 值 ) " ) ， 注 意 的 是 选 择 器 获 取 的 元 素 应 该 是 多 个 ， 例 如 ： ("选择器：gt(索引值)")，注意的是选择器获取的元素应该是多个，例如： ("选择器：gt(索引值)")，注意的是选择器获取的元素应该是多个，例如：(“li:gt(2)”),表示的意思是获取大于索引2的元素
- 奇数筛选器=== ( " 选 择 器 ： o d d " ) ， 例 如 ： ("选择器：odd")，例如： ("选择器：odd")，例如：(“li:odd”),表示的意思是多个li元素中选取奇数的li元素
- 偶数筛选器=== ( " 选 择 器 ： e v e n " ) ， 例 如 ： ("选择器：even")，例如： ("选择器：even")，例如：(“li:even”),表示的意思是多个li元素中选取偶数的li元素
- 获取最后一个=== ( " 选 择 器 ： l a s t " ) ， 例 如 ： ("选择器：last")，例如： ("选择器：last")，例如：(“li:last”),表示的意思是多个li元素中最后一个li元素
- 获取最后一个=== ( " 选 择 器 ： f i r s t " ) ， 例 如 ： ("选择器：first")，例如： ("选择器：first")，例如：(“li:last”),表示的意思是多个li元素中di一个li元素
- 已知当前元素获取其他元素的方法（obj代表当前元素）
- obj.next() ====下一个兄弟元素
- obj.nextAll() ====后面所有兄弟元素
- obj.prev() ====前一个兄弟元素
- obj.prevAll() ====前面所有兄弟元素
- obj.siblings() ====所有的兄弟元素（不包括自己）
- obj.parent() ====父级元素
- obj.children() ====所有子元素
- 选择器
-
jquery中的创建元素
- $(“html代码”)，这种创建的代码需要搭配创建元素.apendTo(父级元素)或者父级元素.append(创建元素)。进行插入
- 父级元素.html(“html代码”)，这中就直接进行了插入，缺点就是会清空该父级元素中的所有内容，只保留刚创建的元素
-
jquery中元素的插入($("#dv")代表父级元素)
$("#dv").append($(" <span>我是最后一个子元素span</span>")); //子元素最后一个 $(" <span>我也是最后一个子元素span</span>").appendTo($("#dv")); //子元素最后一个 $("#dv").prepend($(" <span>我是第一个子元素span</span>")); //子元素第一个 $(" <span>我也是第一个子元素span</span>").prependTo($("#dv")); //子元素第一个 $("#dv").after( $(" <span>我是后一个兄弟元素</span>")); //后面第一个兄弟元素 $("#dv").before($(" <span>我是前一个兄弟元素</span>")); //前面第一个兄弟元素 -
元素的移除
- $("#dv").html(""); //从而达到清除元素的效果
- $("#dv").empty()方法，清空父级元素中的子元素,
- $("#dv").remove();移除父级元素本身
-
属性的相关操作（obj代表当前元素）
- 设置自定义属性 ==== obj.attr(参数一，参数二)，参数一：自定义属性名字，参数二：自定义属性值，注意，不仅可以移除自定义的，也可以移除本身的
- 获取属性的值 ==== obj.attr(参数一)；注意，不仅可以移除自定义的，也可以移除本身的
- 属性的移除 ==== obj.removeAttr()；注意，不仅可以移除自定义的，也可以移除本身的
-
目前为止学过的事件
- 参考原生js中的事件，直言将on去掉，就是jquery中的事件
-
事件的绑定与解绑（这里的事件多用click代替，对象用obj代替）
-
事件绑定
- obj.on(“click”,“选择器”,事件处理函数)；
- obj.click(事件处理函数)；
- 还有其他的事件绑定方法，但是都不去了解了
-
事件的解绑
-
obj.off(“click”,“选择器”)；注意：解绑里的参数可以省略，但是会有不同的含义。例如：
// 事件的解绑 obj.off() //表示父级元素，子级元素的所有事件全部解绑 obj.off("click") //表示父级元素，子级元素的所有点击全部解绑 obj.off("click mouseover") //表示父级元素，子级元素的所有点击和鼠标进入全部解绑 obj.off("click") //解绑p标签的点击事件 -
obj.click(“click”);省略事件处理函数，则表示解绑了
-
-
-
jquery中的属性和方法
-
obj.val() ====操作表单元素的属性值
-
obj.text() ====操作元素中间的文本内容（jquery中大部分都已经解决了兼容性问题）
-
obj.html() ====错做元素中间的html代码
-
obj.css() ====操作元素的样式 ， 例如
$("#dv").css({"width":"200px","height":"200px","backgroundColor":"pink"}); -
obj.addClass(“类样式名”) ====添加类样式
-
obj.removeClass(“类样式名”) ===== 移除类样式名
-
obj.hasClass(“类样式名”) =====移除类样式名
-
obj.index() ====元素的索引
-
动画相关的方法
-
obj.show() ====元素的显示
-
obj.hide() ====元素的隐藏
-
obj.stop() ====停止动画
-
obj.slideUp(参数1，参数2) ====参数1：时间（ms）参数2：回调函数
-
obj.slideDown(参数1，参数2) ====参数1：时间（ms）参数2：回调函数
-
obj.slideToggle(参数1，参数2) ====参数1：时间（ms）参数2：回调函数
-
obj.fadeIn(参数1，参数2) ====参数1：时间（ms）参数2：回调函数
-
obj.fadeOut(参数1，参数2) ====参数1：时间（ms）参数2：回调函数
-
obj.fadeToggle(参数1，参数2) ====参数1：时间（ms）参数2：回调函数
-
obj.animate(参数1，参数2，参数3，参数4) ====参数1：动画属性 参数2：时间（ms）参数3：执行效果 参数4：回调函数。注意：参数1动画属性可以是对象。例如：
$("div").animate({"width":"800px","height":"800px","opacity":"0.6"},2000,"linear");
-
-
-
jquery中的三大系列
- 设置和获取元素的宽和高
- obj.width() ==获取 obj.width(值) ===设置
- obj.height() ==获取 obj.width(值) ===设置
- 获取元素的left和top
- obj.offset() 返回的是一个对象。{“left”:“值”,“top”:“值”}。。注意：改制包含margin
- 获取元素卷曲出去的值
- obj.scrollLeft() === 向左卷曲出去的距离
- obj.scrollTop() === 向上卷曲出去的距离
- 设置和获取元素的宽和高
函数相关考点记录
-
关键词break和continue的对比
-
break，如果在循环中使用，遇到break，则立刻跳出循环。
-
continue,在循环中，如果遇到continue，则之间开始执行下一次循环。例如：
<script> var sum=0; var i=100; while(i<=200){ if(i%2==0){ i++; continue; }else{ sum+=i; i++; } } console.log(sum); 0~200之间奇数和 </script>
-
-
函数中形参和实参的对比
- 形参：函数在定义时候，小括号里的变量叫形参
- 实参，函数在调用时候，小括号传入的之叫做实参
- 形参和实参的个数可以不一致，但是实参的个数一定小于等于形参的个数
-
函数中arguments：argumens可以获取传入数组的每个参数的值--------为数组，arguments[]。例如：
<script> function f1 () { var sum=0; for(i=0;i<arguments.length;i++){ sum+=arguments[i]; } return sum; } console.log(f1(10,20)); </script> -
函数的几种定义方式
- 命名函数：函数有函数名
- 命名函数：函数没有函数名
- 函数名等于该函数的匿名形式
-
函数中变量的作用域和作用域链
- 全局变量：变量的使用范围称之为作用域，全局变量作用于全局
- 局部变量：只能作用于局部，通常是函数内部声明的变量
- 作用域链：在函数中使用一个变量时，首先在该函数中寻找该变量有没有声明，如果没有，则向其父级函数中寻找，最后到全局变量中寻找，知道找到该变量，否则则为undefinited
-
函数的预解析
- 把函数和变量的声明提前，注意：只是把声明提前，赋值仍然保留在原位置。
-
创建对象的四种方式
-
调用系统的构造函数创建对象
var obj=new Object(); obj.age=18; console.log(obj); -
工厂模式创建对象
function creatObject(name,age){ var obj=new Object(); obj.name=name; obj.age=age; return obj; } var obj=creatObject("小苏",18); console.log(obj.name); -
自定义构造函数创建对象
function Person(name,age){ this.name=name; this.age=age; } var person=new Person("小苏",18); console.log(person.name); 做了四件事： 1.在内存中申请一段空间，存储创建的新对象 2.把this设置为当前对象 3.设置对象的属性和方法 4.把this这个对象返回 -
字面量的方式创建对象
var obj={ "name":"小苏", "age":"18", eat:function() { console.log("hello world"); } }; obj["eat"]();
-
-
闭包
-
闭包：函数A中有函数B，函数B可以访问函数A中定义的变量或者数据，此时形成了闭包
-
闭包的作用：缓存数据，延长作用域链。
-
闭包的缺点：没有及时释放数据，占据内存
-
闭包的形式
一般结构： function A () { var num=10; return function(){//这种形式num的值都得到了保存 num++; console.log(num); } } 结果： var ff=A(); ff(); ff(); ff();
-
-
沙箱
- 沙箱：环境黑盒，在一个虚拟的环境中模拟真是世界。在虚拟环境中做实验，得到的结果同真是世界一样，但是又不会影响真实世界。
-
浅拷贝和深拷贝之间的区别
- 浅拷贝：拷贝就是复制。浅拷贝是把一个对象的地址给了另一个对象。
- 深拷贝：拷贝就是复制。深拷贝是在另一个对象中开辟相应的空间。把需要拷贝的东西复制到这个开辟的空间中
-
数据表述手段-----JSON
- JSON是类似于JS中字面量的方式。简单来说JSON是一种数据格式，用来表述数据。
- JSON中属性和值都必须用双引号【""】包裹。
- JSON中表示字符串必须使用双引号
- JSON中不能有注释存在
- JSON是类似于JS中字面量的方式。简单来说JSON是一种数据格式，用来表述数据。
-
JSON数据类型和Buffer数据类型
-
JSON：JSON 通常用于与服务端交换数据。
-
JSON格式：{ “firstName”:“John” , “lastName”:“Doe” }
-
JSON数组格式：[{ “firstName”:“John” , “lastName”:“Doe” },{ “firstName”:“haha” , “lastName”:“DOG” } ]
-
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JSON 对象转换为字符串。
JSON.stringify(value) // value必需，value一般时JSON对象或这数组JSON对象 -
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JSON 对象。
JSON.parse(text) // text:必需，text是一个有效的 JSON 字符串或者是一个有效的字符串形式的JSON 数组
-
-
Buffer:用来创建一个专门存放二进制数据的缓存区。
-
Buffer格式：<Buffer 66 6e 69 64 3d 54 65 45 6e 38 61 38 44 4d 6b 4c 53 70 72>。Buffer对象在我看来是类似于一个二进制数组。
-
Buffer数组格式：[ <Buffer 66 6e 69 64 3d 54 65 45 6e 38 61 38 44>,< Buffer 4d 6b 4c 53 70 72 4b 41 56 66 66 7a 4d 35 26 66 6e 6f 70>,<Buffer 3d 73 75 62 6d 69 74 2d 70 61 67 65 26 74 69 74 6c 65>,<Buffer … > ]
-
Buffer数组的拼接（Buffer.concat(list[, totalLength])）：是多个Buffer对象拼接为一个Buffer对象。
Buffer.concat(list[, totalLength]) //list是Buffer数组格式 -
转变Buffer编码：Buffer.toString([encoding[, start[, end]]])
postBody.toString("utf8") // post是存储的Buffer数组，转为了uft8编码格式
-
-
-
回调函数获取异步操作的结果 【非常重要：得到一个结论，要想拿到异步操作的结果，必须通过回调函数来获取】
看一个例子
function fn() { setTimeout(function () { var data = 'hello' },1000) }如果我们想要获取定时器中的数据要怎么做呢
function fn() { var data = '' setTimeout(function () { data = 'hello' },1000) return data } console.log(fn())函数的执行结果为 ” 空字符串，并没有获取到定时器中的数据
这是由于定时器设定内部函数在1s后执行，内部的
data数据1s后才会更新，而fn()一旦执行立刻返回结果这里，我们需要一个回调函数，在定时器内部执行，并获取返回更新了的
data###function fn(callback) { setTimeout(function () { var data = 'hello' callback(data) },1000) } fn(function (data) { console.log(data) })给fn传入一个函数作为参数，并在定时器内
callback(data)，进行调用
并将定时器内的数据作为参数返回输出
js高级中对象的相关知识
-
编程思想：
- 面向过程，凡是都要亲历亲为。
- 面向对象，提出需求，找对象。（object oriented programing）
- js不是一门面向对象的语言，而是一门基于面向对象的语言。用js来模拟面向对象
- 面向对象的特征：封装，继承，多态
- 封装：将一些重复且重要的代码进行包装，在需要的时候直接使用
- 继承：继承是一种关系，是父类与子类之间的一种关系。但是js中没有类，js中是通过构造函数来模拟类的，然后通过原型链来实现继承。
多态：同一个行为，对于不同的对象产生了不同的效果。但是在js中
-
原型的作用：数据共享，节省内存空间
-
构造函数和实例对象和原型对象之间的关系
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h1ZzSlzc-1598784768392)(C:\Users\cohhe\Desktop\构造函数、实例对象、原型对象.png)]
-
总结：
- 构造函数可以实例化对象
- 构造函数中有一个prototype的属性，指向原型对象，Person.prototype==原型对象
- 实例对象中有一个__ proto__ 属性，,指向原型对象，per. __ proto __ ==原型对象
- 原型对象中有一个构造器constructor，这个构造器指向的就是自己的构造函数
-
-
实例对象中使用的属性和方法层层的搜索
- 有点类似于变量的作用域链。实例对象使用的属性或方法，首先在实例对象中找，找不到则在原型对象中去找。还找不到，则报错。
-
如何将局部变量变成全局变量
-
传参的时候将顶级对象window传入，并window.局部变量，这样局部变量就变为全局变量了
<script> (function(win){ var age=10; window.age=age; })(window); console.log(age); </script>
-
-
如何将一个局部对象变为全局对象：原理同上一样
<script> (function(window){ function Random(){} Random.prototype.getRandom=function(min,max) { return Math.Random(); }; window.Random=Random; })(window); var random=new Random(); console.log(random); </script> -
原型链：原型链是一种关系，是实例对象和原型对象之间的一种关系，两者之间通过__ proto __ 来联系。等价于实例对象. __ proto __ == 原型
-
原型的指向是可以改变的。且改变之后如何添加方法
<script> function Person(age){ this.age=age } Person.prototype.eat=function() { console.log("我在吃东西"); }; function Student (sex) { this.sex=sex } Person.prototype.sayHi1=function() {//这里添加的方法是在person的原型中添加的 console.log("hello"); }; Student.prototype=new Person(10); Student.prototype.sayHi=function() {//此时添加的方法是在new Person中的实例对象中的 console.log("您好"); }; var stu=new Student("男"); stu.sayHi(); stu.sayHi1(); console.log(Student.prototype.__proto__); 原型改变后添加原型方法： Student.prototype = new Person(10); 1.直接 Student.prototype.sayHi=function() {//此时添加的方法是在new Person中的实例对象中的 console.log("您好"); }; 此时的原型指向改变了，因此在这里添加也能够访问到 2. 在new Person(10)创建的实例对象__proto__原型对象中添加，原型链的改变，导致这个方法依然能够被访问到 《====》 Person.prototype.sayHi1=function() {//这里添加的方法是在person的原型中添加的 console.log("hello"); }; </script>- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0A5bQmfA-1598784768396)(C:\Users\cohhe\Desktop\原型指向改变.png)]
-
通过原型实现继承
-
继承的作用：实现数据共享
-
实现继承的两种方法：
-
改变原型指向。如8所示，student可以访问person里的属性和方法。**缺陷：**初始化之后所有的属性都是一样的
<script> function Person(age){ this.age=age } Person.prototype.eat=function() { console.log("我在吃东西"); }; function Student (sex) { this.sex=sex } Student.prototype=new Person(10);//改变原型的指向 var stu=new Student("男"); stu.eat(); </script> -
利用构造函数：构造函数.call(当前对象，属性1，属性2，属性3，…);，**缺陷：**只能访问属性，person的方法不能访问
<script> function Person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; } Person.prototype.sayHi=function(){ console.log("你好")； } function Student(name,age,sex,score){ Person.call(this,name,age,sex); //只能访问属性，person的方法不能访问 this.score=score; } var stu=new Student("小明",10,"男","100") </script>
-
-
解决继承缺陷的方法（组合继承）
-
组合继承：同时利用构造函数和使用改变原型指向的方法。**注意的是：**在改变原型指向时，也就是初始化时，不要传值。
<script> function Person (name,age,sex) { this.name=name, this.age=age, this.sex=sex } Person.prototype.eat=function() { console.log("我吃了"); } function Student(name,age,sex,score){ Person.call(this,name,age,sex); this.score=score; } Student.prototype=new Person(); var stu=new Student("小苏",18,"男",99); stu.eat(); console.log(stu.name); </script>
-
-
正则表达式（会认即可）
-
正则表达式：也叫规则表达式，按照一定的规则组成的一个表达式，主要的作用是匹配字符串
-
正则表达式元字符
- [a-zA-Z]：字符范围。匹配指定范围内的任意字符。例如，’[a-zA-Z]’ 可以匹配 ‘a’ 到 ‘z’ ‘A’ 到 ‘Z’ 范围内的任意字母字符。[]内也可以数字。
- |：表示或者
- （）：提供优先级
-
正则表达式限定符
- ：以开头或者是取非。[0-9]表示以数字开头。
- $：匹配输入字符串的结束位置。
- +：表达式一次或多次。
- *：表达式零次或多次。
- {n}：表达式出现n次。
- ？：表达式零次或一次。
-
正则表达式的简写
- \d：任意一个数字
- \D：非数字中的一个
- \s：空白字符中的一个
- \S：非空白符
- \w：非特殊字符
- \W：特殊字符
- \b:单词边界
-
正则表达式的使用
-
系统自带的构造函数
<script> var reg=new RegExp(/\d{5}/); var flag=reg.test("我的电话是10086")； console.log(flag); </script> -
字面量的方式创建正则表达式对象
<script> var reg=/\d{1,5}/; var flag=reg.test("我的电话是888")； console.log(flag); </script>
-
php（服务端开发）
学习php的中重心不是学习如何使用php。而是了解服务端的开发，以及某些其他对前端开发有帮助的东西
-
什么叫服务器？
服务器就是安装特定软件的计算机，用于专门提供特定的服务，这种计算机叫做服务器。例如：安装Apache这种特定软件的计算机就可称之为web服务器
-
API（Application programing interface : 应用程序编程接口）
API，简称接口，是提供某种特定能力的事物，特点是有输入输出，而我们在开发时写代码用到的接口称之为API。其实封装的函数也可以称之为接口。
-
HTTP
HTTP(HyperText Transfer Protocal ,超文本传输协议) 是一种计算机与计算机之间沟通的一种标准协议，这种协议限制了通信内容格式以及各项内容的含义。
-
用户操作系统与服务器通信过程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2fjAbBY2-1598784768399)(C:\Users\cohhe\Desktop\js笔记\2019115-172447.jpg)]
- 注意：客户端通过随机端口与服务端某个固定端口（一般为80）建立连接一般需要通过三次握手
- 客户端：在吗？ ===》 服务端： 在
- 客户端：有事和你聊 ===》 服务端： 好的
- 客户端：那我开始问你了 ===》 服务端： 好的
- 注意：客户端通过随机端口与服务端某个固定端口（一般为80）建立连接一般需要通过三次握手
-
数据表示手段（JSON基本概念）
JSON是类似于JS中字面量的方式。简单来说JSON是一种数据格式，用来表述数据。
- JSON中属性和值都必须用双引号【""】包裹。
- JSON中表示字符串必须使用双引号
- JSON中不能有注释存在
-
数据库简介
-
数据库就是数据得仓库，用来按照特定得结构取组织和管理我们得数据，有了数据库，就可以更加方便得取操作我们需要保存得数据
-
数据库服务软件：MySQL，了解即可。
-
-
Cookie的定义及作用
HTTP有一个很重要的特点，就是每一次见面都是初次见面。对于服务端来说记住每一个访问者那是不可能的，所以必须借助一些手段或者说是技巧，让服务端来记住客户端，这种手段就是Cookie。这种技术就像是超市的小票一样，凭票识别。
-
AJAX
AJAX：就是浏览器提供的一套API，通过JS调用，从而实现通过代码控制请求响应，实现网络编程。
- ALJAX：本质是API
- 作用：浏览器与服务器之间传递数据
HTML5 CSS3进阶教学
html5进阶教学第一天
-
语义化标签
- 在h5以前，页面布局方式都是直接用div盒子来进行布局。但是h5以后，增加了语义化标签，是布局变得更为简洁。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A0S31mSz-1598784768406)(C:\Users\cohhe\Desktop\js笔记\语义化标签.jpg)]
注意：由于是新增的标签，所以不是所有的浏览器都是支持的，但是问题不大，取网上找兼容文件，然后引入即可解决兼容问题。
-
表单新增的属性
-
type新增属性，例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> type属性： 文本框：<input type="text" autofocus pattern="^\d*[a-z]+" required placeholder="请输入数字开头字母结束格式"/> 按钮：<input type="button" value="button"/> 多选框：<input type="checkbox" checked/> 单选框：<input type="radio" value="true" checked/> 邮箱框：<input type="email" required placeholder="请输入邮箱格式"/> 邮箱格式 默认必须有个@ 文件框：<input type="file" accept="image/*"/> 选择文件，accept指定文件类型，选择时，只能选择指定的文件类型 数字框：<input type="number" min="10" max="50" step="3"/> 图片：<input type="image" src="./../img/card.png"/> 范围：<input type="range" placeholder="range" value="100" min="51" max="500" step="50" > 网址框：<input type="url" placeholder="请输入网址格式"/> 必须是网址格式 搜索框：<input type="search" autocomplete="on" placeholder="search has close button"/> 跟普通input比，多了一个情况的小叉叉 电话：<input type="tel" placeholder="电话号码 键盘九宫格数字"/> 在手机上有效，弹出的键盘是九宫格数字键盘 颜色框：<input type="color"/> 日期时间相关的： 日期框：<input type="date"/> 日期时间框：<input type="datetime-local"/> 月：<input type="month" placeholder="month"/> 星期：<input type="week" placeholder="week"/> 时间<input type="time" placeholder="time"/> </body> </html> -
表单新增的其他属性：placeholder，autofocus，pattern，mutiple，form
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> //placeholder:占位提示符 autofocus：自动获取焦点 pattern：正则表达式验证 文本框：<input type="text" autofocus pattern="^\d*[a-z]+" required placeholder="请输入数字开头字母结束格式"/> //mutiple：允许多个，在文件框中就是允许多个文件，在邮件框中就是允许多个邮箱等等。 文件框：<input type="file" accept="image/*"/ mutiple> 选择文件，accept指定文件类型，选择时，只能选择指定的文件类型 </body> </html>form属性：如有表单元素没有包含在form标签中，默认情况下，表单元素数据是不会进行提交的。form属性则可以解决这个问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> 通过id和form属性将未被包裹的标签放入form标签中 <form action="" method="get" id="myForm"> <input type="url" pattern="^1\d{10}$" /> </form> 地址：<input type="text" form="myForm" /> </body> </html>
-
-
表单新增元素（datalist和progress和多媒体标签）
- datalist
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> //<select></select>下拉框的缺点是：只能选择，不能输入。而datalist则解决了这个问题。datalist标签可以和很多其他类型的标签进行搭配 <input type="text" name="" value="" placeholder="" list="subjects"> <datalist id="subjects"> <option value="篮球"></option> <option value="足球"></option> </datalist> </body> </html>-
progress
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <progress max="100" value="70" min="0" high="80" low="60"></progress> </body> </html> -
多媒体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <audio src="播放路径" loop controls autoplay></audio> //循环 控制面板 自动播放 <video src="播放路径" loop controls autoplay></video> //...... </body> </html>
-
新增的表单事件
- οninput=onchange : 监听当前指定元素的内容，只要发生了改变，就会触发该事件
- onkeyup ： 键盘弹起时触发，每一个键的弹起都会触发一次
- oninvalid ： 当验证失败是触发，一般来说是在pattern（正则表达式）中验证
-
获取dom元素
querySelector(传入选择器的名称)和queryselectorAll(传入选择器的名称)
querySelector(传入选择器的名称)：获取的时单个元素，如果满足条件的不止一个，则返回满足条件的第一个
queryselectorAll(传入选择器的名称)：获取的是满足条件的数组。
注意：传入选择器名称时要经行区别，.div：表示类选择器 ，#div：表示Id选择器 ，div：则表示标签
-
元素样式操作
-
add()：为元素添加指定样式，一次只能添加一个
-
classList：当前元素所有样式列表 ====》数组
-
remove：移除样式，一次只能移除一个。
-
toggle：切换样式，有则删除，无则添加
-
contains：判断元素是否包含指定样式名称，返回的是布尔类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style> .red{ background-color: red; } .underline{ text-decoration:underline; } .blue{ color:blue; } .green{ color:green; } </style> <body> <ul> <li>前端与移动开发</li> <li class="blue">java</li> <li>javascript</li> <li>c++</li> </ul> <input type="button" value="为第一个li添加样式" id="add"> <input type="button" value="为第二个li移除样式" id="remove"> <input type="button" value="为第三个li切换样式" id="toggle"> <input type="button" value="第四个li是否包含" id="contains"> </body> <script> window.onload=function() { document.querySelector("#add").onclick=function() { document.querySelector("li").classList.add("red"); }; document.querySelector("#remove").onclick=function() { document.querySelector(".blue").classList.remove("blue"); }; document.querySelector("#toggle").onclick=function() { document.querySelectorAll("li")[2].classList.toggle("green") }; document.querySelector("#contain").onclick=function() { var flag=document.querySelectorAll("li")[3].classList.contains("red"); console.log(flag); }; }; </script> </html>
-
html5进阶教学第二天
-
网络监听接口
网络监听接口是一个网络改变事件
-
ononline:网络连通是触发这个事件
window.addEventListener("online",function(){ alert("网络连通"); }) -
onoffline:网络断开时触发这个事件
window.addEventListener("offline",function(){ alert("网络断开"); })
-
-
全屏使用接口
让一个元素全屏的主要方法和属性
-
requstFullScreen(); ===>方法。开启全屏状态，可以针对所有的元素。
注意：不同的浏览器为了兼容问题，需要加不同的前缀
-
cancelFullScreen(); ===>方法。退出全屏，但是只针对document这个元素。也就是说调用时只能为document.cancelFullScreen();这样调用
-
isFullScreen ===>属性。判断是否处于全屏，通过也是针对document这个元素。调用时document.isFull Screen();这样调用。返回的时布尔类型
-
-
文件读取接口（FileReader ====>实际上就是一个对象）
FileReader：读取文件内容：
-
readAsText(); ： 读取文本文件，返回文本字符串，默认编码时UTF-8.
-
readAsBinaryString(); ： 读取任意类型的文件，返回二进制字符串，这个方法的目的适用于数据的存储。
-
readAsDataURL(); ： 读取文件，获取一段以data开头的字符串，这段字符串的实质时DataURL。DataURL是一种将资源转化为base64编码的字符串形式，并将这些内容直接存储到url中，作用：优化网站的加载速度和执行效率。（感觉就是一个文件的路径）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <form action="" method="get"> <input type="file" mutiple id="myFile" name="myFile"> <input type="submit" name="" value="提交" > <img src="" alt=""> </form> </body> <script> function getFileContent(){ var reader=new FileReader(); var file=document.querySelector("#myFile").files[0];//获取file文件框后，选中的文件存放在files属性中，可以通过这样获取文件。 console.log(file); reader.readAsDataURL(file);//读取文件 reader.onload=function() { document.querySelector("img").src=this.result; }; } document.querySelector("#myFile").onchange=function() {//file文件框内容发生改变后，触发该事件。 getFileContent(); }; </script> </html> -
拖拽接口使用
-
在h5中要想一个元素可以被拖拽，就必须为该元素添加traggable=“true”,图片和超链接默认是可以拖拽的。
<p id="pe" draggable="true">试着把我拖过去啊<p> -
学习拖拽本质上就是学习拖拽事件
- 应用于被拖拽元素的事件（所有的都是针对鼠标而言）
- ondrag：应用于拖拽元素，整个拖拽过程都会被触发。
- ondragstart：应用于拖拽元素，拖拽开始时调用。
- ondragleave：应用于拖拽元素，鼠标离开时拖拽元素时调用（相对于元素未拖拽时的位置）。
- ondragend：应用于拖拽元素，拖拽结束时调用。
- 应用于目标事件（所有的都是针对鼠标而言）
- ondragenter：应用于目标元素，当拖拽元素进入时调用。
- ondragover：应用于目标元素，当停留在目标元素时调用。
- ondrop：应用于目标元素，在目标元素上松开时调用。（这个事件浏览器会默认阻止，因此要在ondragover中阻止浏览器的默认行为）
- ondragleave：应用于目标元素，当鼠标离开目标元素时调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style> div{ height: 400px; width: 200px; border:1px solid #ccc; float:left; margin-right:200px; } </style> <body> <div class="div1" id="div1"> <p id="pe" draggable="true">试着把我拖过去</p> <p id="pe1" draggable="true">试着也把我拖过去</p> </div> <div class="div2" id="div2"> </div> </body> <script> var p=document.getElementById('pe'); var div1=document.getElementById('div1'); var div1=document.getElementById('div2'); // p.οndrag=function() { // console.log("ondrag"); // }; // p.οndragstart=function(e) {//为了时任意的元素都能够拖拽，此时的元素不要用特定的元素，用document代替 // // console.log("ondragstart"); // // console.log(e); // e.dataTransfer.setData("text/html",e.target.id); // }; document.ondragstart=function(e) {//为了时任意的元素都能够拖拽，此时的元素不要用特定的元素，用document代替 // console.log("ondragstart"); // console.log(e); e.dataTransfer.setData("text/html",e.target.id); }; // p.οndragleave=function() { // // console.log("ondragleave"); // }; // p.οndragend=function() { // // console.log("ondragend"); // }; // 应用于目标元素 // div2.οndragenter=function() { // console.log("ondragenter"); // }; document.ondragover=function(e) {//用document代替特定元素，事件参数对象e可以帮我们锁定元素。浏览器会自动默认组织ondrop事件，所以必须在ondragover中组织浏览器的默认行为 // console.log(e); e.preventDefault(); // console.log("ondragover"); }; div2.ondrop=function(e) { var id=e.dataTransfer.getData("text/html"); e.target.appendChild(document.getElementById(id)); }; // div2.οndragleave=function() { // console.log("ondragleave"); // }; </script> </html> - 应用于被拖拽元素的事件（所有的都是针对鼠标而言）
-
-
web存储（sessionStorage和localStorage【这个重要】）
- sessionStorage的使用：存储数据到本地，存储容量为5Mb左右，且存储时间短暂，当浏览器关闭时数据就会丢失。
- 存储数据：setItem(key,value),以键值对的存储方式存储（Json格式的字符串格式存储数据）
- 获取数据：getItem(key); 通过指定名称的key获取相应的value值
- 删除数据：removeItem(key); 通过指定名称的key删除相应的value值
- clear()；清空所有的存储内容
- localStorage的使用：作用也是存储数据到本地，存储容量为20Mb左右。但是在同一个浏览器的不同窗口数据可以共享数据。且数据的永久生效。它的数据时存储在硬盘上的，并不会随着网页或者浏览器的关闭而消失。
- setItem(key,value)===>存储数据（Json格式的字符串格式存储数据）
- removeItem(key)====>删除数据
- getItem(key)===>获取数据
- 应用缓存
- 概念：通过HTML5，通过创建cache manifest文件，可以轻松创建web应用的离线版本
- 优势：
- 可配置需要缓存的资源
- 网络无连接时应用仍可用
- 本地读取缓存资源，提高了访问速度，增强了用户体验
- 减少请求，缓解服务器负担。
- Cache Manifest基础
- Manifest文件
- sessionStorage的使用：存储数据到本地，存储容量为5Mb左右，且存储时间短暂，当浏览器关闭时数据就会丢失。
-
css3进阶教学第一天
-
选择器的扩展
-
属性选择器
-
E[attr]:查找指定的拥有attr属性的E标签。例如查找拥有style属性的li标签
li[style]{ text-decoration:underline; } -
E[attr=value]:查找指定的拥有有attr属性并且属性值为value的E标签。例如查找拥有calss属性并且值为red的的li标签
li[class="red"]{ font-size:16px; } -
E[attr*=value]:查找指定的拥有有attr属性并且属性值包含（可以是任意位置）value的E标签。
li[class="ed"]{ font-size:16px; } -
E[attr^=value]:查找指定的拥有有attr属性并且属性值以value开头的E标签。
li[class="r"]{ font-size:16px; } -
E[attr$=value]:查找指定的拥有有attr属性并且属性值以value结尾的E标签。
li[class="d"]{ font-size:16px; }
-
-
伪类选择器
伪类选择器：之所以叫伪类选择器的原因是因为虽然于类有着相似的效果，但是并没有类附加到标级的标签上
-
兄弟伪类选择器
-
+： 查找当前元素的相邻的满足条件的元素 ====>此处的相邻是当前元素的下一个元素
-
~ ：当前元素指定类型的元素 ===>当前元素的下一个元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style> .first+li{ color:blue; } .first~li{ color:pink; } </style> <body> <ul> <li class="first">web</li> <span>能不能变蓝色</span> <li>java</li> </ul> </body> </html>
-
-
相对于父级的结构伪类选择器
-
E：first-child:查找E元素的父级元素的第一个子元素
- 父元素的第一个元素
- 第一个元素若为E，则伪类选择器起作用，若第一个元素不为E，则伪类选择器不起作用
- 查找限制类型：E:first-of-type,加了限制之后，会查找E元素父级元素的第一个为E的子元素
-
E：last-child:查找E元素的父级元素的最后子元素
-
E：nth-child（number）:查找E元素的父级元素的最后子元素
-
li:nth-of-type(even) : 奇数的子元素
-
li:nth-of-type(odd) : 偶数的子元素
-
为前面5个元素添加样式
-
n；默认的取值范围是0~子元素长度
-
E：nth-child（表达式），表达式<=0时，选取无效
li:nth-of-type(-n+5){ font-size:16px; }
-
-
-
-
链接伪类选择器
/*链接在初始状态是蓝色的*/ a:link { color: blue; } /*当链接被点击之后，变成灰色(确切的说，到浏览器访问历史中 的这个URL过期之前或被用户删除之前都是灰色)*/ a:visited { color: gray; } /*鼠标移动到a标签上的时候，下划线消失*/ a:hover { text-decoration: none; } /*用户在链接上按下鼠标时(活动状态)，链接颜色为红色*/ a:active { color: red; }
-
-
伪元素选择器
为什么叫伪元素呢？虽然相当于元素，但是在dom树中却没有，因此后期无法进行js操作。
-
重点： E::before和E::after
- 它的功能完全等价于一个dom元素
- 它不会在dom树中生成
- 其父级元素为 E::before【E::after】中的E
- 是一个行内元素，要想设置宽和高，则必须转化为display：block，或者float：**, 或者position： * *。
- 必须为其添加content："",哪怕不设置内容，也需要content：""。
-
其他为元素的使用
-
获取一个文本的首个字 p::first-letter
-
获取一个文本的后行 p::first-line
-
获取选中的文本 p::selection
<p>眉毛上的汗水和眉毛下的泪水你必须选择一样<p> <style> p::first-letter{ color:red; } p::first-line{ text-decoration:underline; } p::selection{ background-color:pink; } </style>
-
-
-
css3进阶教学第二天
-
渐变
渐变时我们css3中比较丰富多彩的一个特性，通过渐变我们可以实现许多酷炫的效果，有效的减少了图片的使用和数量，并且有很强的适应性和扩展性，可分为线性渐变和径向渐变，还有个重复渐变
-
linear-gradient：线性渐变，指沿着某条直线产生渐变效果
-
语法：background:linear-gradient (pinti || < angle >，< stop >,< stop >,[,< stop >]*)
-
第一个参数：渐变方向
- to left : 从右到左，相当于270deg
- to right : 从左到右，相当于90deg
- to top : 从下到上，相当于0deg
- to buttom : 从上到下，相当于180deg（默认）
-
第二个参数：起点的颜色，还可以指定颜色的位置
-
第三个参数：终点的颜色，还可以指定颜色的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style> div{ width:200px; height: 300px; border:1px solid #ccc; background:linear-gradient(0deg,red 0%,red 30%,blue 50%,blue 100%); } </style> <body> <div class="dv"> </div> </body> </html>
-
-
径向渐变
-
语法：-webkit-radial-gradient([ || ,]?[ || ,]?,[,]*);
-
第一个参数：position || angle，确定圆心的位置，默认在正中心。如果提供两个参数，第一个代表x坐标，第二个代表y坐标。如果只提供一个参数，第二个默认为50%。当然也可以用关键字来代替。比如：center，right，top，bottom，left。坐标的参照为元素左上角。
-
第二个参数：shape || size ，前者为渐变的形状，ellipse：椭圆。circle：圆形。默认为ellipse。后者表示为渐变的大小。即渐变到哪里停止，他又四个值：closest-side：最近边，farest-side：最远边，closest-corner：最近角，farest-side：最远角。
-
第三个参数：开始颜色。
-
第四个参数：结束颜色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style> div{ width:200px; height: 200px; border:1px solid #ccc; background: -webkit-radial-gradient(center,circle,red,yellow,blue); } </style> <body> <div class="dv"> </div> </body> </html>
-
-
重复渐变 repeating-radial-gradient和 repeating-linear-gradien，语法和上面的一样。
-
-
background
-
添加背景颜色
background-color:red; -
添加背景图片
background-image:url("../images/03.png"); -
设置背景平铺
background-repeat
- repeat:平铺，默认。
- no-repeat：不平铺，用得罪过
- space：图片不会缩放平铺，指挥在图片之间产生相同的间距
- round：图片缩放后平铺。
background-repeat:no-repeat; //不平铺 -
设置背景行为：跟随滚动/固定
background-attachment：
- fixed：固定
- srcoll：跟随一起滚动。
background-attachment:scroll; //滚动 -
背景图片大小
background-size，设置背景图片的大小 ，宽度/高度
- 数值：200px 300px；
- 百分比：30% 50%；
- contain：等比例调整图片大小，时图片全部包含在容器内，缺点，背景区域会有空白
- cover：等比例缩放，适应整个背景区域，缺点，图片会溢出
background-size:200px 300px;建议在使用的时候，确定宽高的比例一致，否则会导致图片失真
-
设置坐标原点
坐标原点，是背景图片开始填充的起始点。
background-origin
- border-box：从border的开始填充，会与border重叠
- padding-box：从padding的开始填充，会与padding重叠
- content-box：从content的开始填充，会与content重叠
background-origin:content-box -
背景图片的裁剪
background-clip：也是以原点来设置的
background-clip：content-box；//会沿着内容部分剪裁 -
背景图片的位置
background-position
相对于坐标原定来的，第一个代表x偏移，第二个代表y偏移
background-position:-13px 0 -
边框图片
对盒子的边框经行背景填充。原理：一一对应。从上下左右四个方面拉一条直线，切割成9个九宫格形式，与盒子一 一对应。
border-image：source slice /width /outset repeat;
border-image：url("../images/03.png") slice /width /outset repeat；- 第一个参数source：背景图片地址
- 第二个参数slice：四个方向的裁剪距离
- 第三个参数width：边框图片的宽度。一般默认为原始边框宽度。且一般就用默认情况
- 第四个参数outset：一般不用
- 第五个参数：是否平铺
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-puWPWwZp-1598784768410)(C:\Users\cohhe\AppData\Roaming\Typora\typora-user-images\1573219474127.png)]
-
-
过渡
transition，那个元素要做特效，就往谁上面加过渡，注意：过渡效果只能产生从某个具体的数值到另一个具体数值的过渡，简单来说就是数值的过渡。但是有一个特点是过渡结束后会回到原点。
-
语法：tansition：属性名称 过渡时间 时间函数 延迟时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style> div{ width: 200px; height: 200px; background-color: pink; } div:hover{//或者为div注册一个事件，触发后执行过渡 transition: width 2s ease 0s;//属性名称可以用关键词all，便是这个元素的全部属性 width:400px; } </style> <body> <div> </div> </body> </html>
-
-
transform-2D
-
translate:实现元素的移动，
-
移动是参照元素的左上角
-
过渡结束后会回到原点
-
translate(x,y); ====>x和y方向移动
-
translateX(x); ====>x方向移动
-
translateY(y); ====>x方向移动
-
-
scale：实现元素的缩放
- scale(倍数)； ====>x和y方向上的等比例缩放
- scale(x,y)； ====>x和y方向上的比例缩放
- scaleX(x)； ====>x方向上的比例缩放
- scaleY(y)； ====>y方向上的比例缩放
-
skew:实现元素的旋转，旋转中心默认为中心，正值为顺时针，负值为逆时针
- skew(x,y)； ====>x和y方向上的旋转角度
- skewX(x)； ====>x方向上的旋转角度
- skewY(y)； ====>y方向上的旋转角度
-
设置旋转轴心 ====>transform-origin
transform-origin:x y;//x,y可以是关键词或者是px数值，参考原点是元素左上角。 -
一个任意元素居中的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style> div{ width: 200px; height: 200px; border:1px solid red; position:absolute; left:50%;//参考元素是页面 top:50%; transform:translate(-50%,-50%);//参考元素是元素自己 } </style> <body> <div> </div> </body> </html> -
transform-3D
就是将之前的2D添加一个Z坐标
-
animate：动画。
-
css3进阶教学第三天（重点）
传统布局的局限和伸缩布局的介绍
-
传统布局的局限
传统布局的局限：传统布局基于盒模型，依赖display+position+float属性。虽然可以满足大多数的需求，但是对于特殊布局非常的不方便。css3在布局方面做了非常大的改进，是我们对块级元素的布局排列变得十分灵活。
-
伸缩布局
重要属性
- display：flex； //注意：这个属性一定要放在父盒子里面，这样就会是每一个子元素自动的变为伸缩项。
- flex-direction:row || row-reverse || cloume ||cloume-reverse //这个也是设置在父盒子中的，设置子元素的排列方向，默认是row（水平方向）。
- flex-wrap： wrap || no-wrap; //这个是控制子元素是否换行。默认是不换行，但是一般设置为换行。
- 当flex-direction:row，即排列方向是水平时，可以设置对应的子元素排列方式。====>justify-content（横轴）
- justify-content：flex-start； //子元素从左向右排列。
- justify-content：flex-end； //子元素从右向左排列。
- justify-content：center； //子元素从中间向两边排列。
- justify-content：space-between； //左右对齐父元素的开始和结束，中间平均分配，产生相同的间距
- justify-content：space-around； //将多余的空间分配给每一个子元素的两侧，等价于margin：0 auto；造成中间间距是左右两边盒子间距的两倍。
- 当flex-direction:row，即排列方向是垂直时，可以设置对应的子元素排列方式。====>align-items（纵轴）
- align-items：flex-start； //子元素从上向下排列。（纵轴）
- align-items：flex-end； //子元素从下向上排列。
- align-items：center； //子元素从中间向两边排列。
- align-items：space-between； //左右对齐父元素的开始和结束，中间平均分配，产生相同的间距
- align-items：space-around； //将多余的空间分配给每一个子元素的两侧，等价于margin：0 auto；造成中间间距是左右两边盒子间距的两倍。
移动端的学习
移动端web第一天
-
学习移动web的原因
移动端所占市场份额为85%，而pc端所占据的市场份额仅仅只有15%。这就是我们学习移动端web的原因。
-
移动端和pc端有什么不同呢？
我认为移动端和pc端最大的不同就是两个像素（像素：是一种长度单位）不同，即两个屏幕尺寸不同，一个效果在不同的尺寸下的显示效果也是不一样的。
因此出现了逻辑像素。逻辑像素（PPI）=实际像素/倍率。当两者的逻辑像是是一致是，他们的显示效果就是一致的。
因此：要注意选用好倍率的大小
-
对于不同的PPI，如何实现显示效果仍然是一样的呢？
二倍图：为相同的图片准备不同的尺寸来应对不同的PPI。一般是两倍图。
-
移动端的屏幕适配（重要）
移动端的理想状态是：避免滚动条，且不被默认缩放处理。下面这两句代码就解决我前面的问题。
<meta name=description content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 用于移动的适配 --> -
调试
-
模拟调试：浏览器F12后，选择手机模式。
-
真机调试：将做好的网页传入服务器，或者本地搭建好的服务器，然后移动设备通过网络来访问。
-
接着第三方的调试工具，如weinre，debuggap，ghostlab等
注意：真机调试必须保证移动设备同服务器间的网络是相同的。方法：电脑开个wifi，手机连接wifi，这样两者的网络就是互通的了。
-
-
移动端web站点的主要结构
主流的移动站点：
- 京东商城手机版
- 淘宝触屏版
- 苏宁易购手机版[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DxbNDoTk-1598784768412)(C:\Users\cohhe\AppData\Roaming\Typora\typora-user-images\1573307002811.png)]
-
总结
-
设置 ：
-
设置元素宽度设置采用百分比，不要设置固定值，达到流式布局的效果。
-
介绍了主流的移动web站点结构
-
移动端web第二天
-
移动端touch事件（触屏事件） ====>移动端特有的事件
触屏的事件：
- ontouchstart：添加开始触摸事件，当手指触摸到屏幕到屏幕时触发。
- ontouchmove：添加手指滑动事件，当手指在屏幕滑动时触发。
- ontouchend：添加触摸结束事件，当手指离开屏幕时 触发。
- ontouchcancel：添加触摸意外终止事件。
-
如何实现手指滑动而使元素移动
-
记录手指的起始位置------坐标
-
记录手指离开屏幕使得坐标值-----记录手指在滑动过程中得坐标值
-
计算两个记录手指得坐标差异
-
让dom元素也进行相应得数值偏移。
-
事件传参数对象e中有以下关于手指对象。
-
touches：是指屏幕上所有得手指对象。
-
targetTouches：当前元素得手指对象
-
changedTouches：当前屏幕上变换得手指对象【数组对象】
注意：****targetTouches和touches在测试中没有任何区别。
-
-
-
手指对象得坐标值
- screenX和screenY：是指手指触摸点相对于屏幕左上角得值。
- clientX / clientY：相对于当前视口------移动端屏幕左上角得值
- pageX / pageY ：相对于当前页面左上角。----会有滚动条（页面上真实的位置）；
**注意：**如果有多个div要求盒子都能够触发这个事件，此时应该给页面【也就是document】绑定事件，和之前学习的拖拽事件一样。
<div></div> <div></div> document.addEventListener("touchstart",function(e){});//这样两个div都注册了touchstart事件，通过事件参数e来获取当前元素【e.target】 -
使用touch事件来模拟移动端的点击事件（重点）=>学习的仅仅是思想，因为Zepto和fastclick这种js文件都已经帮我们封装好了移动端的点击事件=>tap
-
首先为什么要有移动端的点击事件：因为pc端的click点击事件有延迟，而移动端需要判断用户执行的是单击操作还是双击操作，若使用pc端的click事件，原本的点击操作也有可能被认为是双击操作。所以要用touch事件来模拟移动端的点击事件。
-
我们需要点击的特点：
-
点击只有一根手指
-
判断手指开始触摸和手指松动事件差异不能大于指定的值 300/150
-
保证没有滑动操作，如果有抖动，必须保证抖动的范围在指定的范围。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style> div{ width: 200px; height: 200px; border:1px solid #ccc; } </style> <body> <div> </div> </body> <script> var itcast={ tap:function (dom,callback) { var startX,startY,startTime; if(!dom||typeof dom!="object"){ return; } dom.addEventListener("touchstart",function (e) { if(e.targetTouches[0].length>1){ return; } startX=e.targetTouches[0].clientX; startY=e.targetTouches[0].clientY; startTime=Date.now(); }) dom.addEventListener("touchend", function(e){ if(e.changedTouches[0].length>1){ return; } if(Math.abs(Date.now()-startTime)>150){ return; } if(Math.abs(e.changedTouches[0].clientX-startX)<6 && Math.abs(e.changedTouches[0].clientX-startX)<6){ callback&&callback(); } }); } } var div=document.querySelector("div"); function say(){ console.log(1); } itcast.tap(div,say); </script> </html>
-
-
移动端web第三天(不是特别重要)
-
什么是zepto？
Zepto是一个轻量级的针对移动端的Javascript库。如果会用jQuery，那么你也会用Zepto。
-
设计Zepto的目的？
提供jQuery类似的API，但不是全部覆盖JQuery。Zepto设计的目的是有一个5-10K的通用库，有一个熟悉通用的API，所以你能把主要的精力放在应用开发上。
-
Zepto的应用特点？
Zepto的库是模块化【就是某一类型的功能对应一个库】的，如果你想要引用某一类型的库函数，你需要在文件的开头引入对应的模块化文件。
-
Zepto的缺陷
Zepto的缺陷：因为不同类型的库函数需要引入不同的模块化文件，这大大增加了服务器的响应的压力，为了解决这一问题，Zepto提供了一种叫做定制的方法，就是把需要的模块化文件放入同一个文件中，引入这个共同的文件即可。
-
介绍fastclick.js（可略过）
在移动端设备上为了提升click的响应速度，选择用Zepto事件封装的tap来进行模拟，但是会带来点透的副作用（即Zepto的Tap事件会发生点透事件）
点透：如下图所示，即点A部分，这个点击会透到B，B的点击也发生了，这种现象叫做点透。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jrlcf5Ah-1598784768414)(C:\Users\cohhe\AppData\Roaming\Typora\typora-user-images\1573384994013.png)]
解决方法：fastclick.js可以解决这个问题。首先引入js文件，然后使用fastclick中的tap方法。
-
一些插件的介绍。
- iscroll
- swipe
- swiper
移动端web第四天（重要）
-
响应式开发
-
网页布局方式
-
固定宽度布局：为网页设置一个固定的宽度，通常以px做长度单位，这种布局方式常常用于pc端网页。（到那时现在移动端占据的市场份额达到了85%）。
-
流式布局：为网页设置一个相对宽度，通常以百分比作为长度单位（简单来说，就是用百分比来代替固定宽度）。
-
栅格化布局：将网页宽度认为的划分为均等的长度，然后排版布局时以这些均等的长度作为度量单位，常利用百分比作为长度单位来划分成均等的长度。（比如16等分，长度单位为1/16）；
-
响应式布局：通过检测设备信息，决定网页的布局方式，即用户如果采用不同的设备访问同一个网页，有可能看到不一样的内容。一般情况下时检测设备屏幕的宽度来实现。
注意：以上的几种布局方式不是单独存在的，实际上开发过程中往往是相互结合的。
-
-
响应式布局
Responsive design，目的是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U0K19YW7-1598784768416)(C:\Users\cohhe\AppData\Roaming\Typora\typora-user-images\1573389731795.png)]
优点：用户的体验大大的提升了。
缺点：查询了许多冗余的代码，使得整个网页的体积变大，给移动设备带来了许多严重性能问题。
使用地方：企业官网，博客等。
-
响应式开发的原理：媒体查询
-
查询媒介：查询到当前屏幕的宽度，针对不同的屏幕宽度设置不同的样式来适应不同的屏幕。
你可以设置不同屏幕下面的不同样式，达到适配不同屏幕的目的。
-
实现方式：通过查询screen的宽度，来指定某个宽度区间的网页布局
超小屏幕 （移动设备） === > w<768px
小屏设备 769~992px === > 768px<=w<992
中等屏幕 992~1200px ====> w>1200
-
媒体查询的基本实现方式：常用属性设置
-
css语法
-
media mediatype(媒体类型) and | not | only （media feature【判断条件】）
-
也可以针对不同的媒体使用不同的stylesheet
-
-
mediatype【媒体类型】
all 用于所有设备
print 用于打印机或者打印预览
screen 用于电脑屏幕，平板电脑，智能手机
speech 用于屏幕阅读器等发生设备
-
媒体功能（media feature）
max || min-device-width：最大或最小设备物理宽度
max-width：最大视口宽度
min-width：最小视口宽度
-
min-width于min-device-width的区别
min-width：描述的时视口的大小，当缩放浏览器时，会发生改变
min-device-width：描述的时设备屏幕的大小，即使缩放浏览器也不会发生改变。
-
向上兼容和向下覆盖【重要】，掌握其中一个就行
向上兼容：如果设置了宽度最小时得样式，默认这些样式也会传递到宽度更大的条件范围内。
向下覆盖：宽度更大的样式会将前面更小的样式覆盖。
**经验：**1.如果判断最小值时，从小到大写（1.min-width:768px,2.min-width:992px,3.min-width:1200px）
2.如果判断最大值时，从大往小写（1.max-width:1200px,2.max-width:992px,3.max-width:768px)
-
例子：媒体查询来设置不同屏幕宽度下的样式
需求：
默认情况下body背景颜色是red
w<768 green;
w:768~992 blue；
w：992~1200 pink；
w>1200 purple;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=description content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> </head> <style> body{ background-color: red; } @media screen and (min-width:768px){ body{ background-color: blue; } } @media screen and (min-width:992px){ body{ background-color: pink; } } @media screen and (min-width:1200px){ body{ background-color: purple; } } </style> <body> </body> </html>
-
-
-
移动端web第五天（重要）
-
CSS框架
前端框架：在大量的开发过程中，许多功能模块非常相似，如轮播图，分页选项卡，导航栏等。开发中往往把这些具有通用性的功能模块进行一系列的封装，是成为一个组件应用到项目中，可以极大的节约开发成本。将这些通用的组件缩合到一起，就形成了前端框架。
常用的前端框架
- Bootstrap（重要）
- Amaze UI（重要）
- Framework7
-
Bootstrap框架
-
Bootstrap的模板文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html> -
Bootstrap提供的一套栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列（想当于12等分）。超过12等分的换行显示。
-
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
-
“行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中 -
通过“行（row）”在水平方向创建一组“列（column）”。
-
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素
-
类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局-
bootstrap对不同屏幕有不同的语义化称呼和划分。（具有向上兼容和向下覆盖的特点）
w<768 12等分 xs
768<w<992 6等分 sm
992<w<1200 4等分 md
w>1200 3等分 lg
-
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="../lib/Bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <style> div{ background-color: pink; } </style> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-1">1</div> <div class="col-xs-1">2</div> <div class="col-xs-1">3</div> <div class="col-xs-1">4</div> <div class="col-xs-1">5</div> <div class="col-xs-1">6</div> <div class="col-xs-1">7</div> <div class="col-xs-1">8</div> <div class="col-xs-1">9</div> <div class="col-xs-1">10</div> <div class="col-xs-2">11</div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="../lib/jQuery/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="../lib/Bootstrap/js/bootstrap.min.js"></script> </body> </html> -
-
栅格系统提供的其他几个预定义类
- offset：偏移 col-xs-offset-2，偏移是以栅格作为单位，但是这中偏移会影响后面的元素，有可能造成后面的元素换行显示。
- push：右推 col-xs-push-2，通过定位来实现的，所以不会影响其他元素，但是有可能和其他元素重叠
- pull： 左推 col-xs-pull-2，通过定位来实现的，所以不会影响其他元素，但是有可能和其他元素重叠
-
列嵌套
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的
.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。【就是在某一个单元在进行栅格系统的划分】<div class="container"> <div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> //在占据9等分的这个单元中继续进行栅格等分。这个栅格划分不需要在外层包裹.container <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> </div>注意：
- 如果在嵌套的栅格划分没有在外层包含.container，那么嵌套的列的宽度就是参照当前栅格。
- 如果在外层添加了.container，那么参照的就是核心样式文件所这只的容器宽度
-
。heidden-xs/sm/md/lg 【隐藏显示内容，值得注意的是，这个hidden没有向上兼容和向下覆盖的特性】
<div class="col-xs-1 hidden-sm"></div>
-
-
Less：预编译（很简单，会使用即可）
Node.js的学习
node .js学习的第一天
-
浏览器组成部分
- 人机交互部分：即可视化界面
- 网络请求部分（Socket）：基本上所有的语言都有这个功能
- JavaScript引擎部分：解析Javascript语句
- 渲染引擎部分：渲染css和html5等
- 数据存储部分：cookie，HTML5中的本地存储LocalStorage，sessionStorage。
-
渲染引擎工作原理
- 解析HTML，构建DOM树 == >【包含所有元素的树】
- 构建”渲染树“，渲染树不等于DOM树，渲染树删除了不需要显示的元素，如head，display：none这样的元素。
- 对渲染树进行布局 == >【定位元素的坐标、大小、position、z-index等，这些属性】
- 绘制渲染树 === > 【调用os系统底层API，进行绘图操作】[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7E3JniE6-1598784768418)(C:\Users\cohhe\AppData\Roaming\Typora\typora-user-images\1574135761151.png)]
-
http访问服务器过程
- 在浏览器上输入网址
- 浏览器通过用户在地址栏输入的URL构建Http请求报文
- 浏览器发起DNS解析，将域名转化为IP地址
- 浏览器将报文发送给服务器
- 服务器接收到请求报文并解析
- 服务器处理用户请求，并将处理结果封装成响应报文
- 服务器将HTTP响应报文发送给浏览器
- 浏览器接收响应HTTP报文并解析
- 浏览器解析HTML页面，在解析HTML页面时遇到新的资源再次发起请求
- 最终浏览器展示页面
-
http响应报文头
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hZTw838P-1598784768419)(C:\Users\cohhe\AppData\Roaming\Typora\typora-user-images\1574138530859.png)]
-
web开发本质
牢记以下三点：
- 请求：客户端发起请求
- 处理：服务器处理请求
- 响应：服务器将处理结果发送给客户端
-
node.js介绍
- node.js是一个开发平台
- 该平台使用的语言是JavaScript
- node.js平台是基于谷歌JavaScript引擎构建的
- node.js可以控制台程序（命令行程序，CLI程序，桌面应用程序（GUI），web应用程序（网站））
-
node.js有哪些特点？
- 事件驱动 ==== >当事件被触发时，执行传递过去的回调函数
- 非阻塞I/O模型 ==== > 当执行I/O操作时，不会阻塞进程
- 单线程
- 拥有世界上最大的开源库生态系统-----npm
-
node.js开发与php、Java、ASP.net等传统模式开发web应用程序的区别
- 传统模式：有web服务器
- node.js：node.js自己就是服务器
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eMis3rBV-1598784768421)(C:\Users\cohhe\AppData\Roaming\Typora\typora-user-images\1574140057991.png)]
node.js学习的第二天【重要：node.js使用的模块】
-
fs模块：文件操作模块。
-
往文件中写入数据（文件写入数据只能是Buffer类型或者字符串类型）
var fs=require("fs"); // fs.writeFile("文件路径","写入的数据",回调函数)； fs.writeFile("./hello.txt","你好"，function(err){//注意：在回调函数中第一个参数时err，始终放在第一位。 if(err){ throw err; }else{ console.log("写入ok")； } }) -
读取文件中的数据
var fs=require("fs"); // fs.readFile("文件路径","读取文件格式",回调函数)； fs.readFile("./hello.txt","uft8"，function(err,data){ if(err){ throw err; }else{ console.log("读取数据ok"+data)； } }) -
创建目录【即创建文件夹】
var fs=require("fs"); // fs.mkdir("文件名"，回调函数)； fs.mkdir("mk-test",function(err){ if(err){ throw err; }else{ console.log("创建成功")； } }) -
error-first介绍（错误优先）
即在回调函数中，第一个参数时err，始终放在第一位。
-
几个注意的点：
- 在读写文件时，./相对路劲，此时的相对路径是执行node.js命令的路径，而不是相对于正在执行的本js文件
- 读取文件中要设置读取文件格式。如果不设置，自动的
- 写文件时写入的数据只能时字符串类型或者Buffer类型
-
-
__ dirname和 __ filename
- __ dirname:表示当前正在执行的js文件所在的目录
- __ filename:表示当前正在执行的js文件的完整路径 ==== > __ dirname +js文件名
- 注意：__ dirname 和 __ filename 是本地的，因此不需要通过require()获取，可以直接使用。
-
path模块（字符串的拼接，主要适用于路径的拼接，优点是不需要考虑OS系统的兼容性）
-
var path=require("path"); // path.join("string1","string2",......) var fs=require("fs"); // fs.writeFile("文件路径","写入的数据",回调函数)； fs.writeFile(path.join(__dirname,"hello.txt"),"你好"，function(err){//注意：在回调函数中第一个参数时err，始终放在第一位。 if(err){ throw err; }else{ console.log("写入ok")； } })
-
-
http模块【重要：作用是相当于搭建一个web服务器】
-
简单的web服务器
var http=require("http"); var server=http.createServer(); server.on("request",function(req,res) { res.write("中国"); res.end(); }) server.listen(8080,function() { console.log("服务器启动了，请访问http://localhost:8080"); }) 以上可以简写： var http=require("http"); http.createServer(function(req,res){ res.end("中国"); }).listen(8080,function(){ console.log("服务器已经启动，请访问http://localhost:8080") }) -
在回调函数中的两个参数：req ，res
-
request：服务器解析用户提交的http请求报文，将结果解析到request对象中，凡是要获取和用户请求相关的数据都可以通过request对象来获取
- request对象常用的成员
- request.headers：请求报文头，返回的是一个对象
- request.rawHeaders：请求报文头，返回的是一个数组
- request.httpVersion：客户端http使用的版本
- request.url：请求地址路径，不包含主机名、协议和端口。【重要】**
- request.method：获取客户端请求使用的方法，一般有两种:post和get。【重要】
- request对象常用的成员
-
response：是服务器用来向用户做出响应的对象，凡是需要向用户（客户端）响应的操作，都需要通过response对象来操作。
-
response对象常用的成员
-
response.write(data)：向客户端写入数据
-
response.end()：结束响应，响应的数据必须是string类型和Buffer类型。就我个人理解。response.end(data),这样写可以代替response.write(data)。一样都是传递数据。
且response.end()必须有，否则客户端永远不知道这次响应是否结束了。【重要】
-
response.setHeader(“content-type” , “类型”)：设置响应报文头，作用是 设置资源类型【重要】
-
response.statusCode ：设置http响应状态码
-
response.statusMessage : 设置响应状态码对应的消息
-
response.writeHead() : 直接向客户端写入http响应报文头。
res.writeHead("200","ok",{"content-type":"text/plain; charset=utf-8"})
-
-
-
-
-
MIME模块【获取不同资源的类型】
通常是根据请求路径名的文件后缀判断。注意：当在res.setHeader(“content-type”：mime.getType(req.url))时，在读取数据时就不用设置读取数据格式了。
// mime.getType(req.url) var fs=require("fs"); var path=require("path"); var http=require("http"); var mime=require("mime"); http.createServer(function(req,res){ var publicDir=path.join(__dirname,"public"); var filename=path.join(publicDir,req.url); // 先判断一下文件类型是否是图片类型 if(mime.getType(filename).indexOf("image")!=-1){ fs.readFile(filename,function (err,data) { if(err){ throw err; }else{ res.setHeader("content-type",mime.getType(filename)); res.end(data); } }) }else { fs.readFile(filename,function (err,data) { if(err){ throw err; }else { console.log(filename); res.setHeader("content-type",mime.getType(filename)); res.end(data); } }) } }).listen(8080,function () { console.log("http://localhost:8080"); }) -
url模块【将get提交的数据解析，方便使用】 【重要：get提交的数据就是时候就是对象的形式】
-
.一个完整的url地址，基本格式如下：
https://host:port/path?xxx=aaa&ooo=bbb
–http/https：这个是协议类型
–host:服务器的IP地址或者域名
–port:HTTP服务器的默认端口是80，这种情况下端口号可以省略。
如果使用了别的端口，必须指明，例如：192.168.3.111:8080，这里的8080就是端口
–path:访问资源的路径
–？:url里面的？这个符号是个分割线，用来区分问号前面的是path，问号后面的是参数
–url-params:问号后面的是请求参数，格式：xxx=aaa，如图4区域就是请求参数
–&：多个参数用&符号连接
var url=require("url"); var urlobj=url.parse(req.url,true);//将get提交的数据解析为一个JSON对象 // 一般有用的数据在这个对象的query属性中 // urlobj.query -
-
queryString模块【将post提交的数据解析，方便使用】 【重要：post提交的时候是一个查询字符串的形式，需要解析为JSON格式】
var queyrString=require("queryString"); var array = []; req.on("data", function(chunk) { //chunk是传输过来的数据，buffer类型 array.push(chunk); }); req.on("end", function() { var postBody = Buffer.concat(array);//拼接为一个Buffer对象 postBody = postBody.toString("utf8");//转化为utf8格式，查询字符串的形式 postBody = queryString.parse(postBody);//解析为JSON对象 }) -
JSON数据类型和Buffer数据类型
-
JSON：JSON 通常用于与服务端交换数据。
-
JSON格式：{ “firstName”:“John” , “lastName”:“Doe” }
-
JSON数组格式：[{ “firstName”:“John” , “lastName”:“Doe” },{ “firstName”:“haha” , “lastName”:“DOG” } ]
-
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JSON 对象转换为字符串。
JSON.stringify(value) // value必需，value一般时JSON对象或这数组JSON对象 -
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JSON 对象。
JSON.parse(text) // text:必需，text是一个有效的 JSON 字符串或者是一个有效的字符串形式的JSON 数组
-
-
Buffer:用来创建一个专门存放二进制数据的缓存区。
-
Buffer格式：<Buffer 66 6e 69 64 3d 54 65 45 6e 38 61 38 44 4d 6b 4c 53 70 72>。Buffer对象在我看来是类似于一个二进制数组。
-
Buffer数组格式：[ <Buffer 66 6e 69 64 3d 54 65 45 6e 38 61 38 44>,< Buffer 4d 6b 4c 53 70 72 4b 41 56 66 66 7a 4d 35 26 66 6e 6f 70>,<Buffer 3d 73 75 62 6d 69 74 2d 70 61 67 65 26 74 69 74 6c 65>,<Buffer … > ]
-
Buffer数组的拼接（Buffer.concat(list[, totalLength])）：是多个Buffer对象拼接为一个Buffer对象。
Buffer.concat(list[, totalLength]) //list是Buffer数组格式 -
转变Buffer编码：Buffer.toString([encoding[, start[, end]]])
postBody.toString("utf8") // post是存储的Buffer数组，转为了uft8编码格式
-
-
node.js学习第三天
-
require（）加载模块机制
- 模块分类
- 核心模块
- fs
- http
- path
- url
- 、、、
- 文件模块（按文件后缀名分）
- .js
- .json
- .node
- 自定义第三方模块
- mime
- cheerio
- moment
- mongo
- 、、、
- 核心模块
- 模块加载顺序
- require（）的参数是一个路径：require（"./index.js"）
- 直接寻找index.js文件
- require（）的参数是一个文件名：require（"/index"）
- 首先于后缀.json 、.js 、.node 进行匹配，如果成功，则加载。失败，则下一步。
- 查询index目录，如有，则查找package.json的入口文件main（app.js文件），成功则加载，失败则下一步
- 在app.js查找失败，则查找index.js、index.json、index.node文件。
- require（）的参数是一个模块名称
- 首先会取当前js文件所在目录下去找node_module文件夹。如果有，则进入node_module文件夹下寻找该模块。如果没有。则下一步。
- 在当前js文件夹上级目录寻找node_module文件夹，依次，知道找到node_module文件夹为止。
- require（）的参数是一个路径：require（"./index.js"）
- 模块分类
-
require加载模块注意的点
- 所有的模块第一次加载完毕后，都会有缓存，之后的二次加载都是直接读取缓存的
- 每次加载模块都是先从缓存中加载，没有才会按照node.js加载模块规则取查找。
- 核心模块在node.js源码编译时，已经被编译为二进制文件，所以比较快速。
- 核心模块都保存在lib文件夹中
- 试图加载一个和核心模块相同的自定义模块是不可能成功的。自定义模块要么不要与核心模块重名，要么使用路径的方式加载。
- 核心模块只能通过模块名称来加载。错误示例：require（”./http“）。
- require（）加载模块时使用相对路径是相对与当前js文件，不受node执行命令影响。
- 建议加载文件模块时始终添加文件后缀名，不要省略。
-
require函数加载模块原理
被加载的模块会先执行一遍
-
module.exports
作用时向外暴露变量，默认情况下暴露的时一个空对象。
-
模块化的思路和原因
- 模块化的原因：
- 便于多人协作开发
- 后期代码的维护
- 模块化思路
- 模块一（服务模块）：负责启动服务
- 模块二（扩展模块）：负责扩展 req 和 res 对象，封装一些好用的API
- 模块三（路由模块）：负责路由判断（路由：请求方法+请求路径）
- 模块四（业务模块）：负责处理具体路由的业务代码模块五（数据操作模块）：负责进行数据库操作
- 模块六（配置模块）：负责各个模块中用到的配置信息
-
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JSON 对象转换为字符串。
JSON.stringify(value) // value必需，value一般时JSON对象或这数组JSON对象-
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JSON 对象。
JSON.parse(text) // text:必需，text是一个有效的 JSON 字符串或者是一个有效的字符串形式的JSON 数组
-
-
Buffer:用来创建一个专门存放二进制数据的缓存区。
-
Buffer格式：<Buffer 66 6e 69 64 3d 54 65 45 6e 38 61 38 44 4d 6b 4c 53 70 72>。Buffer对象在我看来是类似于一个二进制数组。
-
Buffer数组格式：[ <Buffer 66 6e 69 64 3d 54 65 45 6e 38 61 38 44>,< Buffer 4d 6b 4c 53 70 72 4b 41 56 66 66 7a 4d 35 26 66 6e 6f 70>,<Buffer 3d 73 75 62 6d 69 74 2d 70 61 67 65 26 74 69 74 6c 65>,<Buffer … > ]
-
Buffer数组的拼接（Buffer.concat(list[, totalLength])）：是多个Buffer对象拼接为一个Buffer对象。
Buffer.concat(list[, totalLength]) //list是Buffer数组格式 -
转变Buffer编码：Buffer.toString([encoding[, start[, end]]])
postBody.toString("utf8") // post是存储的Buffer数组，转为了uft8编码格式
-
- 模块化的原因：
node.js学习第三天
-
require（）加载模块机制
- 模块分类
- 核心模块
- fs
- http
- path
- url
- 、、、
- 文件模块（按文件后缀名分）
- .js
- .json
- .node
- 自定义第三方模块
- mime
- cheerio
- moment
- mongo
- 、、、
- 核心模块
- 模块加载顺序
- require（）的参数是一个路径：require（"./index.js"）
- 直接寻找index.js文件
- require（）的参数是一个文件名：require（"/index"）
- 首先于后缀.json 、.js 、.node 进行匹配，如果成功，则加载。失败，则下一步。
- 查询index目录，如有，则查找package.json的入口文件main（app.js文件），成功则加载，失败则下一步
- 在app.js查找失败，则查找index.js、index.json、index.node文件。
- require（）的参数是一个模块名称
- 首先会取当前js文件所在目录下去找node_module文件夹。如果有，则进入node_module文件夹下寻找该模块。如果没有。则下一步。
- 在当前js文件夹上级目录寻找node_module文件夹，依次，知道找到node_module文件夹为止。
- require（）的参数是一个路径：require（"./index.js"）
- 模块分类
-
require加载模块注意的点
- 所有的模块第一次加载完毕后，都会有缓存，之后的二次加载都是直接读取缓存的
- 每次加载模块都是先从缓存中加载，没有才会按照node.js加载模块规则取查找。
- 核心模块在node.js源码编译时，已经被编译为二进制文件，所以比较快速。
- 核心模块都保存在lib文件夹中
- 试图加载一个和核心模块相同的自定义模块是不可能成功的。自定义模块要么不要与核心模块重名，要么使用路径的方式加载。
- 核心模块只能通过模块名称来加载。错误示例：require（”./http“）。
- require（）加载模块时使用相对路径是相对与当前js文件，不受node执行命令影响。
- 建议加载文件模块时始终添加文件后缀名，不要省略。
-
require函数加载模块原理
被加载的模块会先执行一遍
-
module.exports
作用时向外暴露变量，默认情况下暴露的时一个空对象。
-
模块化的思路和原因
- 模块化的原因：
- 便于多人协作开发
- 后期代码的维护
- 模块化思路
- 模块一（服务模块）：负责启动服务
- 模块二（扩展模块）：负责扩展 req 和 res 对象，封装一些好用的API
- 模块三（路由模块）：负责路由判断（路由：请求方法+请求路径）
- 模块四（业务模块）：负责处理具体路由的业务代码模块五（数据操作模块）：负责进行数据库操作
- 模块六（配置模块）：负责各个模块中用到的配置信息
- 模块化的原因：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
