专栏首页达达前端Web前端JQuery面试题(三)

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

结言

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

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

作者简介

达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第86节:Java中的JQuery基础

    jquery是一种快速,小巧,功能丰富的JavaScript库,可以让html文档遍历和操作,事件处理,动画和ajax更加容易使用的一种api,可以在多种浏览器...

    达达前端
  • 前端冲刺必备指南-执行上下文/作用域链/闭包/一等公民

    大家好,我是吒儿?,每天努力一点点?,就能升职加薪?当上总经理出任CEO迎娶白富美走上人生巅峰?,想想还有点小激动呢?。

    达达前端
  • 小程序分享

    onShareAppMessage()方法 1、在页面中调用wx.hideShareMenu() 2、删掉onShareAppMessage()回调方法

    达达前端
  • [Python人工智能] 二.theano实现回归神经网络分析

    从本篇文章开始,作者正式开始研究Python深度学习、神经网络及人工智能相关知识。第一篇文章主要讲解神经网络基础概念,同时讲解Theano库的安装过程及基础用法...

    统计学家
  • 带你入门Linux中size命令的6个例子

    正如你所知道的那样,Linux 中的目标文件或着说可执行文件由多个段组成(比如文本段和数据段)。若你想知道每个段的大小,那么确实存在这么一个命令行工具 —— 那...

    砸漏
  • Linux命令(39)——du命令

    (1)文件大小与占用磁盘空间大小的区别。 文件大小(又名 apparent size)是文件自身实际大小,与占用磁盘空间大小(又名 occupied spa...

    Dabelv
  • Python学习之property

    Property函数创建了一个属性size,此时访问器函数被用做参数(先取值,再赋值)。尽管它们看起来像属性一样,但size的特性依旧取决于getSize和se...

    py3study
  • LVS(3)——针对于真实主机的增删改操作

    其中route代表的是directrouting调度方法,LVS一共用四种调度方法: NAT Tunneling DirectRouting FULLNA...

    gzq大数据
  • 快速学习-断点续传解决方案

    通常视频文件都比较大,所以对于媒资系统上传文件的需求要满足大文件的上传要求。http协议本身对上传文件大 小没有限制,但是客户的网络环境质量、电脑硬件环境等参差...

    cwl_java
  • Swift3.0-可选值

    酷走天涯

扫码关注云+社区

领取腾讯云代金券