作者 | Jeskson来源 | 达达前端小酒馆

问：你知道在css中，html的标签元素分多少中不同的类型吗？

答：大体可分三种：1，块状元素，2，内联元素，3，内联块状元素

块级元素：就是每个块级元素都是从新的一行开始的，并且后面的元素也是另起一行的。

元素的高度，宽度，行高，顶和底边距是可以设置的。

元素宽度在不设置的情况，它的本身父容器是100%。

<div>

<p>

<h1>~<h6>

<ol>

<ul>

<dl>

<address>

<blockquote>

<form>

行内元素：就是和其他的元素都在同一行上。

元素的高度，宽度，行高，顶部和底部边距不可以设置。

元素的宽度就是它包含的图片，文字的宽度，不可改变。

<a><span><br/><i><em><strong><label><q>

行内块状元素：就是和其他元素都在一行上。

元素的高度，宽度，行高顶部和底部边距都是可以设置的。

<img><input><select><textarea><button><iframe>

元素转换：

display: block将元素转换为块级元素

display: inline将元素转换为行级元素

display: inline-block将元素转换为内联元素

display: none将元素隐藏

描边border

border: 2px solid #000;

线条样式：

dashed:虚线

dotted:点线

solid:实线

下描边：border-bottom: 1px solid red;

上描边：border-top: 1px solid red;

右描边：border-right: 1px solid red;

左描边;border-left: 1px solid red;

间距：margin

div { margin: 10px 10px 20px 20px;}

元素与其他元素之间的间距：分上，右，下，左。

当margin给一个值的时候，指四个方向。当margin给二个值的时候，指的是上下 左右

当margin给三个值的时候，指 上 左右 下当margin给四个值的时候，指上，右，下，左

padding:内边距，同理，上右下左。

浮动float，就是让元素脱离文档普通流，浮动在普通流之上。

浮动元素，根据它设置的浮动方向向左或者向右，直到浮动元素的外边缘遇到包含框，或是另一个浮动元素为止，可以让文本和内联元素环绕它的。

那么浮动元素会带来什么影响：->重点：

一般使用浮动后都要清除，否则后面的元素可能会出现问题。清除浮动并不是指让元素自身没有浮动效果，而是消除元素浮动对其他元素的影响。

解决高度塌陷

父元素在文档流中会默认被子元素撑开 如果此时给子元素添加浮动效果 子元素就会脱离文档流 从而造成父元素的高度塌陷 此时页面便会混乱 如果给父元素设置高宽便会使父元素锁死 不能随子元素变化随意撑开 会有子元素溢出情况

clear清除浮动：

none，不清除；left，不允许左边有浮动对象；right，不允许右边有浮动，both，不允许两边有浮动对象。

利用伪类实现清除浮动：

.clearbox {

 content="";

 display:block;

 width:0;

 height:0;

 clear:both;

}

定位positon

定位：绝对定位，相对定位

position:absolute;绝对定位(默认，相对于body元素，相对于浏览器窗口)

div {

 width: 200px;

 height: 200px;

 border: 2px red solid;

 position: absolute;

 left: 100px;

 top: 100px;

}

position: relative;相对定位：设置相对定位，需要设置positon:relative相对定位。

.box {

 width: 100px;

 height: 100px;

 border: 2px solid red;

 position: relative;

 left: 100px;

 top: 100px;

}

固定定位：fixed，相对于页面窗口，固定定位的元素会始终在位于浏览器窗口内视图的某个位置，不会受到文档流影响。

标签：

class,id,style,src,herf,title,alt,name,value
<em></em>

<strong></strong>

<span></span>

<i></i>

<b></b>

<ul></ul>

<li></li>

<ol></ol>

<dl></dl>

<dt></dt>

<dd></dd>

<img/>

<hr/>

<video></video>

<audio></audio>

<input></input>

<select></select>

<option></option>

<textarea></textarea>

<table></table>

<tr></tr>

<th></th>

<td></td>

<style></style>

<link/>

<div></div>

<p></p>

<h1></h1>

<p></p>
<ul>

 <li></li>

</ul>

<ol>

 <li></li>

</ol>

<dl>

 <dt></dt>

  <td></td>

</dl>

<select>

 <opation></opation>

</select>

浏览器的默认值：

IE页边距默认：10px

FF页边距默认为：8px

清除页边距：

body{

 margin: 0;

 padding: 0;

}

段间距：

IE默认值为19px，FF默认值为1.12em

清除段间距：

p {

 margin-top: 0;

 margin-bottom: 0;

}

各大浏览器默认字体的大小为16px，等于medium。

列表样式，IE默认为40px（margin属性设置），FF默认为40px（padding属性设置）。

dl无缩进，元素dd默认缩进40px

清除列表样式：

ul,ol,dd {

 list-style-tyle: none;

 margin-left: 0;

 padding-left: 0;

}

元素居中，IE默认为text-align: center，FF默认为margin-left: auto; margin-right: auto;

超链接默认带有下划线，颜色蓝色，被访问过的链接为紫色。

清除链接样式：

a {

 text-decoration: none;

 color: #000;

}

鼠标样式：IE默认为 cursor: hand; FF默认为 cursor: pointer。

h5的优势：

解决跨浏览器，跨平台问题，增强了web的应用程序

h5新元素：

header 用于定义文档或是节的页眉

footer 用于定义文档或是节的页脚

article 用于定义文档内的文章

section 用于定义文档中的一个区域

aside 用于定义当前页面或是当前文章的内容几乎无关的附属信息

figure 用于定义一段独立的引用

figcaption 用于表示是与其相关联的引用的说明/标题

hgroup 用于对多个

~

元素进行组合

nav 用于定义页面上的导航链接部分

mark 用于定义高亮文本

time 用于显示被标注的内容是日期或是时间

meter用于表示一个已知最大值和最小值的计数器

progress 用于表示一个进度条

audio 定义音频

video 定义视频

注意：section元素强调分段或是分块，而article元素强调独立性。

hidden元素为true时显示，为false时隐藏。

display设置css时，hidden=‘true’相当于dispaly: none。

contentEditable 属性规定元素内容是否可编辑。

表单output

output元素用于表示计算或是用户操作的结果。

表单相关元素和属性：

output元素用来表示计算或是用户操作的结果。

<!DOCTYPE html>

<html>

<head>

 <meta charset = "utf-8">

 <title>h5的output</title>

</head>

<body>

 <form action="" method="get" oninput="x.value=parseInt(a.value)">

 0 <input type="range" id="a" value="50"> 100 <br/>

 <output name="x" for="a"> 50 </output>

 </form>

</body>

</html>

input的type类型：

url生成一个url输入框

tel生成一个只能输入电话号码的文本框

search生成一个专门用于输入搜索关键字的文本框

range生成一个拖动条，通过拖动条

color用来创建一个用户使用的颜色选择器

time生成第一个时间选择器

datetime生成一个UTC的日期时间选择器

datetime-local生成一个本地化的日期时间选择器

date显示一个日期输入区域，可同时使用日期选择器，结果值包括年，月，日，不包括时间

month生成一个月份选择器

week生成一个选择的几周的选择器

email生成一个E-mail输入框

number生成一个只能输入数字的输入框

input属性：

placeholder简短的提示信息

autocomplete快速输入，一般浏览器提供了自动补全的功能选择

autofocus当浏览器打开这个页面时，这个表单控件会自动获取焦点

list为文本框指定一个可用的选项列表，当用户在文本框中输入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择

pattern用于验证表单输入的内容

novalidate当提交表单的时候不会其进行验证

required必需在提交之前填写的字段

spellcheck拼写检查，为input，textarea等元素新增属性

formenctype规定在发送到服务器之前应该如何对表单数据进行编码

formtarget带有两个提交按钮的表单，会提交到不同的目标窗口

multiple一次上传多个文件

maxlength用于规定文本区域的最大字符数

wrap是否包含换号符

css选择器：

兄弟选择器属性选择器伪类选择器伪元素选择器

属性：background-clip设置背景覆盖范围

background-origin设置背景覆盖的起点

background-size设置背景的大小

text-overflow设置当文本溢出元素框时处理方式，属性值，clip/ellipsis

word-wrap规定单词换行方式，属性值，normal/break-word

word-break规定自动换行的方式，属性值，normal/break-all/keep-all

transform 3D函数：

rotateX:表示元素沿着x轴旋转

rotateY:表示元素沿着y轴旋转

rotateZ:表示元素沿着z轴旋转

transform-style:用来设置嵌套的子元素在3D空间中显示效果。它可以设置两个属性值。

css3的过渡属性

过渡的属性：transition-delay:设置过渡的延迟时间，transtion-duration:设置过渡的过渡时间，transition-timing-function:设置过渡的时间曲线，transition-property:设置哪条css使用过渡，transition:一条声明设置所有过渡属性。

css3的动画属性：

animation属性，属性包括：@keyframes：含义定义动画选择

animation-name:使用@keyframes定义的动画

animation-delay:设置动画的持续动画时间

animation-timing-function:设置动画的时间曲线

animation-iteration-count:设置动画播放次数

animation-direction:设置动画反向播放

animation-play-state:设置动画播放状态

transiton:一条声明设置所有动画属性

css3的新增单位：

px,em,rem,vh,vw,%

px为绝对单位，页面按精确像素展示em为相对单位，基准点为父节点字体的大小，em会根据父级元素的大小而变化，但是如果嵌套了多个元素，要去计算，很容易出错，就有了rem。

rem为相对单位，相对根节点html的字体大小来计算。

%百分比，相对长度单位，相对于父元素的百分比值。

vm,vh,vmin,vmax主要用于页面视口大小布局

vw:viewpoint width视窗宽度，lvm等于视窗宽度1%

vh:viewpoint height视窗高度，lvh等于视窗高度的1%

vmin:vw和vh中较小的那个。

vmax:vw和vh中较大的那个。

弹性盒子模型：

Box-model定义了一个元素的盒子模型

Flexbox

box-lines:设置或检索弹性盒子模型对象的子元素是否可以换行显示

box-direction设置或检索弹性盒子模型对象的子元素的排列顺序是否反转

box-ordinal-group设置或检索弹性盒子模型对象的子元素的显示顺序

JavaScript语言：

1995年，网景Netscape公司发明了LiveScript，后改名JavaScript

1997.06为ECMAScript1.0版1998.06为ECMAScript2.0版1999.12为ECMAScript3.0版2007.10为ECMAScript4.0版2009.12为ECMAScript5.0版

2015.06 ECMAScrip6版，ES6

JavaScript特点：

JavaScript代码可在内部，外部，和行内

<script src="main.js"></script>
alert('da'); // 系统弹窗

console.log(); // 输出在控制台

document.write(); // 打印在页面

document.getElementById().innerHTML = "da";

document.getElemnetById("box").style.color = "red";

关键字

break,else,new,var,case,

finally,return,void,catch,for,

switch,while,continue,function,this,with,

default,if,throw,delete,in,

try,do,instanceof,typeof

定义变量：（临时存储的容器）

变量，临时存储信息的容器，可以复用

var name;

name = 'da';

alert(name);

声明变量并同时赋值：

var a = 2;

console.log(a) // 2

var name = 'da';

var name = 'dada';

console.log(name); // da

变量名对大小写敏感

命名规范：使用下划线连接关键字，使用下划线开头，使用$符号开头，用小写字母，驼峰命名法，布尔值使用is开头。

数据类型：

字符串string数字number布尔值boolean未定义undefined

undefined有两种：

真没有定义为undefined定义了，但是没有赋值为undefined

注意：变量必须要有个明确的数据类型，否则是不规范的写法，值为undefined，变量的类型是可以变的。

var a='da';

alert(typeof a); // string

a = 1;

alert(typeof a); // number

对象object

Object是所有js对象的超类，基类，js中的所有对象都是继承自object对象的。

array数组对象定义数组的属性和方法

Number数字对象

boolean布尔对象Error错误对象处理程序的错误

function函数对象定义函数的属性和方法

Math数学对象，Date日期对象，RegExp对象正则表达式对象，String字符串对象，定义字符串属性和方法。

空nullnull表示一个空对象，什么都没有，表示无值通常用作一个空引用，或一个空对象，就像一个占位符

运算：算术运算符

强制转换：

字符串转数字：

parseInt()

parseFloat()

isNaN()

// 定义函数

function 函数名() {

 // 方法体-函数体

}

// 点击事件

onclick = "函数名()"

parseInt("123") -> 123 // 取整数parseFloat("2.3") ->保留小数 2.3isNaN用于判断是不是非数字，非数字返回true

数字转字符串toString()赋值运算,关系运算，逻辑运算

表达式为包含赋运算的语句，单独的元素就不叫表达式

问：“=”，“==”，“===”有什么区别？

=是赋值符号，是对变量所代表的内存的写的操作==忽略数据类型的判断，是否相等=== 数值和数据类型都要相等才判断是相等

三元运算：

三元运算符：（比较表达式）？结果1：结果2

隐式转换

console.log(2 3 "hello"); // 5hello

console.log("hello" 3 5); // hello35

程序运行的三大结构：顺序结构，选择结构，循环结构

顺序结构，代码逐行执行，自上而下

选择结构，通常是和关系比较一起用

单分支选择，if语句

双分支选择：if-else语句

多分支语句：if-else if-else语句

布尔值为false

false情况：

0,undefined,null,-0,NaN,""空字符串,false

switch使用情况，在匹配某个值相对不相等，而不是匹配某个范围的情况下。

while循环可以帮助我们重复去做一些事情，不知道具体执行的次数，使用最合适。

while(条件表达式){

 // 要重复执行的代码段-循环体

}

do-while

do-while是先执行循环体，再检测循环条件，do-while能保证循环体至少执行一次。

for循环过程

for(循环变量初始化；循环条件判断；循环变量的修改){

 循环体

}

循环变量初始化，循环条件判定，执行循环体，循环变量递增或是递减。

break和continue

break退出循环continue跳转本次循环，继续下一次循环

数组：array数组对象用于在单个的变量中存储多个值

数组，一次性申请一批存储空间，引用类型数组声明方式，可存放任意数据类型，并通过索引来访问每个元素

var arr = new Array();

var arr = [];

数组方法：

indexOf()来搜索一个指定的元素的位置，没有找到返回-1

concat()方法把当前的数组和另一个数组连接起来，返回一个新的数组

push()向数组的末尾添加若干元素，pop()把数组的最后一个元素删除掉

unshift()向数组前添加若干元素

shift()则把数组的第一个元素删除掉

slice()截取数组的部分元素，然后返回一个新的数组

sort()可以对当前数组排序

reverse()把整个数组的元素给掉个个，反转

join()方法把数组的每个元素用指定的字符串连接起来，返回新的字符串

splice()方法是修改数组的方法，可以从指定的索引开始删除若干元素，然后从位置添加，几个元素，可以只删除，不添加。

字符串方法：

slice(),slice(start,[,end]),start开始索引end结束索引

substr(),substr(start[,length]),start开始，取length个字符

split(),split([separator[,limit]]),按条件分割字符串，返回数组

indexOf()在父串中首次出现的位置，从0开始，没有返回-1

lastIndexOf()倒序查找

charAt(index)指定索引的字符

toLowerCase()转小写

toUpperCase()转大写

正则表达式：

RegExp是一个对象，可以通过new运算符声明一个正则表达式

var da = new RegExp("a","i");

var da = /abc/g; // 全文匹配abc

元字符：

a-z 英文小写字母A-Z 英文大写字母0-9 数字

rnt 非打印字符d 数字，相当于0-9

D d取反w 字母 数字 下划线W w取反s 空白字符S 非空字符{n} 匹配n次{n,}匹配至少n词{n,m} 至少n次，最多m次

  • 匹配0个或多个，{0,}
  • 匹配1个或多个，{1,}
    ? 匹配0个或1个，相当于{0,1}
    ^ 匹配正则开头，放在[^],内容取反
    $ 匹配正则结尾
    | 匹配 | 两侧任选其一
    () 分组，子存储

模式修饰符

i 忽略大小写g 全文查找m 多行查找

var da = /abc/ig; // 全局

test方法

检索字符串中指定的值。返回true或是false。

exec方法：

用于检索字符串中的正则表达式的匹配，返回一个数组，其中存放匹配的结果。未找到匹配，返回值未Null。

支持正则得String方法

search()第一个与正则相匹配得字符串的索引

match()找到一个或多个正则表达式的匹配，没有找到返回Null，否则返回一个数组

replace()替换与正则表达式匹配的字符串

split()把字符串分割为字符串数组

对象：

定义对象，对象的数据访问

JSON是一种轻量级的数据交换格式，它是基于js对象的格式，以key:value的格式进行存储数据，独立于编程语言的文本格式来存储和表示数据。

Math方法

abs()绝对值

random()随机数

round()四舍五入

floor()向下取整

ceil()向上取整

max(x,y)x和y中的最大值

min(x,y)x和y中的最小值

cos(x)sin(x)sqrt(x)平方根pow(2,4)次方

Date方法：

getFullYear()返回年

getMouth()返回月

getDate()getDay()返回星期getHours(0返回小时getMinutes()返回分钟

getSeconds(）返回秒getTime() 返回毫秒数

setFullYear(0setMouth(0setDate()setHours()setMinutes()setSeconds()setTime()

function Dyear(year) {

 if(year%4==0&&year0!=0||year@0==0){

  return true;

 }

}

面向对象

JavaScript是基于对象编程的，面向对象是一种编程思想

类是将事物进行分类，类是一个抽象的概念，对象是具体的事物，类是对象的抽象，对象是类的具体实例，类 不占用内存，对象占用内存空间。

var obj = new Object();

for in 循环 多用于遍历json

var obj = {

 name: 'dada',

 age: 1,

}

for(var key in obj) {

 console.log(key,obj,key)

}

检测对象有没有某个属性：

if("name" in obj)

if(obj.name === undefined)

定义对象：

字面量的创建：

var da = {

 name: 'da',

}

工厂模式：

工厂模式

// 批量创建对象

function Da(n, c) {

 return {

 name: n,

 age：c,

 say: function() {

  alert('da');

 }

}

生成实例对象：

var da1 = Da('dada',2);

构造函数：

JavaScript提供了一个构造函数Constructor模式。

构造函数，就是一个普通的函数，但是内部使用了this变量。

对构造函数使用new，就能生成实例，并且this变量会绑定到实例对象上。

构造函数首字母要大写

构造函数中的this,指向的实例化的对象

function Da(n,a) {

 this.name = name;

 this.age = age;

}

生成实例对象，会自动含有一个constructor属性,指向它们的构造函数。

instanceof元素符，验证原型对象与实例对象之间的关系。

instanceof不认为原始类型值的变量是对象。

原型和原型链

构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

Da.protoType.say = function() {

 alert('da');

}

da1.say();

da2.say();

所有的函数都是Function的实例，构造函数上都有一个prototype,而prototype是一个对象，这个对象上有一个constructor属性，这个属性指向的实例的对象？该属性指向的就是构造函数。

实例对象上有一个proto属性，该属性指向原型对象，该属性不是标准的属性。

单例模式

var Singleton = {

 attribute: true,

 method: function() {},

 method1: function() {}

};

把代码封装起来，暴露一个入口，从而避免变量的污染。

工厂模式：提供创建对象的接口

场景：对象的构造复杂，需要依赖具体的环境创建不同的实例，处理大量具有相同属性的小对象。

单例模式

var single = (function() {

 var unique;

 function getInstance() {

  if(unique === undefined) {

   unique = new Construct();

  }

  return unique;

 }

 fucntion Construct() {

 }

 return {

  getInstance: getInstance

 }

})();

局部变量和全局变量

函数体内的变量，局部变量，仅仅在函数体内使用

函数体外的变量，全局变量，对全局可见

匿名函数，就是没有名字的函数，可以看成一种数据，将它赋值给一个变量：

// 函数变量

var da = function() {

}

(function() {

})()

闭包

闭包有权访问另外一个函数作用域中的变量的函数。

在一个函数内部创建另外一个函数，并把这个函数return。

用函数为元素绑定事件，当事件发生时，可以操作该函数中的变量。

第一种：

function da() {

 var a = 1;

 return function() {

  a  ;

  console.log(a);

 };

};

var b = da();

b();

第二种：

function da() {

 var name = 'da';

 document.getElementById("box").onclick=function() {

  alert(name);

 }

};

da();// 函数内部绑定一个事件

第三种：

function da (num, fn) {

 if(num>21){

  return fn && fn(num);

 };

};

var a = da(32,function(n) {

 return n 1;

});

console.log(a);

BOM就是浏览器的对象模型

confirm()带有确认，取消，按钮的提示框

prompt()带有可输入内容的文本域的提示框

setInterval() 间隔定时器clearInterval()clearTimeout()

requestAnimationFrame

window.history.go(1)前进window.history.go(-1)后退

window.history.forward()window.history.back()

location定位：

window.location.href = ''window.location.reload()页面重载screen

window.screen.width返回当前屏幕的宽度window.screen.height返回当前屏幕的高度

document代表所有html的元素

DOM是文档对象模型

getElementById(id)->id对象

getElementByTagName(tag)->标签数组

getElementByName(name)->name数组

getElementByIdClassName(class)->class

操作dom间的关系：

createElement(tag)创建元素

removeChild(对象)删除元素

appendChild(对象）插入元素

replaceChild(替换对象，被替换对象)替换元素

insertBefore(对象，目标对象)前部插入

节点属性，每一个元素，都可以看作是树的一个分支节点，DOM结构就像树一样，从文档根document,逐步分支展开

cloneNode克隆节点。节点类型，

12种节点类型：

Element元素Attr属性Text元素的文本内容Comment注解Document整个文档DOCTYPE文档类型声明

节点属性：setAttribute("属性名",属性值)设置属性

getAttribute(属性名)获取属性

removeAttribute(属性名)删除属性

hasAttributes(属性名)判断属性是否存在

attribute与property

attribute是每个dom元素上的属性节点

propertyjs以对象的方式定义的属性

事件：

addEventListener()增加事件监听

removeEventListener()删除事件监听

onload加载

onunload用户退出页面

onscroll滚动事件

onresize窗口或框架被调整尺寸

onscroll滚动条事件

onclick鼠标点击

ondbclick鼠标双击

onmousedown鼠标按键按下

onmouseup鼠标按键被松开

onmouseout鼠标被移到某元素之上

onmouseover鼠标被移到某元素之上

onmouseleave鼠标离开某元素

onmousemove鼠标移动

oncontextmenu右键菜单

input事件

onblur元素失去焦点onfocus元素获得焦点onchange内容发生改变

onkeydown按键按下onkeypress按键按下并释放onkeyup按键释放

form事件onreset表单重置onsubmit表单提交

事件对象Event

onDa.onclick = function(ev){

 // ev:事件对象

}

事件流

阻止默认行为：event.preventDefault()

事件流：捕获-》事件目标-》冒泡

事件捕获事件目标事件冒泡阻止事件冒泡

ev.targetev.target.nodeNameev.target.tagName

事件委派

将事件绑定在父级上，利用事件冒泡原理，通过判断事件的“目标元素”来触发父级上绑定的事件。

obj.addEventListener(事件，回调函数，冒泡/捕获)

btn.addEventListener("click",function(ev){

 // ev事件对象

 alert(123);

},false)

// 冒泡阶段

jquery是一个JavaScript的库。它是通过封装原生的JavaScript函数得到一整套定义好的方法。

jQuery选择器：

基本选择器：id选择器，class选择器，标记选择器，*选择器

属性选择器。

层级选择器：

匹配所有后代元素

匹配直接子元素

匹配所有在该元素后的next元素匹配该元素的所有同辈元素

位置选择器：

:first匹配第一个元素

:last获取最后一个元素

:not去除所有与给定选择器匹配的元素

:even匹配所有索引值为偶数的元素

:odd 匹配所有索引值为奇数的元素

:eq匹配一个给定索引值的元素

:gt匹配所有大于给定索引值的元素

:lt匹配所有小于给定索引值的元素

后代选择器，子代选择器，选择器对象，

子元素：

:first-child匹配第一个子元素

:last-child匹配最后一个子元素

:first-of-type选择所有相同的元素名称的第一个兄弟元素

:first-of-type选择所有相同的元素名称的最后一个兄弟元素

:nth-child匹配其父元素下的第N个子或奇偶元素

表单对象属性

:enabled匹配所有可用元素

:disabled匹配所有禁用元素

:checked匹配所有选中的被选中元素

:selected匹配所有选中的option元素

DOM操作：

clone()克隆匹配的DOM元素并且选中这些克隆的副本

empty()删除匹配的元素集合中所有的子节点

remove()从Dom中删除所有匹配的元素

repalceWith()将所有匹配的元素替换成指定的元素

repalceAll()将匹配的元素替换掉所有selector匹配到的元素

append()将每个匹配的元素内部追加内容

appendTo()将所有匹配的元素追加到另一个指定的元素集合中

prepend()将每个匹配的元素内部前置内容

prependTo(）把所有匹配的元素前置到指定的元素集合中

after()在每个匹配的元素之后插入内容

before()在每个匹配的元素之前插入内容

insertAfter()将所有匹配的元素插入到指定的元素后

insertBefore()将所有匹配的元素插入到指定的元素前

eq()获取第N个元素

hasClass()检查当前的元素是否含有某个特定的类

filter()筛选出与指定的表达式匹配的元素

页面载入



$(document).ready(function() {

})

$(function() {

})

$("#box").on("click",function(){

})

$("#box").off("click,mousemove");

keydown()，keyup()，keypress()

submit(),change(),scroll(),resize()

标签样式

$(选择器).css(样式属性名,[，值])

$(选择器).addClass(类别名)

$(选择器).removeClass(类别名)

$(选择器).toggleClass(类别名)

show(),hide()slideDown(),slideUp()slideToggle()fadeIn(），fadeOut()，fadeTo()，fadeToggle()

Ajax，jquery底层ajax实现。

HTTP通讯协议，ajax等于异步javascript和xml

ajax工作原理，用户登录，调用ajax帮定的那个的事件处理函数，发送请求，检查用户名，部分数据传入到事件处理函数，更新到浏览器。

ajax中的XMLHttpRequest对象，发送异步请求，接收响应，执行回调。

xhr = new XMLHttpRequest();

xhr.open("post", "test.php");

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("name=da&age=10");

xhr.onreadystatechange=function() {

 if(xhr.status==200&&xhr.readyState==4){

  var result = xhr.responseText;

 }

}

xml和html的区别：

xml是区分大小写，所有标记必须成对出现

html时不区分大小写的，不是所有的 标签都是成对的jquery

load()从服务器加载数据，返回数据

$(selector).load(url, data, callback);

$.get(url,data,callback,dataType);

$.post(url,data,callback,dataType);

跨域问题，同源策略，同源是协议，域名，端口相同，理解为一个服务器。同源策略是从一个源加载的文档或脚本去另一个源进行资源交互。

浏览器同源政策及其规避方法(阮一峰)

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.htmlJSONP方式解决跨域问题



function addScriptTag(src) {

  var script = document.createElement('script');

  script.setAttribute("type","text/javascript");

  script.src = src;

  document.body.appendChild(script);

}

window.onload = function () {

  addScriptTag('http://example.com/ip?callback=foo');

}

function foo(data) {

  console.log('response data: '   JSON.stringify(data));

};

服务端对应的接口在返回参数外面添加函数包裹层

foo({

  "test": "testData"

});

基于JSONP的实现原理

只能是“GET”请求,不能进行较为复杂的POST和其它请求

代理、JSONP、XHR2（XMLHttpRequest Level 2）

XMLHttpRequest Level 2

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名

header('Access-Control-Allow-Methods:POST,GET');

XHR2最简单只支持HTML5

JSONP相对简单只支持GET方式调用

代理实现最麻烦使用最广泛，任何支持AJAX的浏览器都可以使用这种方式

❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论]

作者Info：

【作者】：Jeskson

【原创公众号】：达达前端小酒馆。

【转载说明】：转载请说明出处，谢谢合作！~

关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客

2019年底前的web前端面试题初级-web标准应付HR大多面试问题的更多相关文章

  1. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上

    金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...

  2. 2019前端面试题汇总（主要为Vue）

    摘要: 经典面试题. 原文:2019前端面试题汇总(主要为Vue) 作者:前端小酱 Fundebug经授权转载,版权归原作者所有. 毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道 ...

  3. 【web前端面试题整理02】前端面试题第二弹袭来，接招！

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  4. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  5. 【重点--web前端面试题总结】

    前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...

  6. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

  7. web前端面试题库

    web前端面试题及答案   1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.    (Q2) ...

  8. 第136天：Web前端面试题总结（理论）

    Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...

  9. 好程序员分享Web前端面试题汇总JS篇之跨域问题

    为什么80%的码农都做不了架构师?>>>   好程序员分享Web前端面试题汇总JS篇之跨域问题,接着上一篇文章我们继续来探讨web前端面试必备面试题. 跨域解决方案 1. 通过jso ...

随机推荐

  1. IntelliJ idea 撤回(已经commit未push的)操作

    VSC  => Git => reset head => 退回到上次commit => 退回到第2次提交之前 => 退回到指定commit版本

  2. 《 .NET并发编程实战》实战习题集 - 2 - 替换算法

    先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.

  3. Kafka学习笔记之K8S内filebeat传输到kafka报错带解决方案

    0x00 概述 filebeat非常轻量级,正常情况下占用的资源几乎都能忽略不计,但是部署后发现资源占用很大,所以怀疑是filebeat本身出了问题. 第一时间查看filebeat日志(默认路径/va ...

  4. redis 实战操作RDB和AOF快照持久化

    前言:redis是我们常用的缓存方式,今天就来介绍下两种持久化的方式吧,先科普概念,再实战操作 一.RDB Redis将某一时刻的快照(备份的数据库数据)保存成一种称为RDB格式的文件中,这种格式是经 ...

  5. SpringBoot整合PageHelper做多条件分页查询

    https://yq.aliyun.com/articles/619586 本篇博客讲述如何在SpringBoot中整合PageHelper,如何实现带多个条件,以及PageInfo中的属性的中文解释 ...

  6. WPF 精修篇 Winform 嵌入WPF控件

    原文:WPF 精修篇 Winform 嵌入WPF控件 首先 创建WPF控件库 这样就有了一个WPF界面 在wpf中增加界面等 在winform中增加WPFDLL 重新生成解决方案 在左侧工具栏 出现W ...

  7. 一种小型后台管理系统通用开发框架中的Cache缓存设计

    本篇博客记录一下我在实习的公司的后台管理系统开发框架中学习到的一种关于网站的缓存(Cache)的实现方法,我会在弄懂的基础上,将该方法在.net core上进行实现.因为公司开发都是基于.net fr ...

  8. netcore添加api帮助文档页-Swagger

    1. 添加NuGet包 1)最基本的包:Swashbuckle.AspNetCore.Swagger 2)扩展包:Swashbuckle.AspNetCore.SwaggerGen和Swashbuck ...

  9. windows10 edge浏览器关闭没有提示如何解决

    通常情况下,用户在win10 edge中打开多个窗口,点击关闭按钮就会出现“要关闭所有标签”提示,然后可以点击 取消来取消关闭edge.不过,最近一位windows10系统用户反馈自己在一次勾选“总是 ...

  10. virtualbox通过Nat模式上网，宿主机与宿主机互通

    本地搭建virtualbox,开始用的nat转发模式,这样的话宿主机没法访问虚拟机里面的服务.比如nginx网站.这样很不方便 . 在网上找了好久,终于找到了方案.那就是再添加一块虚拟网卡. 在虚拟机 ...