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