Web面试之JQuery
程序员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的语法结构可以分为四部分：
- 默认情况下，所有Jquery的命令开始以一个“$”符号。
- 其次是HTML元素的选择。例如下面是我们通过ID“txt1”选择一个HTML文本框。
- 接着由点（.）分隔。这个操作者将分离的元素和该元素的动作(函数)。
- 最后什么样的函数(动作)。
例如在下面的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…");
或者使用别名代替：
var jq = $.noConflict();
jq("p").text("I am invoked using jquery shortcut…");
请举例说明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的更多相关文章
- 程序员Web面试之jQuery
又到了一年一度的毕业季了,青春散场,却等待下一场开幕. 在求职大军中,IT行业的程序员.码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了成千上万的程序员投身其中追求自己的梦 ...
- 程序猿Web面试之jQuery
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/powertoolsteam/article/details/32325013 又到了一年一度的 ...
- 程序员Web面试之前端框架等知识
基于前面2篇博客: 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发的大门. 但是要动手干,还需要了解一些已有的前端框架.UI套件,即要站在巨人肩膀上而不是从轮 ...
- C# Web Forms - Using jQuery FullCalendar
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- asp.net配置web.config支持jQuery.Uploadify插件上传大文件
配置web.config有两处地方需要配置,分别是集成模式和经典模式. 集成模式: <!--文件上传大小设置--> <httpRuntime requestValidationMod ...
- Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
- 使用JQuery的Ajax调用SOAP-XML Web Services（Call SOAP-XML Web Services With jQuery Ajax）（译+摘录）
假设有一个基于.Net的Web Service,其名称为SaveProduct POST /ProductService.asmx HTTP/1.1 Host: localhost Content-T ...
- java web面试技巧,数据库面试,java web轻量级开发面试教程
我最近看到一本比较好的讲java web方面面试的书,java web轻量级开发面试教程. 其中不仅用案例和视频讲述了Spring MVC,Hibernate, ORM等方面的技巧,而且还实际讲到了面 ...
随机推荐
- hdu 4407 Sum 容斥+当前离线
乞讨X-Y之间p素数,,典型的纳入和排除问题,列的求和运算总和的数,注意,第一项是最后一个项目数. 如果不改变到第一记录的答案,脱机处理,能保存查询,候,遇到一个操作1,就遍历前面的操作.把改动加上去 ...
- Leetcode 动态规划 Candy
本文senlie原版的,转载请保留此地址:http://blog.csdn.net/zhengsenlie Candy Total Accepted: 16494 Total Submissions: ...
- 百度CSND博客在搜索栏中显示图片
原先以为百度搜索结果有图片是能够人为控制的,结果发现并非这样. 近期百度搜索结果的每一个条目左側出现了小图片,这一变化能够说是极大满足了用户的体验,不用进入站点就提前直观的推断出站点内容是否是自己要找 ...
- JavaScript的类型、值和变量的总结
前言:JavaScript的数据类型分为两类:原始类型和对象类型.5种原始类型:数字.字符串.布尔值.null(空).undefined(未定义).对象是属性的集合,每个属性都由“名/值对”(值可以是 ...
- 使用 CodeIgniter 框架快速开发 PHP 应用(一)
原文:使用 CodeIgniter 框架快速开发 PHP 应用(一) 对 CodeIgniter 的介绍大多数PHPer都想写出运行状态良好的应用程序,而且希望尽可能做得简单且不费事.这篇文章是有关 ...
- POJ 1742 Coins (多重背包)
Coins Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 28448 Accepted: 9645 Descriptio ...
- JAVA转让JS功能
今天,在发展中使用js和Java互动.通常我们使用更多的是js转让Java方法.可以使用dwr.Ajax.jquery.突然发现Java转让js然后,我真的没见过,今天,互联网提供以下信息,顺便总结: ...
- Unity+NGUI打造网络图片异步加载和本地缓存工具(一)
我们已经开发了在移动终端中,异步网络图片被装入多,在unity其中尽管AssetBundle存在,通常第一个好游戏的资源,然后加载到现场,但也有很多地方可以使用异步网络加载图像以及其缓存机制. 我也写 ...
- oracle_根据ID(字符型)建立分区表
方案思路:有一张暴增的数据表(10亿级别),以后需求需要提高单条查询性能, 这个表有个唯一ID, 假设是UUID,采用区分首字母的方法,不同字母的数据入到不同的物理文件中. 第一步: 查找数据库服务器 ...
- POJ1201-Intervals(差动限制)
Intervals Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 20786 Accepted: 7866 Descri ...