前端面試題

2021-09-29 04:19:31 字數 3643 閱讀 4983

px和pt 是絕對單位,指定是多少就是多少.

​ px:畫素,是網頁設計中常用的單位, 代表螢幕上的乙個點

​ pt: 磅, 是印刷排版行業用來表示字型單位, 1 pt = 1/72 in.

​ word 中四號字型是14pt

em與 rem 是相對單位

​ em :

作為font-size的單位時,其代表父元素的字型大小.若父級字型大小 16px, 那1em=16px

作為其他屬性單位時,代表自身字型大小

​ rem: 取值分兩種情況

​ rem作用於非根元素時,相對於根元素字型大小;

​ rem作用於根元素字型大小時,相對於其出初始字型大小

/* 作用於根元素,相對於原始大小(16px),所以html的font-size為32px*/

html

/* 作用於非根元素,相對於根元素字型大小,所以為64px */

p

一、jquery 方法 $.trim()

var str="     ssss  "

console.log("aaa"+$.trim(str)+"aaa"); //aaassssaaa

內部實現:

function trim(str)
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-z3viuk0x-1572410116903)(assets/1561529746015.png)]

二、通過正則替換

var str="   ssss  "

string.prototype.trim = function()

console.log("aaa"+str.trim()+"aaa"); //aaassssaaa

​ 實現步驟

取出字串中的字元,設為物件的key;利用物件的key 的不可重複性,統計出每個字元出現的次數

遍歷物件,找出屬性值最多的key

var str = "aabbbccccddddaaa";

var obj = {};

for (var i = 0; i < str.length-1; i++) else

}console.log(obj); //

//遍歷物件,找到出現次數最多的字元和次數

var max = 0;

var maxchar = null;

for (var key in obj)

}console.log("最多的字元是" + maxchar); //最多的字元是a

console.log("出現的次數是" + max); //出現的次數是5

1px 是css畫素,在不同的畫素比下佔據的物理畫素不同

目前畫素比有 2 (iphone 6) 和3 (iphonex)

即css 畫素 1px 在iphone 6上佔 2px物理畫素 ,在iphonex上佔 3px 的物理畫素,會導致我們寫的1px 在移動端顯示偏粗

方法一:畫素比+rem 方案

​ 先將頁面整體布局按畫素比進行縮放,然後用rem將縮放的那部分給抵消掉

​ 1.畫素比屬性:window.devicepixelratio

​ 2.縮放控制的是meta viewport的 initial-scale屬性

方法二: **查詢,根據裝置畫素比縮放,transform-scaley

場景:給子元素設定乙個margin-top隔開與父元素的上邊距,但結果卻加到父盒子上面

只有margin-top會出現此現象.

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-awnwaixs-1572410116904)(assets/1561523053495.png)]

解決方法

1.給父級設定邊框或內邊距(不建議使用)

border-top:1px solid transparent;

padding-top:1px;

2.觸發bfc(塊級格式上下文),改變父級的渲染規則

方法(1)position:absolute/fixed;

(2)display:inline-block;

(3)float:left/right;

(4)overflow:hidden;

方法一: es6塊級作用域let

for (let i = 0; i < 5; i++)
方法二: 自執行函式

for (var i=0; i<5; i++) )(i)

}

方法三:引數傳遞

var out = (i) => 

for (var i=0; i<5; i++)

​ var a=[1,2,3,4];

​ a.splice(1,1);

​ a的值是什麼?為什麼

答案:[1,3,4]

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-0or2u6v6-1572410116905)(assets/1561517665287.png)]

​ foo=foo||bar

短路運算,意思是:如果foo存在,foo=foo,否則foo=bar ,多用於函式引數預設值設定.

函式引數預設值設定,es6 提出更簡潔的方法

function log(x='hello',y='world')

log(); //hello world

document.queryselector('[type="checkbox"]').checked
判斷核取方塊的checked 的屬性值,如果為true ,就表示被選擇了

js獲取

document.getelementbyid('username').value
jq獲取

$('#username').val()
(); //hello world

### 9.js中如何判斷核取方塊被選擇了
document.queryselector(』[type=「checkbox」]』).checked

判斷核取方塊的checked 的屬性值,如果為true ,就表示被選擇了

### 10.請用js和jq分別獲取id為username的表單元素的值

js獲取

document.getelementbyid(『username』).value

jq獲取
$(』#username』).val()

前端面試題

sprites是什麼和為什麼要使用他們?css 精靈 把一堆小的整合到一張大的上,減輕伺服器對的請求數量 有可能替代sprites的方法是什麼?svg圖示,字型圖示,字元編碼等等。1 在div排版的時候,假設現在是100px的寬,我在盒子左側用padding left留個10px的白,div就撐開了...

前端面試題

行內元素有哪些?塊級元素有哪些?空 void 元素有哪些?link和 import的區別是?常見相容性問題?含移動端 html5的離線儲存?描寫一段語義化的html 吧 html5的form如何關閉自動完成功能?什麼是閉包 closure 為什麼要用?localstorage和sessionstor...

前端面試題

朋友碰到的筆試題,在此記錄一下,並且記下碰到的有難點但是自己沒注意的到的面試題!function isnumber x else sum 2,3 5 sum 2 3 5 請寫出sum函式的具體實現。function sum a,c return a c 該題考查的是乙個以前沒接觸過的東西,叫做柯里化...