Web前端JQuery面試題（三）

Web前端JQuery面試題（三）

1.怎麼阻止冒泡過程？

stopPropagation(); // 阻止冒泡過程

2.ready()方法和onload()方法的區別？

onload()方法要等頁面中全部元素載入到瀏覽器中才執行，如果頁面中存在大量圖片，要等這些內容載入完畢。

ready()方法只要頁面的dom模型載入完畢即可，就會觸發ready()。

3.請寫出 ready()相同方法？

$(document).ready(function(){});

$(function(){});

jQuery(document).ready(function(){});

jQuery(function(){});

4.bind()方法綁定事件有瞭解嗎？

bind(type,[data],fn);

綁定類型： blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, select, submit , keydown, keypress, keyup, error, mousemove, mouseover, mouseout, mouseenter, mouseleave, change

$("#btn").bind("click", function(){});

$(".txt").bind("focus", { msg: message }, function(event){ // 獲取數據 event.data.msg });

5.寫出一個映射方式？

$(function(){ $(".txt").bind({ focus: function(){}; }, { change: function() {} }) })

6.hover()方法和toggle()方法區別？

$("a").hover(function(){ // 執行一 }, function() { // 執行二 });

hover(over, out)

$("a").mouseenter(function(){});

$("a").mouseleave(function(){});

toggle()方法可以依次執行函數

toggle(fn, fn2, fn3...);

7.說明unbind()方法的使用？

unbind()可以移除元素的綁定事件：unbind([type], [fn])

移除全部事件 unbind();

8.one()方法和trigger()方法的使用？

one()方法可以將所選選的元素綁定一個觸發一次的處理函數

one(type, [data], fn);

trigger()自動執行, triggerHandler()方法進行取消

trigger()方法 trigger(type, [data]) 所選擇的元素上觸髮指定事件

9.請寫出顯示和隱藏效果代碼？

document.getElementById("p").style.display = "block";

document.getElementById("p").style.display = "none";

$("p").css("display":"block");

$("p").css("display":"none");

show()和hide()方法進行顯示和隱藏

show(speed,[callback]);

hide(speed,[callback]);

10.切換元素可見狀態的方法？

toggle()方法如果顯示狀態，就變成隱藏狀態，如果是隱藏狀態，就變成顯示狀態。

toggle()

toggle(switch) switch為布爾值，true顯示元素，反之隱藏

toggle(speed,[callback])

11.請寫出滑動效果？

slideDown()方法和slideUp()方法

slideDown(speed,[callback])

slideUp(speed,[callback])

slideToggle(speed,[callback]) 以動畫效果切換所選擇的元素

12.請寫出淡入淡出效果？

fadeIn()與fadeOut()方法進行淡入淡出效果。

fadeIn(speed,[callback]) 實現淡入動畫效果

fadeOut(speed,[callback]) 現實淡出的動畫效果

fadeTo()方法給定透明度值

fadeTo(speed,opacity,[callback]);

13.簡單的動畫效果？

animate(params,[duration],[easing],[callback])

<script type="text/javascript">
 $(function(){
  $("p").click(function(){
    $(this).animate({height: 100}, "slow")
    .animate({width:100},"slow")
    .animate({height:50},"slow")
    .animate({width:50},"slow");
   })
 })
</script>

14.實現效果動畫的停止和延時？

stop([clearQueue],[gotoEnd]) 停止正在執行的動畫,clearQueue是布爾值，是否停止正在執行的動畫，gotoEnd是布爾值，是否完成正在執行的動畫。

delay(duration,[queueName])延時動畫效果

show()和hide()方法 實現動畫效果的顯示和隱藏

slideUp()和slideDown() 實現“上下”的動畫效果的顯示和隱藏

fadeTo()實現指定的透明度的效果

toggle()方法進行切換效果，顯示和隱藏

slideToggle()方法可以上下顯示和隱藏的效果

animate()方法進行自定義元素的動畫

15.使用animate()方法

$("p").animate({height: "hide", width: "hide", opacity: "hide" }, 300);

$("p").hide(300);

$("p").animate({ opacity: "hide" }, 300);

$("p").fadeOut(300);

$("p").animate( {height: "hide" }, 300);

$("p").slideUp(300);

$("p").animate( {opacity: "0.8" }, 300);

$("p").fadeTo(300, "0.8");

16.什麼是Ajax呢？

Ajax是Asynchronous JavaScript and XML的縮寫，核心是通過XMLHttpRequest對象進行非同步獲取的方法，向伺服器發送數據請求，通過這個對象進行接收請求返回的數據。

jquery中的load()方法，進行獲取非同步數據。

load(url, [data], [callback]);

$.getJSON(url,[data],[callback]);
$.getJSON("xxx.json", function(data){
 $.each(data, function(InfoIndex, Info){
  // 顯示
   })
})

通過全局函數getJSON()可以獲取.json格式的文件內容

17.關於全局函數中的getScript()

通過全局函數getScript()可以獲取.js文件內容

$.getScript(url,[callback]) // 載入的js文件地址 和 載入成功時執行的回調函數

<script type="text/javascript">
 $(function(){
   $("#btn").click(function(){
    $.getScript("User.js");
   })
 })
</script>

$.getScript("User.js", function() { alert("載入成功"); });

18.全局函數get()？

$.get(url, [data], [callback], [type]) 非同步獲取xml文檔數據

$.get()請求數據

19.安全請求數據

$.post()請求數據

$.post(url, [data], [callback], [type]);

19.序列化表單效果

serialize()方法

<script type="text/javascript">
 $("#btn").click(function(){
   $.post("User.aspx", $("#formUser").serialize(), 
    function(data) {
     $("div").empty.html(data);
   })
  })
</script>

20.底層方法$.ajax()?

$.ajax([options]);

$.ajaxSetup([options]);

ajaxSuccess(callback) ajax請求成功時執行
ajaxStop(callback) ajax請求結束時執行
ajaxStart(callback) ajax請求開始時執行
ajaxComplete(callback) ajax請求完成時執行函數
ajaxError(callback) ajax請求發送錯誤時執行函數
ajaxSend(callback) ajax請求發送前執行函數

結言

好了，歡迎在留言區留言，與大家分享你的經驗和心得。

感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

作者簡介

達叔，理工男，簡書作者&全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以！閱讀他的文章，會上癮！，幫你成為更好的自己。長按下方二維碼可關註，歡迎分享，置頂尤佳。