前端面試題整理 三

2021-09-10 15:54:00 字數 4747 閱讀 3591

$() 函式是 jquery() 函式的別稱。$() 函式用於將任何物件包裹成 jquery 物件,接著你就被允許呼叫定義在 jquery 物件上的多個不同方法。你可以將乙個選擇器字串傳入 $() 函式,它會返回乙個包含所有匹配的 dom 元素陣列的 jquery 物件。

$('[name=selectname] :selected')
$(this) 返回乙個 jquery 物件,你可以對它呼叫多個 jquery 方法,比如用 text() 獲取文字,用val() 獲取值等等。

獲得a標籤的onclick屬性: $("a").attr("onclick")

刪除onclick屬性:$("a").removeattr("onclick");

設定onclick屬性:$("a").attr("onclick","test();");

$(selector).addclass(class):為每個匹配的元素新增指定的類名

$(selector).removeclass(class):從所有匹配的元素中刪除全部或者指定的類,刪除class中某個值;

$(selector).toggleclass(class):如果存在(不存在)就刪除(新增)乙個類

$(selector).removeattr(class);刪除class這個屬性;

(1)、基本選擇器:#id,class,element,*;

(2)、層次選擇器:parent > child,prev + next ,prev ~ siblings

(3)、基本過濾器選擇器::first,:last ,:not ,:even ,:odd ,:eq ,:gt ,:lt

(4)、內容過濾器選擇器: :contains ,:empty ,:has ,:parent

(5)、可見性過濾器選擇器::hidden ,:visible

(6)、屬性過濾器選擇器:[attribute] ,[attribute=value] ,[attribute!=value] ,[attribute^=value] ,[attribute$=value] ,[attribute*=value]

(7)、子元素過濾器選擇器::nth-child ,:first-child ,:last-child ,:only-child

(8)、表單選擇器: :input ,:text ,:password ,:radio ,:checkbox ,:submit 等;

(9)、表單過濾器選擇器::enabled ,:disabled ,:checked ,:selected

delegate()會在以下兩個情況下使用到:

$("ul").delegate("li", "click", function());
2、當元素在當前頁面中不可用時,可以使用delegate()

(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯檔案)完全載入到瀏覽器後才執行的。

(2)、$(document).ready() 方法可以在dom載入就緒時就對其進行操縱,並呼叫執行繫結的函式。

實現**如下:

相同點:都是非同步請求的方式來獲取服務端的資料;

異同點:

1、請求方式不同:$.get() 方法使用get方法來進行非同步請求的。$.post() 方法使用post方法來進行非同步請求的。

2、引數傳遞方式不同:get請求會將引數跟在url後進行傳遞,而post請求則是作為http訊息的實體內容傳送給web伺服器的,這種傳遞是對使用者不可見的。

3、資料傳輸大小不同:get方式傳輸的資料大小不能超過2kb 而post要大的多

4、安全問題: get 方式請求的資料會被瀏覽器快取起來,因此有安全問題。

$.ajax(,

beforesend:function(){},

success:function(){},

error:function(){},

complete:function(){}

});

(1)、bind 【jquery 1.3之前】

定義和用法:主要用於給選擇到的元素上繫結特定事件型別的監聽函式;

語法:bind(type,[data],function(eventobject));

特點:  (1)、適用於頁面元素靜態繫結。只能給呼叫它的時候已經存在的元素繫結事件,不能給未來新增的元素繫結事件。

(2)、當頁面載入完的時候,你才可以進行bind(),所以可能產生效率問題。

例項如下:$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jquery 1.3之後】

定義和用法:主要用於給選擇到的元素上繫結特定事件型別的監聽函式;

語法:live(type, [data], fn);

特點:  (1)、live方法並沒有將***繫結到自己(this)身上,而是繫結到了this.context上了。

(2)、live正是利用了事件委託機制來完成事件的監聽處理,把節點的處理委託給了document,新新增的元素不必再繫結一次***。

(3)、使用live()方法但卻只能放在直接選擇的元素後面,不能在層級比較深,連綴的dom遍歷方法後面使用,即$(「ul」").live...可以,但$("body").find("ul").live...不行; 

例項如下:$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jquery 1.4.2中引入】

定義和用法:將監聽事件繫結在就近的父級元素上

語法:delegate(selector,type,[data],fn)

特點:  (1)、選擇就近的父級元素,因為事件可以更快的冒泡上去,能夠在第一時間進行處理。

(2)、更精確的小範圍使用事件**,效能優於.live()。可以用在動態新增的元素上。

例項如下:

$("#info_table").delegate("td","click",function());

$("table").find("#info").delegate("td","click",function());

(4)、on 【1.7版本整合了之前的三種方式的新事件繫結機制】

定義和用法:將監聽事件繫結到指定元素上。

語法:on(type,[selector],[data],fn)

總結:.bind(), .live(), .delegate(),.on()分別對應的相反事件為:.unbind(),.die(), .undelegate(),.off()

在網頁中,乙個元素占有空間的大小由幾個部分構成,其中包括元素的內容(content),元素的內邊距(padding),元素的邊框(border),元素的外邊距(margin)四個部分。這四個部分占有的空間中,有的部分可以顯示相應的內容,而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。

行內元素:a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即係沒有內容的html元素,例如:br、meta、hr、link、input、img

一道經典的問題,實現方法有很多種,以下是其中一種實現:

html結構:

css:

position: relative;

width: 500px;

height: 500px;

border: 1px solid red;

}.content

href 是指向網路資源所在位置,建立和當前元素(錨點)或當前文件(鏈結)之間的鏈結,用於超連結。

同步是阻塞模式,非同步是非阻塞模式。

同步就是指乙個程序在執行某個請求的時候,若該請求需要一段時間才能返回資訊,那麼這個程序將會一直等待下去,直到收到返回資訊才繼續執行下去;

非同步是指程序不需要一直等下去,而是繼續執行下面的操作,不管其他程序的狀態。當有訊息返回時系統會通知程序進行處理,這樣可以提高執行的效率。

相同點:px和em都是長度單位;

異同點:px的值是固定的,指定是多少就是多少,計算比較容易。em得值不是固定的,並且em會繼承父級元素的字型大小。

瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

ie: trident核心

firefox:gecko核心

safari:webkit核心

opera:以前是presto核心,opera現已改用google chrome的blink核心

chrome:blink(基於webkit,google與opera software共同開發)

漸進增強 progressive enhancement:

針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 graceful degradation:

一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。

區別:a. 優雅降級是從複雜的現狀開始,並試圖減少使用者體驗的供給

b. 漸進增強則是從乙個非常基礎的,能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要

c. 降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處於安全地帶

前端面試題整理

從瀏覽器位址列輸入url到顯示頁面的步驟 以http為例 在瀏覽器位址列輸入url 瀏覽器檢視快取,如果請求資源在快取中並且新鮮,跳轉到轉碼步驟 如果資源未快取,發起新請求 如果已快取,檢驗是否足夠新鮮,足夠新鮮直接提供給客戶端,否則與伺服器進行驗證。檢驗新鮮通常有兩個http頭進行控制expire...

前端面試題整理

1.html5的新特性。主要講講新增哪些api 地理定位,拖放,web儲存應用快取,webworkers,sse 2.css3的新特性。3 使用嚴格模式的限制有哪些。4 什麼是同源?什麼情況下就屬於跨域?怎麼解決跨域說出三種以上的方法,jsonp原理是什麼。同源 協議,網域名稱,埠相同 方法一 co...

前端面試題整理

js 1 ajax 原理 ajax的基本原理總結 2 原型和原型鏈 原型和原型鏈 3 深拷貝淺拷貝 js的深拷貝和淺拷貝 4 繼承有幾種方式 js繼承的幾種方式 5 閉包 js閉包 6 阻止事件冒泡,和預設事件 阻止事件冒泡,阻止預設事件 7 陣列去重 物件去重 8 陣列有哪些方法 9 promis...