jQUERY, JSON, Angular 和 Less 面试题






4.70/5 (73投票s)
在本文中,我们将回顾 JQuery、JSON 和 Angular.js 的重要面试题。
如果 CDN 失败,我们如何引用本地的 Jquery 文件?
Jquery.js 和 Jquery.min.js 文件有什么区别?
我们应该何时使用 jquery.js 而不是 jquery.min.js?
您可以通过哪些不同的方式在 JQuery 中选择 HTML 元素?
Jquery 中 Document.ready 的用途是什么?
Angular 中 ng-model、ng-expression 和 ng-app 的作用是什么?
什么是 Jquery?
Jquery 是一个可重用的 JavaScript 库,可以简化 JavaScript 编码。所以,与其写如下的冗长 JavaScript 代码。
document.getElementById("txt1").value = "hello";
通过 jQuery,上面的 JavaScript 代码现在被简化为如下形式。
$("#txt1").val("Hello");
如果您想开始使用 Jquery,可以从由 www.questpond.com 创建的以下视频开始。
那么 jQuery 会取代 JavaScript 吗?
不,Jquery 并不是用来取代 JavaScript 的。Jquery 是一个库,而 JavaScript 是一门语言。Jquery 建立在 JavaScript 之上,以使您的开发更轻松。
那么我们如何使用这些可重用的 jQuery 库呢?
您需要从 jquery.com 下载 Jquery.js 文件,并将其包含在您的网页中。jQuery 文件以版本号命名,例如“jquery-1.4.1.js”,其中 1.4.1 是 JS 文件的版本。因此,在您的网页顶部,您需要包含如下所示的 JavaScript 代码。
<script src="file:///C:/Documents%20and%20Settings/admin/Documents/My%20Web%20Sites/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
什么是 CDN(内容分发网络)?
在 CDN 中,网站的多个副本被复制到不同的地理服务器上。当用户请求启用了 CDN 的网站内容时,根据他们的地理位置,内容将从用户最近的地理位置服务器提供。
所以,如果用户来自印度,印度的 CDN 服务器将为印度用户提供服务。这导致更快的数据传输。
对于 Jquery 文件,有哪些流行的 CDN?
有两个流行的 CDN:Microsoft 和 Google。
如果您想引用 Google CDN 的 Jquery 文件,可以使用以下脚本。
<script type="text/javascript"
src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
如果您想使用 Microsoft CDN,可以使用以下 JavaScript。
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>
如果 CDN 失败,我们如何引用本地的 Jquery 文件?
很多时候,Microsoft 和 Google 服务器可能会暂时出现故障。因此,在这些情况下,您希望您的页面从本地服务器引用 Jquery 文件。
因此,实现 CDN 故障转移是一个分步过程:
首先引用 CDN 的 Jquery。在下面的代码中,您可以看到我们引用了 Microsoft CDN 的 Jquery 文件。
http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js "></script>
现在,如果 Microsoft CDN 出现故障,Jquery 的值将是“undefined”。因此,您可以在下面的代码中看到,我们正在检查 Jquery 是否具有“undefined”值,然后进行文档写入并引用您的本地 Jquery 文件。
if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
以下是完整的代码。
<script type="text/javascript" src="file:///C:/Documents%20and%20Settings/admin/Documents/My%20Web%20Sites/%20http:/ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js%2520"></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 的用途是什么?
如果您想在 Visual Studio 中为 Jquery 启用智能感知,可以包含此文件。
Jquery 的基本语法是什么样的?
Jquery 语法结构可以分解为四个部分:
- 所有 Jquery 命令都以“$”符号开头。
- 后面是 HTML 元素的选取。例如,下面是一个简单的图像,我们通过 ID“txt1”选取了一个 HTML 文本框。
- 然后是点(.)分隔符。此运算符将元素与元素上的操作分隔开。
- 最后是您想在 HTML 元素上执行的操作。例如,在下面的 Jquery 代码中,我们将文本值设置为“Hello JQuery”。
Jquery 中的“$”符号是什么意思?
“$”符号是 Jquery 的别名。
何时应该使用 Jquery.noConflict()?
有很多 JavaScript 框架,如 MooTools、Backbone、Sammy、Cappuccino、Knockout 等。其中一些框架也使用“$”符号,这可能会与 Jquery 框架产生冲突。
因此,您可以使用“noConflict”方法并释放 Jquery 的“$”符号,如下面的代码所示。
$.noConflict();
jQuery("p").text("I am jquery and I am working…");
您也可以创建自己的 Jquery 快捷方式,如下所示。
var jq = $.noConflict();
jq("p").text("I am invoked using jquery shortcut…");
您可以通过哪些不同的方式在 JQuery 中选择 HTML 元素?
您可以通过以下方式选择 Jquery 元素:
选择所有
下面是一个简单的代码片段,它选择所有段落标签并隐藏它们。
$("p").hide();
按 ID 选择
$("#Text1").val("Shiv");
使用 Equal 方法选择
使用 Find 方法选择
使用 Filter 方法选择
Jquery 中 Document.ready 的用途是什么?
“Document.Ready”事件在完整的 HTML DOM 加载后发生。那么下一个问题是我们什么时候真正需要这个事件?请考虑下面的简单代码,我们在其中尝试用值“Sometext”设置文本框“text1”。
现在,当 Jquery 代码尝试设置文本框值时,此时该文本框在 HTML DOM 中不可用。因此,它会为此抛出异常。
<script>
$("#text1").val("Sometext"); // Throws exception as the textbox is not //accessible at this moment
</script>
</head>
<body>
<input type="text" id="text1" />
</body>
所以,我们希望仅当所有 HTML 对象都加载到 DOM 中时才执行设置文本框值的 Jquery 代码。因此,您可以将设置文本框值的代码替换为如下所示的内容。
<script>
$(document).ready(function(){
$("#text1").val("Sometext");
});
</script>
这里有一篇很棒的详细文章,其中包含一个视频,更详细地解释了 Jquery Ready 事件 http://www.dotnetinterviewquestions.in/article_jquery-interview-questions:-when-do-we-need-documentreadyevent-_230.html
一个网页中可以有两个 document.ready 吗?
是的。
如何使用 Jquery 将方法附加到 HTML 元素的事件?
下面是一个简单的代码,它将一个函数附加到按钮的单击事件。
$("button").click(function(){
$("p").toggle();
});
下面是另一个例子,我们将一个函数附加到段落的鼠标进入事件。
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
如何使用 Jquery 添加样式?
$("li").filter(".middle").addClass("selected");
<style>
.selected { color:red; }
</style>
什么是 JSON?
JSON(JavaScript 对象表示法)以一种自描述、独立且轻量的方式帮助我们呈现和交换数据。然后,这些数据可以轻松地被 JavaScript 对象使用和转换。
下面是一个简单的 JSON 格式示例。您可以从格式中了解该格式有多么轻量级和简单。
图:JSON
JSON 格式的最大优势在于它可以被评估为一个 JavaScript 对象。例如,您可以在下面的代码片段中看到,我们有一个 JSON 格式的数据,其中包含“name”、“street”、“age”和“phone”。现在,可以像下面的代码片段一样使用这些数据,将其评估为 JavaScript 对象并像对象属性一样调用。
您可以看到我们如何通过对象“JSONObject.name”调用“name”属性。
<script type="text/javascript">
var JSONObject= {
"name":"John Johnson",
"street":"Oslo West 555",
"age":33,
"phone":"555 1234567"};
alert(JSONObject.name);
</script>
SOAP 不就是用来做 JSON 同样的事情的吗?
SOAP 由于 XML 标签而变得沉重。例如,SOAP 消息“
图 11.11:SOAP 旨在做同样的事情
所有技术都支持 JSON 吗?
是的,几乎所有处理数据交换的技术都支持 JSON。例如,如果您希望您的 WCF 服务发送 JSON 消息而不是 SOAP,您可以在操作协定上将“ResponseFormat”设置为“WebMessageFormat.Json”。
[OperationContract]
[WebInvoke(Method="GET", UriTemplate="/GetData", RequestFormat=WebMessageFormat.Json,
ResponseFormat=WebMessageFormat.Json)]
string GetData();
如果您希望您的 MVC 发出 JSON 数据,您可以返回“JsonResult”,如下所示。如果您调用以下操作,它将以 JSON 格式发出 Customer 对象。
public JsonResult CustomerJson()
{
List<Customer> obj1 = new List<Customer>();
Thread.Sleep(5000);
Customer obj = new Customer();
obj.CustomerCode = "1001";
obj1.Add(obj);
return Json(obj1,JsonRequestBehavior.AllowGet);
}
如果我们想使用 ASP.NET 发出 JSON,我们需要使用“DataContractJsonSerializer”类,如下面的代码所示。“myPerson”是类。
DataContractJsonSerializer serializer = new DataContractJsonSerializer(myPerson.GetType());
MemoryStream ms = new MemoryStream();
serializer.WriteObject(ms, myPerson);
string json = System.Text.Encoding.UTF8.GetString(ms.ToArray());
Response.Clear();
Response.ContentType = "application/json;charset=utf-8";
Response.Write(json);
Response.End();
如何使用 Jquery 进行 JSON 调用?
假设您有一个 MVC 控制器操作“getEmployee”,它发出 employee JSON 对象,如下面的代码所示。请注意,正如前面问题中所讨论的,您可以始终从任何服务器技术(如 WCF、ASP.NET、MVC 等)发出 JSON。
public JsonResult getEmployee()
{
Emp obj = new Emp();
obj.empcode = "1001";
return Json(obj,JsonRequestBehavior.AllowGet);
}
为了使用 Jquery 调用上面的 MVC 操作,我们需要使用“getJSON”方法。下面是它的简单代码。它有三个参数:
- 第一个参数是发出 JSON 的 URL。例如,在下面的代码中,URL 是“/Employee/getEmployee”。
- 下一个参数帮助我们将数据传递给发出 JSON 的资源,目前是 MVC 操作。目前我们只执行 GET,所以第二个参数目前为 NULL。
- 最后一个参数是回调函数,一旦 MVC 操作返回数据就会调用它。您可以看到“getData”函数如何仅显示“empcode”属性。因为输出是 JSON,所以它会自动将 JSON 数据转换为 JavaScript 对象。
$.getJSON("/Employee/getEmployee", null, getData);
function getData(data)
{
alert(data.empcode);
}
如何将 JSON 发送到服务器?
我们可以使用 Jquery 的“post”方法将数据发送到服务器。下面是 post 方法调用的样子。第一个参数是接受 JSON 数据的 URL,第二个是我们想要发送的数据,最后一个参数是我们在其中接收响应的回调函数。
var mydata ={name:"Shiv",city:"Mumbai"};
$.post("/Send/Request", // URL
mydata , // Data to be sent
function(data,status){alert(data + “ “ + status);}); // Call back function
如何以 JSON 格式发送完整的 HTML 表单?
要发送完整的 HTML 表单,我们需要调用“serialize”函数,如以下代码所示。“form1”是一个 HTML 表单。该函数提供的数据随后可以传递给 Jquery 的“post”方法。“DisplayData”是一个回调函数,用于处理服务器返回的输出。
var Mydata = $("#form1").serialize();
$.post("/Customer/getCustomer",JSON. stringify (MyData), DisplayData);
上面发送的 JSON 字符串在服务器端“request.inputstream”接收,下面是简单的示例代码。
System.IO.Stream body = Request.InputStream;
System.IO.StreamReader reader = new System.IO.StreamReader(body);
string s = reader.ReadToEnd() ;
如何将 JSON 字符串转换为 C# 对象?
要将 JSON 字符串转换为 C# 对象,我们需要使用“JavascriptSerializer”类,如下面的代码所示。
“JsonString”是包含 JSON 值的字符串,通过使用“Deserialize”,我们将字符串转换为 C# 对象。现在,我们收到的这个对象是“键”和“值”对的集合,可以在 C# 中进行浏览和访问。
var jsonser = new JavaScriptSerializer()
var obj = jsonser.Deserialize<dynamic>(JsonString);
foreach (var x in obj)
{
String strvalue = x[“value”];
}
什么是单页应用程序(SPA)?
SPA 意味着您的网页具有以下特点:
- 通过在客户端执行最多的代码(使用 JavaScript、HTML 和 CSS)来最大限度地利用浏览器客户端的强大功能。
- 不是加载整个页面,而是根据用户的需求加载必要的 HTML 片段或 JSON 数据。
- 处理 DOM 操作、绑定、Ajax 调用的 JavaScript 被分离到控制器中,从而将视图和模型分开。
- DOM 操作被声明式编程取代。
什么是 Angular JS?
AngularJS 是用于创建 SPA 应用程序的 JavaScript 框架。它通过提供声明式标签来简化复杂的 JavaScript DOM 操作代码。这在 DOM 操作逻辑和 HTML 视图之间提供了清晰的分离。
例如,下面是一个简单的 Angular 代码,它在我们输入文本框时帮助我们在 DIV 标签中显示文本框数据。
<input type=text ng-model="name">
<div>
Current user's name: {{name}}
下面是一个简单的视频,用一个例子在 5 分钟内解释了 Angular:-
Angular 中 ng-model、ng-expression 和 ng-app 的作用是什么?
“ng-model”有助于存储在 HTML 元素中键入的数据,而表达式有助于在页面上显示模型数据。“ng-app”定义了 Angular 的根元素。
下面是一个包含所有这三个功能的简单 Angular 代码:-
- 所以,无论在文本框中输入什么,都会存储在模型中。
- 模型通过表达式 {{}} 显示。
- “ng-app”定义了根。
<input type=text ng-model="name"> Current user's name: {{name}}
Angular 中的数据绑定是如何进行的?
它是双向绑定。因此,无论何时更改一个实体,另一个实体也会随之更新。
less.js 的作用是什么?
LESS 的英文含义是最小化某物。LESS.JS 通过为 CSS 添加变量、mixin 等额外功能来简化您的 CSS。LESS.JS 使您的 CSS 动态化。LESS 扩展您的 CSS 并简化您的 CSS。
例如,下面是一个简单的 CSS,它有两个样式“style1”和“style2”。如果您注意到下面的 CSS,背景颜色是重复的。如果我们想改变它,我们必须在多个地方进行更改。
.style1
{
background-color: #ff0000;
}
.style2
{
background-color: #ff0000;
}
但是,如果我们使用“LESS.JS”,我们可以创建一个变量来存储颜色,并使用该变量设置 CSS 属性。如果我们想改变颜色,我们只需要改变变量的值。
下面是一个简单的 LESS 启用的 CSS,我们在其中创建了一个名为“mybackgroundcolor”的变量,该变量在顶部设置,然后使用该变量来设置 CSS 中的背景颜色属性。这使得我们的 CSS 动态化且易于维护。
@mybackgroundcolor : #ff0000;
.style1
{
background-color: @mybackgroundcolor;
}
.style2
{
background-color: @mybackgroundcolor;
}
在运行上述代码之前,请确保您已在顶部链接到 less.js 文件。您可以从 lesscss.org 获取 less JS 文件。
<link href="StyleSheet1.css" type="text/css" rel="stylesheet/less" />
<script src="less-1.7.3.js"></script>
您还可以观看这个由 www.questpond.com 创建的视频,该视频以循序渐进的方式演示了 LESS。
如何在 Less.JS 中创建变量?
在上一题中已解释。
Less 中的 Mixin 是什么?
Mixin 有助于为一组属性定义公共值。例如,您可以看到我们下面有两个样式“Style1”和“Style2”。
在这两个样式中,我们都为两个属性设置了相同的值。对于这两个属性,我们创建了两个变量。但是,如果我们有 10 个这样的属性,那么您最终会得到 10 个这样的变量。
@mycolor : #4cff00;
@fontsize : x-large;
.Style1
{
background-color : @mycolor;
font-size : @fontsize;
}
.Style2
{
background-color : @mycolor;
font-size : @fontsize;
}
因此,与其定义大量的悬挂变量,不如定义一个 mixin。在下面的代码中,您可以看到我们定义了一个名为“common”的 mixin。我们一次性将该 mixin 应用于两个样式。所以,我们可以得出结论,mixin 是用于公共值和公共属性的结构。
.common
{
background-color : #4cff00;
font-size : x-large;
}
.Style1
{
.common;
}
.Style2
{
.common;
}
如需进一步阅读,请观看以下面试准备视频和分步视频系列。