2019年末前的web前端面試題初級-web標準應付HR大多面試問題

時間 2019-11-26

標籤 2019年 web 端面試題初級標準應付大多面試問題欄目 HTML 简体版

原文原文鏈接

做者 | 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 前端相關的技術文章、工具資源、精選課程、熱點資訊。

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。