前端知识小结
请写出一个符合 W3C 规范的 HTML 文件要求
页面标题为「我的页面」
页面中引入了一个外部 CSS 文件，文件路径为 /style.css
页面中引入了另一个外部 CSS 文件，路径为
/print.css，该文件仅在打印时生效
页面中引入了另一个外部 CSS 文件，路径为
/mobile.css，该文件仅在设备宽度小于 500 像素时生效
页面中引入了一个外部 JS 文件，路径为 /main.js
页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意注意题目中的路径
123456789101112131415161718192021222324<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的页面</title> <link rel="stylesheet" href=" ...
自己写一个简版jQuery
为了便于学习与理解jQuery，自己尝试去写一个只有两个API的简版jQuery。
什么是JQueryjQuery是js的一个工具库，由John Resig在2006年发布。
j代表JavaScript，query是“查询”的意思。也就是说，这个库的意图是基于JavaScript的查询。
查询的目标是什么？
答案是DOM（文档对象模型）结构中的Node（节点）。一个网页就是一个html文档，而网页上的所有内容都是节点，包括文档节点、元素节点、文本节点、注释节点、属性节点等等。而jQuery的查询最主要针对的是元素节点，如段落（p）、锚点（a）、表格（table）等，只有少数方法可以处理文本节点与注释节点。同时jQuery还可以用attr方法方便地对元素节点的属性进行读取/设置。
jQuery的核心是通过各种选择器，选中DOM元素
节点或者选择器判断由于jQuery支持传参字符串，所以先判断参数
12345678910111213141516window.jQuery = function(nodeOrSelector) { let nodes = {} ...
JS函数的五种声明方式
具名函数1function f(x,y){return x +y }
关键字+函数名+参数+{}function 和var意思差不多，表示声明一个特殊的变量（对象）
匿名函数1f = function(x,y){return x +y }
给变量赋值一个具名函数1f = function n(x,y){return x +y }
函数n的作用域只限函数内，和具名函数不同，体现了JS的不一致性，不建议使用。
函数对象1window.Fuction函数对象
1new Fuction ('x','y','return x + y ')
123456var n = 1new Fuction ('x','y','return x' +n+ 'return y ')f(1,2)//4//等同于//new Fuction ('x','y','r ...
JS的数组与伪数组的区别
在JavaScript中，除了6种原始数据类型之外，其他所有的都是对象，包括函数（Function）。
基本数据类型：String,boolean,Number,Undefined, Null,Symbol
引用数据类型：Object(Array,Date,RegExp,Function)
在这个前提下，咱们再来讨论JavaScript的对象。
创建对象12var obj = {}; //种方式创建对象，被称之为对象直接量（Object Literal）var obj = new Object(); // 创建一个空对象，和{}一样
创建数组12var arr = [];//这是使用数组直接量（Array Literal）创建数组var arr = new Array();//构造函数Array() 创建数组对象
对象与数组的关系在说区别之前，需要先提到另外一个知识，就是JavaScript的原型继承。所有JavaScript的内置构造函数都是继承自 Object.prototype。在这个前提下，可以理解为使用 new Array() ...
常见DOM以及API总结
DOMDOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。
Node 接口Node.prototype.nodeTypenodeType属性返回一个整数值，表示节点的类型。
1document.nodeType // 9
上面代码中，文档节点的类型值为9。
Node 对象定义了几个常量 ...
原型与原型链
再讲原型与原型链的前提下先讲些概念方便理解
对象是什么面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。
每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。对象可以复用，通过继承机制还可以定制。因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。
那么，“对象”（object）到底是什么？我们从两个层次来理解。
（1）对象是单个实物的抽象。
一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。
（2）对象是一个容器，封装了属性（property）和方法（method）。
属性是对象的状态，方法是对象的行为（完成某种任 ...
JS数组API运用相关代码总结
自己总结代码题1.使得 students 按分数的高低从大到小排列
1var students = ['小明','小红','小花'] var scores = { 小明: 59, 小红: 99, 小花: 80 } students.sort(???)
请填写 ??? 使得 students 按分数的高低从大到小排列
123function ( x , y ) { return scores[y]-scores[x] }
2.
12var a = [1,2,3,4,5,6,7,8,9]a.filter(???).map(???) // [4,16,36,64]
获取所有偶数
得到所有偶数的平方
12345a.filter( function ( value , key ) { return value % 2 === 0 }).map ( function ( value ) { return value * valu ...
JS里的数据类型转换
类型转换本文分别讲下数据类型之间的相互转换
转换为string1.
1数据类型.toString
数据类型
string
number
toString
boolean
toString
symbol
不研究
null
报错
undefined
报错
object
toString
2.
12数据类型 + '''' + 数据类型
3.
1window.String(/*数据类型*/)
转换为boolean
1Boolean(/*数据类型*/)
因为!表示取反!!表示负负得正
1!!/*数据类型*/
5个falsy值
数字里只有0 NaN false
string中只有空字符串’’是false
null 和undefined 只有一个值，就是false
obiect 都是true,object包括数组和函数所以他们俩也是true
falsy参考链接
转换为number1'1'-->1
1Number('1')===1
1parseInt(&# ...
JS里的数据类型
JS里的7种数据类型JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 新增的第七种 Symbol 类型的值，不描述。）
数值（number）：整数和小数（比如1和3.14）
字符串（string）：文本（比如Hello World）。
布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）
undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
null：表示空值，即此处的值为空。
对象（object）：各种值组成的集合。
Symbol（符号）：https://developer.mozilla.org/zh-CN/docs/Glossary/Symbol
string 表示可以用
12' '//空字符串" "//空字符串
转义符号为\
123456var a = "'"//单引号var a = '"'//双引号var a = '\'&#x ...
CSS布局
CSS布局float 布局float 布局应该是目前各大网站用的最多的一种布局方式了，但是也特别复杂，这里详细讲一下
首先，什么是浮动？
浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。
那么它有什么特点呢
对自身的影响
float 元素可以形成块，如 span元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
浮动元素的位置尽量靠上
尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉
对兄弟元素的影响
不影响其他块级元素的位置
影响其他块级元素的文本
上面贴非 float 元素
旁边贴 float 元素或者边框
对父级元素的影响
从布局上 “消失”
高度塌陷
如果有以下html结构，设置左右两栏布局
1234<div class="parent"> <div class="leftChild"></div> <div class ...
