jQuery 导入与运行

最新推荐文章于 2024-06-23 09:36:09 发布

CodeForCoffee

最新推荐文章于 2024-06-23 09:36:09 发布

阅读量925

点赞数

分类专栏： JavaScript 文章标签： JavaScript JQuery

本文链接：https://blog.csdn.net/qq_24118527/article/details/90724960

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

楼主的程序运行在Mac OS上，Windows系统同理

一、下载Node.js

打开Node.js官网，直接下载即可

https://nodejs.org/en/

安装完成后可以用如下方式进行查看

二、安装Browser-sync

刚刚安装的node.js其实是为这一步做铺垫

因为browser-sync是基于node.js的

打开官网：

http://www.browsersync.cn/

点击这里的5分钟快速入门，看到这里给出来安装指令

我们在终端（Windows的话可以在git Bash里输入）输入如下指令

回车后即可完成安装

三、下载安装ATOM

atom是一款很不错的开源编辑器，官网：

https://atom.io/

直接安装即可

四、下载jQuery

打开jQuery官网如下：

https://jquery.com/

选择右边的下载jQuery

我们选择未压缩版

我们将其保存在某个目录下，比如我保存在Document的Web目录下：

五、安装Emmet

Emmet工具是前端开发的必备

我们打开atom，选择perference

选择左边的install

在右侧的输入框中输入Emmet

点击install，稍等一会儿，这样就是安装完成了

同样的方法，我们安装一下另外一款插件

六、导入

选择新建文件

在没有任何输入的情况下，按command+S

选择保存路径为刚刚存储jQuery的目录

完成后的界面如下：

接下来输入html:5，然后按tab键

可以发现我们自动生成了框架，这是Emmet做的

接下来添加代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./jquery-3.4.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").css("color","blue");
      })
    })
  </script>
  <title>Document</title>
</head>
<body>
  <button type="button" name="button">Blue</button>
  <p>Hello</p>
</body>
</html>

保存

然后打开终端，切到当前文件所在的目录（也就是工程目录）

然后执行如下指令

browser-sync start --server -file "*.html"

完成

CodeForCoffee

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 导入与运行

楼主的程序运行在Mac OS上，Windows系统同理目录一、下载Node.js二、安装Browser-sync三、下载安装ATOM四、下载jQuery五、安装Emmet六、导入一、下载Node.js打开Node.js官网，直接下载即可https://nodejs.org/en/安装完成后可以用如下方式进行查看二、安装Browser-sync...
复制链接

扫一扫

专栏目录