jQuery入门看这一篇就够了！超详细！（二）
“这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
先变成自己喜欢的模样，
再去遇见无需取悦的人。
– 2023.06.12 –
上期给大家讲解了jQuery的基础概念和核心函数中选择器的使用，并且举了非常多的例子来说明各种选择器的使用，大家有没有跟着一起练习呢?今天小编将继续给大家讲解jQuery的相关内容。
1、工具
$.each方法
方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length – 1，其他对象通过其属性名进行迭代。
需求描述：给定一个数组，使用$.each方法进行遍历输出
var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
$.each(arr, function (index, element) {
console.log(index, element);
});
需求描述：给定一个对象，使用$.each方法进行遍历输出
var obj = {
name: \’Tom\’,
age: 28,
speak: function () {}
};
$.each(obj, function (key, value) {
console.log(key, value);
});
方法描述：去掉字符串起始和结尾的空格。
需求描述：给定一个字符串，去掉该字符串的前后空格
var str = \’ hello \’;
console.log($.trim(str));
方法描述：确定JavaScript 对象的类型。
需求描述：给定一个对象，输出该对象的类型
var str = \’ hello \’;
console.log($.type(str));
$.isArray方法
方法描述：用来测试指定对象是否为一个数组。
需求描述：给定一个对象，输出该对象是不是数组类型
var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
console.log($.isArray(arr));
方法描述：用来测试指定对象是否为一个函数。
需求描述：给定一个对象，输出该对象是不是函数类型
var fun = function () {
console.log(\”hello\”);
};
console.log($.isFunction(fun));
方法描述：执行一个异步的HTTP的请求。
需求描述：执行一个异步的HTTP GET请求，从服务器加载数据。
$.ajax({
url: \’/user/login\’,
type: \’get\’,
data: {
username: \’zhangsan\’,
password: \’123456\’
},
dataType: \’text\’,
success: function (response) {
alert(response);
},
error: function (response) {
alert(response);
}
});
需求描述：执行一个异步的HTTP POST请求，从服务器加载数据。
$.ajax({
url: \’/user/login\’,
type: \’post\’,
data: {
username: \’zhangsan\’,
password: \’123456\’
},
dataType: \’text\’,
success: function (response) {
alert(response);
},
error: function (response) {
alert(response);
}
});
方法描述：使用一个HTTP GET请求从服务器加载数据。
这是一个ajax功能的缩写，这相当于:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.get(\’/user/login\’, {username: \’zhangsan\’, password: \’123456\’}, function (response) {
alert(response);
});
方法描述：使用一个HTTP POST请求从服务器加载数据。
这是一个ajax功能的缩写，这相当于:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.post(\’/user/login\’, {username: \’zhangsan\’, password: \’123456\’}, function (response) {
alert(response);
});
方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。
需求描述：设置p标签的title属性为”我是attr修改后的段落标题“
<p id=\”content\” title=\”我是段落标题\”>我是段落</p>
$(\’#content\’).attr(\’title\’, \’我是attr修改后的段落标题\’);
需求描述：读取p标签的title属性并输出
<p id=\”content\” title=\”我是段落标题\”>我是段落</p>
console.log($(\’#content\’).attr(\’title\’));
方法描述：专门操作属性值为布尔值的属性，该方法读写一体。
需求描述：设置复选框的状态为选中状态
<input type=\”checkbox\”>复选框
$(\’:checkbox\’).prop(\’checked\’, \’true\’);
<input type=\”checkbox\” checked>复选框
console.log($(\’:checkbox\’).prop(\’checked\’));
方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。
需求描述：设置文本框的值为”123456“
<input type=\”text\”>
$(\’:text\’).val(\’123456\’);
需求描述：读取文本框的值并输出
<input type=\”text\” value=\”123456\”>
console.log($(\’:text\’).val());
方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。
需求描述：设置div的背景颜色为红色，字体颜色为白色
<div>我是div</div>
$(\’div\’).css({
\’background\’: \’red\’,
\’color\’: \’white\’
});
需求描述：获取div的背景颜色和字体颜色并输出
<div style=\”background: red;color: white\”>我是div</div>
console.log($(\’div\’).css(\’background\’));
console.log($(\’div\’).css(\’color\’));
方法描述：为每个匹配的元素添加指定的样式类名。
需求描述：为所有的li添加样式”beauty“
.beauty {
font-weight: bold;
font-size: 18px;
color: coral;
}
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
$(\’li\’).addClass(\’beauty\’);
方法描述：移除集合中每个匹配元素上一个，多个或全部样式。
需求描述：为所有的li移除样式”beauty“
.beauty {
font-weight: bold;
font-size: 18px;
color: coral;
}
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
$(\’li\’).removeClass(\’beauty\’);
方法描述：确定任何一个匹配元素是否有被分配给定的样式类。
需求描述：判断p标签是否包含”beauty“的样式
.beauty {
font-weight: bold;
font-size: 18px;
color: coral;
}
<p></p>
console.log($(\’p\’).hasClass(\’beauty\’));
方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在。
注意：如果存在（不存在）就删除（添加）一个样式类
需求描述：当单击按钮的时候，隐藏div，再次单击按钮的时候，显示div
.hide {
width: 100px;
height: 100px;
display: none;
}
<button>按钮</button>
<div>我是div</div>
$(\’button\’).click(function () {
$(\’div\’).toggleClass(\’hide\’);
});
3、尺寸
width()
方法描述：获取内容元素width的值。
height()
方法描述：获取内容元素height的值。
innerWidth()
方法描述：获取内容元素width+padding的值。
innerHeight()
方法描述：获取内容元素height+padding的值。
outerWidth()
方法描述：outerWidth(false/true)，获取内容元素width+padding+border的值，如果是true再加上margin的值。
outerHeight()
方法描述：outerHeight(false/true)，获取内容元素height+padding+border的值，如果是true再加上margin的值。
综合演示
需求描述：创建按一个div，获取以上六种值
.box {
margin: 30px;
padding: 20px;
border: 10px;
width: 100px;
height: 100px;
background: coral;
}
<div class=\”box\”></div>
var $box = $(\’.box\’);
console.log($box.width(), $box.height());// 100 100
console.log($box.innerWidth(), $box.innerHeight());// 140 140
console.log($box.outerWidth(), $box.outerHeight());// 160 160
console.log($box.outerWidth(true), $box.outerHeight(true));// 220 220
方法描述：相对页面左上角的坐标。
需求描述：获取div相对页面左上角的坐标。
.box {
width: 100px;
height: 100px;
background: coral;
}
<div class=\”box\”></div>
var offset = $(\’.box\’).offset();
console.log(offset.left, offset.top);
方法描述：相对于父元素左上角的坐标。
需求描述：获取div相对于父元素左上角的坐标
.box-container {
width: 300px;
height: 300px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box {
width: 100px;
height: 100px;
background: coral;
position: absolute;
left: 20px;
top: 20px;
}
<div class=\”box-container\”>
<div class=\”box\”></div>
</div>
var offset = $(\’.box\’).position();
console.log(offset.left, offset.top);
scrollLeft()
方法描述：读取/设置滚动条的X坐标，该方法读写合一。
读取页面滚动条的Y坐标(兼容chrome和IE)
var scrollLeft = $(document.body).scrollLeft()+$(document.documentElement).scrollLeft();
设置页面滚动条滚动到指定位置(兼容chrome和IE)
$(\’body,html\’).scrollLeft(60);
需求描述：设置页面的宽度为2000px，设置滚动条的X轴坐标为300px，要求兼容各种浏览器
$(\’body\’).css(\’width\’, \’2000px\’);
$(\’html,body\’).scrollLeft(300);
方法描述：读取/设置滚动条的Y坐标，该方法读写合一。
读取页面滚动条的Y坐标(兼容chrome和IE)
var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();
设置页面滚动条滚动到指定位置(兼容chrome和IE)
$(\’body,html\’).scrollTop(60);
需求描述：设置页面的高度为2000px，设置滚动条的Y轴坐标为300px，要求兼容各种浏览器
$(\’body\’).css(\’height\’, \’2000px\’);
$(\’html,body\’).scrollTop(300);
方法描述：设置/获取元素的文本内容，该方法读写合一。
需求描述：设置p段落标签的内容为“我是段落”
<p></p>
$(\’p\’).text(\’我是段落\’);
需求描述：获取p段落标签的内容并输出
<p>我是段落</p>
console.log($(\’p\’).text());
方法描述：设置/获取元素的html内容，该方法读写合一。
需求描述：设置ul列表标签的li列表项
<ul></ul>
var li = \'<li>我是列表项</li>\’;
$(\’ul\’).html(li);
需求描述：获取ul列表中的列表项并输出
<ul><li>我是列表项</li></ul>
console.log($(\’ul\’).html());
方法描述：向当前匹配的所有元素内部的最后面插入指定内容。
需求描述：为当前的ul向后添加一个列表项
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
</ul>
var last = \'<li>我是最后一个列表项</li>\’;
$(\’ul\’).append(last);
方法描述：将指定的内容追加到当前匹配的所有元素的最后面。
需求描述：为当前的ul向后添加一个列表项
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
</ul>
var last = \'<li>我是最后一个列表项</li>\’;
$(last).appendTo($(\’ul\’));
方法描述：向当前匹配的所有元素内部的最前面插入指定内容。
需求描述：为当前的ul向前添加一个列表项
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
</ul>
var first = \'<li>我是第一个列表项</li>\’;
$(\’ul\’).prepend(first);
方法描述：将指定的内容追加到当前匹配的所有元素的最前面。
需求描述：为当前的ul向前添加一个列表项
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
</ul>
var first = \'<li>我是第一个列表项</li>\’;
$(first).prependTo($(\’ul\’));
方法描述：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
需求描述：在div的后边插入一个段落
<div>我是div</div>
var after = \'<p>我是段落</p>\’;
$(\’div\’).after(after);
方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。
需求描述：在div的前边插入一个段落
<div>我是div</div>
var before = \'<p>我是段落</p>\’;
$(\’div\’).before(before);
insertAfter()
方法描述：.after()和.insertAfter() 实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。 对于 .after()，选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter()，刚好相反，内容在方法前面，它将被放在参数里元素的后面。
需求描述：在div的后边插入一个段落
<div>我是div</div>
var content = \'<p>我是段落</p>\’;
$(content).insertAfter($(\’div\’));
insertBefore()
方法描述：.before()和.insertBefore()实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。 对于 .before()，选择表达式在函数前面，参数是将要插入的内容。对于 .insertBefore()，刚好相反，内容在方法前面，它将被放在参数里元素的前面。
需求描述：在div的前边插入一个段落
<div>我是div</div>
var content = \'<p>我是段落</p>\’;
$(content).insertBefore($(\’div\’));
方法描述：删除所有匹配元素的子元素。
需求描述：将ul列表下所有的子节点全部移除
<ul>
<li>列表项1</li>
<p>我是段落1</p>
<li>列表项2</li>
<p>我是段落2</p>
<li>列表项3</li>
</ul>
$(\’ul\’).empty();
方法描述：删除所有匹配的元素。
注意：同时移除元素上的事件及 jQuery 数据
需求描述：将ul列表下所有的p子节点全部移除
<ul>
<li>列表项1</li>
<p>我是段落1</p>
<li>列表项2</li>
<p>我是段落2</p>
<li>列表项3</li>
</ul>
$(\’ul>p\’).remove();
方法介绍：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
需求描述：将ul下的所有li替换为p标签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
$(\’ul>li\’).replaceWith(\'<p>我是段落</p>\’);
方法介绍：.replaceAll()和.replaceWith()功能类似，但是目标和源相反。
需求描述：将ul下的所有li替换为p标签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
$(\'<p>我是段落</p>\’).replaceAll($(\’ul>li\’));
方法描述：创建一个匹配的元素集合的深度拷贝副本。如果传入一个true，则表示是否会复制元素上的事件处理函数，从jQuery 1.4开始，元素数据也会被复制。
需求描述：为ul列表创建一个深克隆并追加到body后
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
var ul = $(\’#ul\’).clone();
$(\’body\’).append(ul);
方法描述：获取集合中每个匹配元素的父元素，可以提供一个可选的选择器来进行筛选。
需求描述：输出id为two的li的父元素
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id=\”two\”>列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
console.log($(\’#two\’).parent()[0]);
方法描述：获取集合中每个匹配元素的子元素，可以提供一个可选的选择器来进行筛选。
需求描述：输出ul下的所有子元素
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id=\”two\”>列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
var childrens = $(\’ul\’).children();
for (var i = 0; i < childrens.length; i++) {
console.log(childrens[i]);
}
方法描述：获取集合中每个匹配元素紧邻的前一个兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的前一个兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id=\”two\”>列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
console.log($(\’#two\’).prev()[0]);
方法描述：获得集合中每个匹配元素的所有前面的兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的前边所有的兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id=\”two\”>列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
var prevs = $(\’#two\’).prevAll();
for (var i = 0; i < prevs.length; i++) {
console.log(prevs[i]);
}
方法描述：获取集合中每个匹配元素紧邻的后一个兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的后一个兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id=\”two\”>列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
console.log($(\’#two\’).next()[0]);
方法描述：获得集合中每个匹配元素的所有后面的兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的后边所有的兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id=\”two\”>列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
var nexts = $(\’#two\’).nextAll();
for (var i = 0; i < nexts.length; i++) {
console.log(nexts[i]);
}
方法描述：获得集合中每个匹配元素的兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的所有兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id=\”two\”>列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
var siblings = $(\’#two\’).siblings();
for (var i = 0; i < siblings.length; i++) {
console.log(siblings[i]);
}
以上jQuery核心函数中工具和Ajax方法以及jQuery核心对象的属性和基本的操作的相关内容，内容比较多，下期接着更新遍历、事件和动画等内容，敬请期待哦！
今天就先讲到这里了，更多Java基础知识持续更新中，欢迎一起学Java！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
初学者如何学习Javascript？
以下是我的学习经历，希望给未入门的师弟师妹些许的指导，让他们少走些弯路，哪怕他们因此得到只是一点点启发，我也会感到欣慰。
我2013年6月毕业，同年3月开始认真学习JavaScript，而在此之前我相对熟悉些VB.NET，Java，C++什么的。
但我学习的办法其实比较笨，只是因为自知看书比较快，所以就大量查阅有关博客以及JS书籍/电子文档。从《锋利的jQuery》入门，豆瓣8分以上的JS有关的图书，10本里面我大概读过7~8本。 由于JS的语言特性使得你很容易进行横向学习(现在想想，也是我年tai少sha无bi知，C++没学好的缘故)，因此快速拓展JS要素时，我还顺手点了下Python和Lua的技能书。
当然，在阅读这些书的过程中我都是带着强烈目的去读的(换言之，读一本书之前，你要知道你为什么读这本书，你需要解决的问题是什么)，同时，配合平时在工作中持续的Coding。
有些内容或许因为翻译，或许因为概念本身晦涩，未必很好理解，但我相信，Coding 千遍，其义自现。各位从别的语言平台过来的程序员应该不会有问题，但倘若是初学编程，请慢慢读，慢慢学，打好基础再谋求起飞。
比如完整Follow example code 写一遍，运行一遍，思考一下代码原理/执行的过程/解决的问题，然后试试改几个参数再Run一遍，接着再考虑看看现实的环境中，能找到符合这段代码目的的用例吗？
如果非要书单的话，我推荐以下几本(按推荐的阅读顺序排序，纯JS方向)：
这个至少读两遍以上。
很薄的一本书，但告诉了你一些工程的东西，来提高一门不怎么好维护的语言的可维护度。
老道这人比较极端，但无论如何这本书入门还是可以一看的，至于有些观点采纳与否可以之后再思索。
异步几乎是JavaScript世界里最重要的执行机制之一了，也不厚，很容易读完，但可以反复咀嚼一下。
P.S：回调这个异步模型虽说粗糙是粗糙了点，但同样也朴素嘛~~。ES6 yield穿来穿去，真要弄清楚执行流程，还是得画两张图才能看明白的。
Node.js方向，相对深入的一本书。而Byvoid那本一来比较简单，二来Express的版本已经超过他示例代码版本很多了，再版的话还是挺推荐作为Node.js入门读物的。
一本偏实践的书，看了这本书之后再接触Angular/Backbone什么的会开阔很多。
这本刚出版不久，Github上You dont know JS 系列非常精彩，但远不是一本入门书，请有了实践经验之后再读，用来巩固知识点非常好。
最后，如果苦于手边没有可以练习的代码，我推荐这个网站，有效帮助熟悉各种JS函数/Pattern/ES6 Features：
至于练手的项目，我觉得可以尝试而且自有裨益，当然一开始不一定能真的就顺利的实现出来，但罗马也不是一天建成的。用代码解决问题永远是学习编程的最好途径。
最后的最后，仍然要送上一句话： 知行合一 。
大家如果对编程感兴趣，想了解更多的编程知识，解决编程问题，我们这里有java高手，C++/C高手，windows/Linux高手，android/ios高手，请大家关注我的微信公众号：程序员互动联盟或者coder_online
小白如何快速入门JavaScript？6分钟带你看懂快速学习的六大步骤
JavaScript（通常缩写为JS）是一种解释型、面向对象、多范式的高级编程语言。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。
JavaScript是世界上最流行的脚本语言，因为它很容易上手，而且学习到它的精髓之后还可以编写高质量的代码，这就是我推荐给初学者学习的主要原因。今天就带大家来学习JavaScript。这是当年我学习JavaScript的六大步骤，希望对你也有帮助：
1.学习JavaScript基础语法：
古人常道：“万丈高楼平地起”，意思大概是再高的大厦都要从平地开始修建，学习JavaScript也是一样，想要学好它就一定要把基础先打牢，学习JS的第一步是JavaScript基础语法。
首先，你要了解async和defer之间的区别，然后，深入学习代码语法知识，例如变量，数据类型，循环和条件语句，函数，匿名函数，闭包，阵列和关联阵列，事件，正则表达式，promises。
注意语法顺序一定要准确！上述举例如果有遗漏的，大家可以在评论区留言。此外，我个人推荐你学习如何使用Chrome DevTools调试，因为Chrome DevTool是远程调试JS最好的工具。
2.学习面向对象编程：
当你具备一定的JavaScript基础语法后，你应该转向学习面向对象编程（OOPs）。OOPs是JS和其他编程语言中最重要的概念。JS中的OOPs是基于原型继承链上运行的，不像Java或C++是基于对象或类继承。
然而，关于元数据，你可以在学习了OOPs之后再转到学习元数据编程。虽然元数据很好学，但它并不是JS中最重要的部分。我相信，你可不会喜欢JS带来的意外“惊喜”。
3.学习测试QA：
测试代码和调试JS一样重要！你可能听说过TDD(测试驱动开发)或BDD(行为驱动开发)这样的词，但到底是什么意思呢？简而言之，TDD是指写一个未通过的测试用例，然后让测试通过，最后重构。
而BDD则是根据业务，编写具体的例子和自动化的测试，通过探索，发现，定义，最后推出软件所需的行为。BDD和TDD之间没有本质的区别。把它们组合在一起的是，它们都需要一群人，指定软件在执行之前应该如何协同行动。
4.学习jQuery：
jQuery是一套跨浏览器的JavaScript库，它的特点是动态性和互动性。它使用起来十分方便，就jquery本身而言，你经常会遇到如何将AJAX与jQuery整合的问题。AJAX是什么？举个例子来说吧，
「当你在百度浏览器中输入一个关键词，不用刷新便可得到关于词条的一些内容，这就是AJAX」
AJAX是Asynchronous JS and XML的缩写，它主要处理的是与HTML和CSS不同步的请求而产生的问题。
5.学习框架
现在，你已经了解了jQuery，JS基础语法，AJAX，Chrome DevTools，测试QA。以下的是你们现在真正应该学习的内容——框架：
React：
React的前身是React.JS。React最初是由Facebook和少数个人以及一个小社区开发的，但随着时间的推移，React进行了多次的优化，现在它变成了很有意思而且功能很强大的代码，也很容易学习。我个人是十分推荐你学习React的。日后，你可以用React以组件的形式在网页中开发用户界面。
Angular：
Angular在某方面和React非常相似，不过你可以用Angular以组件的形式编写SPA。它是现在IT行业前端开发方面需求量最大的语言。Angular其实是JS框架，基本上意味着它是用JS编写的。
你可以在每个浏览器的各个角落遇见JS，这也侧面证实了JS功能十分强大，也十分有用。我强烈建议你既要学习React，也要学习Angular。
Node.JS：
Node.JS是在服务器端编写JS的框架。用Node.JS写的代码或API的速度快得离谱，而且Node.JS还可以同时处理多个请求。不像其他后端语言，很少有公司在Node.JS上实现了他们的服务器。
它是服务器端语言的未来，在Node中实现的大型Web应用程序的可扩展性和部署方面存在一些问题，所以现在我不会称它为服务器端语言的主角。
Express.JS：
和上文所述的框架一致，它也是一个功能强大的框架。Express.JS简称Express，它是针对Node.JS的web应用框架，在MIT许可证下作为自由及开放源代码软件发行。它被设计来建造web应用和API。
同样它也是由用JS编写的，我个人建议如果你在学习Node.JS，那么一定要把Express.JS也掌握好。
6.学习库
框架学习也结束了，下面正是学习JavaScript之路上至关重要的最后一点。学习一段时间后，你可能绞尽脑汁想写好代码，而且明明思路很清晰，却只能写出一点点代码。这时候你就该使用这个库了，我并没有推广库的想法，而是真心希望你可以拥有非常有趣的学习和使用经历。
Coffee.Script：
Coffee.Script与JS功能类似，但它有一个好处就是没有分号，括号，双引号，甚至是大括号的杂乱和麻烦。当你学习了JS的基础语法，搭建完众多框架，再学习coffee.script，你就会意识到它有多么的很简单。正因为它十分容易编写，所以我真的很推荐你们进行学习。
当你开始学习时也可以使用JS文档访问JavaScript，并且不要害怕一路上承担一些项目。完全不需要担心，项目会给你带来的挑战，项目的一次次完成会带给你不一样的新鲜感和信心，只有突破重围才会看到崭新的自己。记住明天的你会感激现在拼命的自己，当你精通JS之时，任何挑战都没有办法限制你学习。
如果你对这篇文章有任何感悟或想法，可以在评论区留言。我个人对编码充满了激情，我认为每个人都应该学习它，而不是敬而远之。衷心地祝原你在编码的路上越走越稳，越走越快，越走越远。到那时你虽已是码农，但你仍要牢记学习，从中得到启发，并走向更美好的明天。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
