Web前端JQuery面试题（三）

淡淡的烟草味﹌ 2021-09-18 03:08 429阅读 0赞

![Web前端JQuery面试题（三）][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])

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文件地址 和 加载成功时执行的回调函数

$.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请求发送前执行函数

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

![努力努力再努力Jeskson][Jeskson]

[Web_JQuery]: /images/20210724/f98640e3323f44738dcddd4fcf7f8654.png
[Jeskson]: /images/20210724/f98eb9bfc2334fd0b1fc360870c330c5.png