1. 程式人生 > 實用技巧 >jquery相關面試題

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呢?

AjaxAsynchronous 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請求傳送前執行函式