程序员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>

程序员Web面试之JQuery

时间: 2024-10-20 19:33:34

程序员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格式的数据里面有"姓名","街道","年龄"和"手机". <script typ

好程序员web前端学习路线分享jQuery学习技巧

好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! 1.关于页面元素的引用 通过jquery的$引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方

CSDN日报20170320——《Java 程序员的面试经历和题库》

[程序人生]Java 程序员的面试经历和题库 作者:nuaazhaofeng 最近打算换城市了,受不了北京的雾霾了,所以准备逃离啦.所以一直在面试中,整理了下最近遇到的一些面试题,供大家参考.其中会包含一些面试的小经验,如果您是面霸,希望能给予指导.自己不是大牛,如果您是大牛,也可以忽略之.我面试的岗位是Java后端开发工程师. [Python]7行Python代码的人脸识别 作者:半吊子全栈工匠 随着去年alphago 的震撼表现,AI 再次成为科技公司的宠儿.AI涉及的领域众多,图像识别中的

阿里Java面试官分享初级Java程序员通过面试的技巧

本来想分享毕业生和初级程序员如何进大公司的经验,但后来一想,人各有志,有程序员或许想进成长型或创业型公司或其它类型的公司,所以就干脆来分享些提升技能和通过面试的技巧,技巧我讲,公司你选,两厢便利. 毕业生和初级程序员(一般是工作经验3年以下)大多处于事业的青黄不接的阶段,在找工作时往往会遇到缺乏实际项目经验的瓶颈,作为技术面试官,我也经常在面试过程中感受到这些候选人缺乏实际经验的缺陷.不过本人之前做过java兼职培训老师,也总结了些这批人群提升实际技能和面试技能的技巧,最近也老有人来问我这个,所

好程序员web前端分享MVVM框架Vue实现原理

好程序员web前端分享MVVM框架Vue实现原理,Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js和react.js更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. ? 1.什么是MVVM呢? MVVM的简写是Model-View-ViewModel. 在过去的10年里面,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了HTML 和CSS文

好程序员web前端分享如何构建单页Web应用

好程序员web前端分享如何构建单页Web应用,首先我们来看一看单页应用是什么?所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上.它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验. 其实单页应用我们并不陌生,很多人写过ExtJS的项目,用它实现的系统,很天然的就已经是单页的了,也有人用jQuery或者其他框架实现过类似的东西.用各种JS框架,甚至不用框架,都是可

程序员代码面试指南 IT名企算法与数据结构题目最优解 ,左程云著pdf高清版免费下载

下载地址:网盘下载 备用地址:网盘下载 内容简介  · · · · · ·这是一本程序员面试宝典!书中对IT名企代码面试各类题目的最优解进行了总结,并提供了相关代码实现.针对当前程序员面试缺乏权威题目汇总这一痛点,本书选取将近200道真实出现过的经典代码面试题,帮助广大程序员的面试准备做到万无一失.“刷”完本书后,你就是“题王”!__eol__本书采用题目+解答的方式组织内容,并把面试题类型相近或者解法相近的题目尽量放在一起,读者在学习本书时很容易看出面试题解法之间的联系,使知识的学习避免碎片化

好程序员web前端分享CSS文件引用的最优方法

好程序员web前端分享CSS文件引用的最优方法,在html总引入css文件的方法: 1链接式: 2导入式: 区别: 使用链接式时,会在加载页面主体部分之前加载css文件,这样现实出来的页面一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果.从浏览者的感受来说,这是使用导入式的一个缺陷.** 链接式比导入式快. 当有多个文件链接到页面的时候会导致