jQuery（jQuery）

优质

小牛编辑

138浏览

2023-12-01

jQuery是一个快速而简洁的库/框架，使用由John Resig在2006年创建的JavaScript构建，其中有一个很好的座右铭 - 写得少，做得更多。

jQuery简化了HTML文档遍历，事件处理，动画和Ajax交互，以实现快速Web开发。访问我们的jQuery教程，了解 jQuery。

我们也可以使用CoffeeScript来处理jQuery 。本章将教您如何使用CoffeeScript来使用jQuery。

使用CoffeeScript和jQuery

虽然jQuery解决了浏览器问题，但将它与JavaScript一起使用会产生一些不好的部分，这有点问题。使用CoffeeScript而不是JavaScript是一个更好的主意。

在使用带有CoffeeScript的jQuery转换时，请记住以下几点。

$符号表示我们的应用程序中的jQuery代码。使用它将jQuery代码与脚本语言分开，如下所示。

$(document).ready

除了在使用参数调用函数和处理模糊代码时，不需要在CoffeeScript中使用大括号，我们必须用箭头标记替换函数定义function() ，如下所示。

$(document).ready ->

删除不必要的return语句，因为CoffeeScript隐式返回函数的尾部语句。

例子 (Example)

以下是一个JavaScript代码，其中

元素正在被点击的元素之前插入 -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div></div>' );
            });
         });
      </script>
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

现在，我们可以将上面的代码转换为CoffeeScript代码，如下所示

 <html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="http://coffeescript.org/extras/coffee-script.js"></script>
      <script type="text/coffeescript">
        $(document).ready ->
          $('div').click ->
            $(this).before '<div></div>'
            return
          return
      </script>
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

执行时，这将为您提供以下输出。

什么是回调？

回调是函数的异步等价物。在给定任务完成时调用回调函数。 Node大量使用回调。编写Node的所有API都是为了支持回调。

例如，读取文件的函数可以开始读取文件并立即将控制返回到执行环境，以便可以执行下一条指令。一旦文件I/O完成，它将在传递回调函数时调用回调函数，该文件的内容作为参数。因此没有阻塞或等待文件I/O. 这使得Node.js具有高度可扩展性，因为它可以处理大量请求而无需等待任何函数返回结果。

阻止代码示例

创建一个名为input.txt的文本文件，其中包含以下内容

xnip is giving self learning content 
to teach the world in simple and easy way!!!!!

创建一个名为main.js的js文件，其中包含以下代码 -

var fs = require("fs");  
var data = fs.readFileSync('input.txt');  
console.log(data.toString()); 
console.log("Program Ended");

现在运行main.js来查看结果 -

$ node main.js

验证输出。

xnip is giving self learning content 
to teach the world in simple and easy way!!!!! 
Program Ended

非阻塞代码示例

创建一个名为input.txt的文本文件，其中包含以下内容

xnip is giving self learning content 
to teach the world in simple and easy way!!!!!

更新main.js文件以获得以下代码 -

var fs = require("fs");  
fs.readFile('input.txt', function (err, data) { 
  if (err) return console.error(err); 
    console.log(data.toString()); 
}); 
console.log("Program Ended");

现在运行main.js来查看结果 -

$ node main.js

验证输出。

Program Ended 
xnip is giving self learning content 
to teach the world in simple and easy way!!!!!

这两个例子解释了blocking and non-blocking calls的概念。第一个例子显示程序阻塞直到它读取文件，然后只是，它继续结束程序，而在第二个例子中，程序不等待文件读取，但它只是继续打印“程序结束”。

因此，阻塞程序按顺序执行。从编程的角度来看，它更容易实现逻辑，但非阻塞程序不按顺序执行。如果程序需要使用任何要处理的数据，则应将其保存在同一块中以使其顺序执行。