程序员Web面试之jQuery

又到了一年一度的毕业季了,青春散场,却等待下一场开幕。

在求职大军中,IT行业的程序员、码农是工科类大学生的热门选择之一,

尤其是近几年Web的如火如荼,更是吸引了成千上万的程序员投身其中追求自己的梦想,

这篇文章以Web面试官的经历整理而成,希望能对你有所帮助。

jQuery是什么?

jQuery是javascript编写一个可重用的JavaScript库。

不使用jQuery设置UI文本的JavaScript代码如下:

document.getElementById("txt1").value = "hello";

用jQuery类库后的的JavaScript代码如下:

$("#txt1").val("Hello");

可见,在使用jQuery类库后的JavaScript代码明显简洁了很多,也更符合IT行业特点:短、平、快。

jquery与JavaScript的关系,jQuery会取代JavaScript吗?

JavaScript:是一门Web最流行的脚本语言。

jQuery: 是一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari  2.0+, Opera 9.0+)。

故,jQuery是并不是要取代的JavaScript;使用JQuery使Web开发变得简单。

如何使用jQuery库?

从jquery.com下载的jquery.js文件(最新的JQuery版本V1.11.1或V2.1.1)。 jQuery的文件规则,如“jquery-1.4.1.j s”,其中1.4.1是JS文件的版本的版本号。

在开发Web程序前,需要包含的JavaScript,如图下面的代码:

<script src="file:///C:/jquery-1.11.1.min.js" type="text/javascript"></script>

CDN(内容分发网络)是什么?

在开发Web页面,考虑最多的问题之一是页面在客户端电脑的响应:时间越短,用户体验越好。

而制约用户体验的关键因素之一是浏览器下载Web文件大小,包括*.html、图片、*.js、*.css等文件。

为了最大化复用和节约带宽,故CDN应运而生:其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

如何使用jQuery CDN?

推荐使用官方的CDN节点,使用代码如下:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

还有Google提供的jQuery CDN:

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

同时微软也提供了jQuery CDN的节点:

<script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>

如何在CDN网络不可访问情况下,能自动访问网站的jQuery文件?

一般情况下,CDN网络节点是可靠的。

但是偶尔也有失灵的时候,故为了提供双保险,可进行判断网络加载CDN失败,则自动加载网站上的JQuery

, 示例代码如下:

<script type="text/javascript" src="http:/ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

同版本的jQuery.js文件和jQuery.min.js有何不同?

相同

这两个文件提供相同的jQuery的功能,即在函数调用上没有区别。

不同

jQuery.js文件,适合让程序员阅读,如下图所示:

jQuery.min.js文件,通过压缩和删除所有的空格,以节省带宽和空间,使得文件更小,用于网络传输,不适合程序员阅读。

何时使用jQuery.js,何时使用jQuery.min.js?

开发调试场景下:用jQuery.js文件,因为你想调试,能够看到javascript代码。

生产部署环境下:用jQuery.min.js文件,可减少网络宽度,加快网页加载速度。

jQuery.vsdoc.js文件是什么?

*.vsdoc.js文件是用来在微软的开发环境Visual Studio下使用的,方便得获得jQuery的智能感知,当你输入jQuery函授后,会自动提示函数的类型、函数使用说明、函数参数等等。

如果在VS下用jQuery开发Web程序,则vsdoc.js文件会大大的提高开发效率。

jQuery的基本语法如何解释?

jQuery的语法结构可以分为四部分:

  1. 默认情况下,所有Jquery的命令开始以一个“$”符号。
  2. 其次是HTML元素的选择。例如下面是我们通过ID“txt1”选择一个HTML文本框。
  3. 接着由点(.)分隔。这个操作者将分离的元素和该元素的动作(函数)。 
  4. 最后什么样的函数(动作)。

例如在下面的jQuery代码,我们正在设置的文本值为“Hello world, jQuery”。

在jQuery中,“$”符号代表什么?

在jQuery中,“$”符号是一个jQuery的别名,默认的jQuery类库以$开头。

为何要使用jQuery.noConflict()

有很多类似jQuery一样的类库,如MooTools, Backbone, Sammy, Cappuccino, Knockout 。这些类库中,有的也使用了$符号,如果同时使用,则会导致命名冲突。

为了解决这个冲突,需要用到jQuery.noConflict(),这样就不依赖$这个默认符号了。    例如:

$.noConflict();
jQuery("p").text("I am jquery and I am working&hellip;");

或者使用别名代替:

var jq = $.noConflict();
jq("p").text("I am invoked using jquery shortcut&hellip;");

请举例说明jQuery的选择器

选择所有HTML的p元素,并隐藏

$("p").hide();

选择ID为Text1的HTML元素,并赋值

$("#Text1").val("Hello");

选择Class为Text1dHTML元素,并赋值

$(".Text1").val("Hello");

在jQuery中,如何使用document.ready?

一次完整的HTML DOM加载完成,会触发HTML的“document.ready”事件,而要通过JQuery访问HTML元素,则需要页面的HTML元素加载完成。

例如:

<script>
   $("#text1").val("Sometext"); // 报错。因为text1此刻未加载完成,无法访问
</script>
</head>
<body>
<input type="text" id="text1" />
</body>

而在Ready事件中的可访问HTML元素,例子如下:

<script>
       $(document).ready(function(){
           $("#text1").val("Sometext");
       });
</script>

同一个页面中,能否加载多个个document.ready事件?

可以。

如何用jQuery对HTML元素事件进行附加?

下面通过2个例子来说明

例子1,选择所有的button元素,在其click事件中,对所有p元素进行toggle。

$("button").click(function(){
$("p").toggle();
});

例子2,选择ID为p1的元素,在mouseenter事件中,进行alert。

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

如何使用jQuery添加样式(style)?

使用例子如下:

$("li").filter(".middle").addClass("selected");

css样式内容如下:

<style>
      .selected { color:red; }
</style>

支持jQuery的开发工具

jQuery目前也是较为常用的前端开发语言,同时也有许多支持JavaScript的开发工具。如SpreadJS,这是一款企业级的JavaScript电子表格控件,能将电子表格、数据可视化及计算功能集成在JavaScript的Web应用程序中。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

减少浏览器兼容性问题

做为一个前端工程师,不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。

15220
来自专栏pangguoming

一看就懂的ReactJs入门教程(精华版)

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件...

43660
来自专栏cnblogs

如何写好css系列之button

      现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必...

25270
来自专栏阿凯的Excel

巧用格式刷解决合并单元格无法统计问题

最近小编一直在分享Python,有朋友和我聊! 我是谁!我来自哪里!我要去往何处! 好吧,为了能对得起我的名字《阿凯的Excel》 本小编决定每周不少于一...

39160
来自专栏葡萄城控件技术团队

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Des...

34020
来自专栏腾讯社交用户体验设计

移动H5前端性能优化指南 - 腾讯ISUX

59110
来自专栏DeveWork

Google官方网页载入速度检测工具PageSpeed Insights 使用教程

相信有接触前端开发的大神们都听说过Google官方的PageSpeed Tools,这个网页载入速度检测工具有在线版本也有一个 Chrome 扩展,叫PageS...

79080
来自专栏Golang语言社区

nwui —— 又一个go语言图形界面解决方案

Github: https://github.com/go-nwui/nwui 最近开的一个大坑,具体实现就是自动生成htm+css+js然后调用nw.js来显...

29130
来自专栏用户2442861的专栏

chrome使用技巧(看了定不让你失望,不错)

之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了。对此特意了解了一番(也就是在他的博文上进行了一些总结和了解一些其...

16510
来自专栏pangguoming

svg矢量图绘制以及转换为Android可用的VectorDrawable资源

项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) ? 由于普通图片放大后容易失真,这里我们最好用矢量图(...

55990

扫码关注云+社区

领取腾讯云代金券