2019年末前的web前端面试题初级-web标准应付HR大多面试问题
做者 | Jeskson来源 | 达达前端小酒馆javascript
问：你知道在css中，html的标签元素分多少中不一样的类型吗？php
答：大致可分三种：1，块状元素，2，内联元素，3，内联块状元素css
块级元素：就是每一个块级元素都是重新的一行开始的，而且后面的元素也是另起一行的。html
元素的高度，宽度，行高，顶和底边距是能够设置的。前端
元素宽度在不设置的状况，它的自己父容器是100%。java
<div>
<p>
<h1>~<h6>
<ol>
<ul>
<dl>
<address>
<blockquote>
<form>复制代码
行内元素：就是和其余的元素都在同一行上。node
元素的高度，宽度，行高，顶部和底部边距不能够设置。jquery
元素的宽度就是它包含的图片，文字的宽度，不可改变。css3
<a><span><br/><i><em><strong><label><q>复制代码
行内块状元素：就是和其余元素都在一行上。web
元素的高度，宽度，行高顶部和底部边距都是能够设置的。
<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&&year%100!=0||year%400==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！
这是一个有质量，有态度的博客
- 1. 2019年Web前端面试题总结
- 2. Web前端初级面试题总结
- 3. 2019年末，web前端面试的你准备好了吗？
- 4. web前端面试题---vue.js面试题
- 5. 2019年前端面试题
- 6. web前端面试题（1）
- 7. web前端面试题
- 8. web前端面试题一
- 9. Web前端面试题
- 10. web前端面试题库
- 更多相关文章...
- • Web 标准 - 网站建设指南
- • Markdown 标题 - Markdown 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • PHP Ajax 跨域问题最佳解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 外部其他进程嵌入到qt FindWindow获得窗口句柄 报错无法链接的外部符号 [email protected] 无法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的应用-TOPK问题
- 6. 实例演示ElasticSearch索引查询term,match,match_phase,query_string之间的区别
- 7. 数学基础知识 集合
- 8. amazeUI 复择框问题解决
- 9. 背包问题理解
- 10. 算数平均-几何平均不等式的证明,从麦克劳林到柯西
- 1. 2019年Web前端面试题总结
- 2. Web前端初级面试题总结
- 3. 2019年末，web前端面试的你准备好了吗？
- 4. web前端面试题---vue.js面试题
- 5. 2019年前端面试题
- 6. web前端面试题（1）
- 7. web前端面试题
- 8. web前端面试题一
- 9. Web前端面试题
- 10. web前端面试题库