web前端面試題

1.css有哪些選擇符藐石,它們的優(yōu)先關(guān)系計(jì)算

CSS 元素選擇器
CSS 類選擇器
CSS ID 選擇器
CSS 屬性選擇器
CSS 后代選擇器
CSS 子元素選擇器
CSS 相鄰兄弟選擇器
CSS 偽類
CSS 偽元素等等
優(yōu)先關(guān)系:使用!important可以改變優(yōu)先級別為最高醋虏,其次是style對象瓶佳,然后是id > class >tag ,另外在同級樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級。

2.用css寫一個(gè)底邊為100px的三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .div {
            width: 0px;
            height: 0px;
            background-color: transparent;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            border-top: 100px solid transparent;
            border-bottom:  100px solid green;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

效果

小Q截圖-20170823204027.png

3.display:block吸奴,inline共虑,inline-block這三個(gè)的關(guān)系

display:block
①.block元素會(huì)獨(dú)占一行愧怜,多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下妈拌,block元素寬度自動(dòng)填滿其父元素寬度拥坛。
②.block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行尘分。
③.block元素可以設(shè)置margin和padding屬性
display:inline
①.inline元素不會(huì)獨(dú)占一行猜惋,多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里,直到一行排列不下培愁,才會(huì)新?lián)Q一行著摔,其寬度隨元素的內(nèi)容而變化。
②.inline元素設(shè)置width,height屬性無效定续。
③.inline元素的margin和padding屬性谍咆,水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果禾锤;但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果。
display:inline-block
①.簡單來說就是將對象呈現(xiàn)為inline對象摹察,但是對象的內(nèi)容作為block對象呈現(xiàn)时肿。之后的內(nèi)聯(lián)對象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link(a元素)inline-block屬性值港粱,使其既具有block的寬度高度特性又具有inline的同行特性螃成。

4.positon的幾種屬性

absolute:生成絕對定位的元素,相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位查坪。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定寸宏。
fixed:生成絕對定位的元素,相對于瀏覽器窗口進(jìn)行定位偿曙。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定氮凝。
relative:生成相對定位的元素,相對于其正常位置進(jìn)行定位望忆。因此罩阵,"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
static:默認(rèn)值启摄。沒有定位稿壁,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
inherit: 規(guī)定應(yīng)該從父元素繼承 position 屬性的值歉备。

5.布局傅是,左邊固定寬度100px,右邊自適用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .cantain {
            width: 100%;
            height: 100%;
            background-color: yellow;
            margin: 0 auto;
        }
        .div1 {
            float: left;
            width: 200px;
            background-color: blue;
            height: 400px;
        }
        .div2 {
            width: 100%;
            height: 100%;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="cantain">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

6.DOM節(jié)點(diǎn)的創(chuàng)建蕾羊、插入喧笔、刪除、查找龟再、替換

①.創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
②.插入DOM節(jié)點(diǎn)
appendChild():把節(jié)點(diǎn)插入到父節(jié)點(diǎn)的末尾书闸。
insertBefore():把節(jié)點(diǎn)插入到父節(jié)點(diǎn)的某個(gè)兄弟節(jié)點(diǎn)的前面。
③.刪除DOM節(jié)點(diǎn)
刪除DOM節(jié)點(diǎn)的方法是removeChild()利凑。
④.查找DOM節(jié)點(diǎn)
getElementById() //通過元素Id浆劲,唯一性
getElementsByTagName() //通過標(biāo)簽名稱
getElementsByName() //通過元素的Name屬性的值
⑤.替換DOM節(jié)點(diǎn)
替換DOM節(jié)點(diǎn)的方法是replaceChild()。

7.typeof返回哪些數(shù)據(jù)

typeof 返回值有六種可能: "number," "string," "boolean," "object," "function," 和 "undefined.

8.用js寫一個(gè)ajax

// 將 get 跟post 封裝到一起
/*
    參數(shù)1:url
    參數(shù)2:數(shù)據(jù)
    參數(shù)3:請求的方法
    參數(shù)4:數(shù)據(jù)成功獲取以后 調(diào)用的方法
*/
function ajax_tool(url,data,method,success) {
    // 異步對象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分別寫不同的代碼
    if (method=='get') {
        // get請求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

        }
        // 設(shè)置 方法 以及 url
        ajax.open(method,url);

        // send即可
        ajax.send();
    }else{
        // post請求
        // post請求 url 是不需要改變
        ajax.open(method,url);

        // 需要設(shè)置請求報(bào)文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判斷data send發(fā)送數(shù)據(jù)
        if (data) {
            // 如果有值 從send發(fā)送
            ajax.send(data);
        }else{
            // 木有值 直接發(fā)送即可
            ajax.send();
        }
    }

    // 注冊事件
    ajax.onreadystatechange = function () {
        // 在事件中 獲取數(shù)據(jù) 并修改界面顯示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 將 數(shù)據(jù) 讓 外面可以使用
            // return ajax.responseText;

            // 當(dāng) onreadystatechange 調(diào)用時(shí) 說明 數(shù)據(jù)回來了
            // ajax.responseText;

            // 如果說 外面可以傳入一個(gè) function 作為參數(shù) success
            success(ajax.responseText);
        }
    }

9.請實(shí)現(xiàn)將數(shù)字用千分制表示

其實(shí)最簡潔是用正則來表示截碴,可以去看看梳侨,順便我也想請教一下,聽一下講解日丹。
下面是兩種簡單的方法

function parseNum(num){
    var list = new String(num).split('').reverse();
    for(var i = 0; i < list.length; i++){
        if(i % 4 == 3){
            list.splice(i, 0, ',');
        }
    }
    return list.reverse().join('');
}
 
console.log(parseNum(10000121213));
 
function parseNum(num){
    var list = String(num).split('').reverse();
    var temp = [];
    for(var i = 0, len = list.length; i < len; i = i + 3){
        temp.push(list.slice(i, i + 3).join(''));
    }
    return temp.join(',').split('').reverse().join('');
}
console.log(parseNum(10000121213));

10.輸入N,生成N個(gè)不同的隨機(jī)數(shù)走哺,并且隨機(jī)數(shù)的范圍在[2 32]之間

<script type="text/javascript">
    var array = new Array();
    function getArray(count,maxs,mins){
        while (array.length<count){
            var temp = getRandom(maxs,mins);
            if(!serch(array,temp)){
                array.push(temp);
            }
        }
        console.log(array);
        return array;
    }
    function getRandom(maxs,mins){
        return Math.round(Math.random()*(maxs-mins))+mins;
    }
    function serch(array,num){
        for(var i=0;i<array.length;i++){
            if(array[i] == num){
                return true;
            }
        }
        return false;
    }
    getArray(4,32,2);
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市哲虾,隨后出現(xiàn)的幾起案子丙躏,更是在濱河造成了極大的恐慌择示,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件晒旅,死亡現(xiàn)場離奇詭異栅盲,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)废恋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進(jìn)店門谈秫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鱼鼓,你說我怎么就攤上這事拟烫。” “怎么了迄本?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵硕淑,是天一觀的道長。 經(jīng)常有香客問我嘉赎,道長置媳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任公条,我火速辦了婚禮拇囊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘赃份。我一直安慰自己寂拆,他們只是感情好奢米,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布抓韩。 她就那樣靜靜地躺著,像睡著了一般鬓长。 火紅的嫁衣襯著肌膚如雪谒拴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天涉波,我揣著相機(jī)與錄音英上,去河邊找鬼。 笑死啤覆,一個(gè)胖子當(dāng)著我的面吹牛苍日,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播窗声,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼相恃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了笨觅?” 一聲冷哼從身側(cè)響起拦耐,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤耕腾,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后杀糯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扫俺,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年固翰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了狼纬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,716評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡骂际,死狀恐怖畸颅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情方援,我是刑警寧澤没炒,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站犯戏,受9級特大地震影響送火,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜先匪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一种吸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧呀非,春花似錦坚俗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至降允,卻和暖如春恩闻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背剧董。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工幢尚, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人翅楼。 一個(gè)月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓尉剩,卻偏偏與公主長得像,于是被迫代替她去往敵國和親毅臊。 傳聞我的和親對象是個(gè)殘疾皇子理茎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內(nèi)容