程序员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应用程序中。

时间: 2024-09-20 05:27:58

程序员Web面试之jQuery的相关文章

程序员Web面试之前端框架等知识

基于前面2篇博客: 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发的大门. 但是要动手干,还需要了解一些已有的前端框架.UI套件,即要站在巨人肩膀上而不是从轮子开始造汽车. 下面就Web开发用到的前端框架.UI套件.UI插件一一列举(排名不分先后): jQuery UI jQuery UI以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.包含了许多维持状态的小部件(Widget)

程序员Web面试之JSON

JSON是什么? JSON(JavaScript对象表示法), 是在网络通信下,常用的一种数据表达格式,它有助于我们于一个自描述的,独立的和轻的方式呈现并交换数据.这些数据可以易于和转换为JavaScript对象.       JSON格式的最大优点: 它可以被很容易得被转换为一个javascript对象.例如,下面的代码片段中看到的,我们有一个JSON格式的数据里面有"姓名","街道","年龄"和"手机". <scri

10个我最喜欢问程序员的面试问题(转)

英文原文:10 Programmer Interview Questions I'd like to be asked 最近我拜读很多文章,都是介绍面试问题的,我真心不理解,面试官代表公司想要聘用的是最优秀的程序员,那就意味着需要想出一些有意义的面试问题.如果你就提一些毫无用处的垃圾问题,那么很容易遗漏很多能干的程序员.当然如果你觉得你就是要吓跑这些人才,那么你就让人力资源部门来面试而不是真正精通程序的人就可以了. 为什么会这么严重?这是因为问题的答案能反映一个人的情况,而且问题本身也能告诉面试

程序员-web网页里像QQ空间发表日志一样 令用户发布文章时可 图文混编

问题描述 web网页里像QQ空间发表日志一样 令用户发布文章时可 图文混编 像 QQ空间发表日志一样,用户可上传图片进行图文混编.注意这里是用户进行图文混编,不是程序员. 解决方案 ueditor百度出品,必属精品 解决方案二: 网页编辑器 用的最多的是ckeidtor 国产的kindeditor也不错 另外推荐一个tinymce

程序员编程面试取胜的8个技巧

IT职位现在相当热门.程序员和软件开发人员在今年将有大量的就业机会.可是,面试成了招聘过程中的拦路虎,成为了很多程序员的噩梦.下面教你8个技巧,希望能有助于你成功取胜编程面试. 1.知道如何写算法 如果你申请的是软件工程师的工作,那么显然你需要知道如何编码.写代码脚本其实与写算法来解决软件问题略有不同.用人单位可能会提出这样的问题,"写一个算法,可以从链表中找到某个元素,并将此元素挪到列表末尾."所以,你必须知道如何写算法. 只需具备一点点的数据结构知识以及知道如何实现不同类型的算法,

php程序员面试分享

面试总结 今天去了北京著名IT公司进行PHP程序员的面试.这是人生第一次么,怎么不紧张?我是不是有病.不是,这叫自信呵. 首先是做一些笔试题. 1.mysql数据库索引使用的数据结构?这样做的好处是? 可以参考这篇博文:http://blog.csdn.net/ant_ren/article/details/2932068 2.有两个字符串a和b,判断b字符串是否出现在a中.不考虑大小写.. 我的答案是:使用stripos()这个函数来解决的. if(stripos($a,$b)>-1) ech

程序员的10大成功面试技巧

我遍览群书,发现关于程序员的面试技巧,好的建议其实并不多. 我们也发现,很多很有才华的程序员在面试的时候总是掉链子,这大概是因为他们把大多数时间都用来搞技术开发,而忽略了学习面试技巧的重要性. 这何尝不是一种悲剧.有效的面试技巧能让你成功得到工作,即使你对那个领域也并不是非常熟悉. 1.给自己写一份非常专业的简历 我的建议是,如果你想增加自己的入选机会,那最好还是花点钱制作一份专业的简历.相较于你将来可能得到的巨大收获,这真的只是一个小小的投资. 2.研究面试官 当我联系程序员来面试的时候,我总

程序员必读书单(转)

  原文链接:http://lucida.me/blog/developer-reading-list/ 关于 本文把程序员所需掌握的关键知识总结为三大类19个关键概念,然后给出了掌握每个关键概念所需的入门书籍,必读书籍,以及延伸阅读.旨在成为最好最全面的程序员必读书单. 前言 Reading makes a full man; conference a ready man; and writing an exact man. Francis Bacon 优秀的程序员应该具备两方面能力: 良好的

程序员必读书单

关于 本文把程序员所需掌握的关键知识总结为三大类19个关键概念,然后给出了掌握每个关键概念所需的入门书籍,必读书籍,以及延伸阅读.旨在成为最好最全面的程序员必读书单. 前言 Reading makes a full man; conference a ready man; and writing an exact man. Francis Bacon 优秀的程序员应该具备两方面能力: 良好的程序设计能力: 掌握常用的数据结构和算法(例如链表,栈,堆,队列,排序和散列): 理解计算机科学的核心概念