一、认识jQuery

先来百科一波,认识一下这个jQuery

Web网页设计之jQuery_1. 认识jQuery

百科上说 jQuery 是一个快速、简介的 JavaScript框架,封装了 JavaScript 常用的功能代码,而且还优化了 HTML文档、事件处理,动画等等,也就是说,这个 jQuery 就是一个高级的 JavaScript ,我们之所以不学习这个 JavaScript 也是因为这个东西跟不上时代了,但是,跟不上是跟不上,但也得会一些,这里我给大家准备了一个教程,大家可以看看:《W3school_JavaScript》

一定要看哦,不然看这个会很吃力的

对了,jQuery 官网是:https://jquery.com/

顺便认识一下 logo

Web网页设计之jQuery_1. 认识jQuery

二、下载jQuery

我们登录到官网上,然后找到 Download,并点击

Web网页设计之jQuery_1. 认识jQuery

点击这个进行下载,我出这个博客的时候,这个版本是3.5.1,可能你看到的时候这个版本已经更新到更高了,没有关系的啊

推荐使用迅雷下载,我这里网不好,下载不动,下载连接地址:https://code.jquery.com/jquery-3.5.1.min.js

三、使用 jQuery 写一个Helloworld

打开我们的项目,然后把这个 jquery-3.5.1.min 复制到项目中

Web网页设计之jQuery_1. 认识jQuery

然后我们创建一个新的目录,进行我们的 Helloworld 的开发

我们在 html 中引入 jQuery 是使用的 script 标签

Web网页设计之jQuery_1. 认识jQuery

向这样,引入之后,我们来写一个实例,点击一个 button,然后触发一个效果,弹出一个对话框并输出 hello,world

我们先写一个 button

Web网页设计之jQuery_1. 认识jQuery

学过这个 JavaScript 的,我们可以先使用一下之前的方法去做一下

Web网页设计之jQuery_1. 认识jQuery

然后我们点击一下这个 button

Web网页设计之jQuery_1. 认识jQuery

可以看到一个这个弹出框,下面我们使用一下 jQuery

我们给要操作的 DOM 赋予一个 id,然后我们这样去写

Web网页设计之jQuery_1. 认识jQuery

然后我们刷新一下页面,再去点击 button ,我们会发现,并没有任何提示框,而且 console 也没有任何错误,如何去解决这个问题呢?我们只需要将这个引入和 script 放在 body 的下面即可。

Web网页设计之jQuery_1. 认识jQuery

我们再来点击

Web网页设计之jQuery_1. 认识jQuery

是OK的,这样我们就用这个 jQuery 做了一个 helloworld。

 

先认识一下,然后我们后面细讲,有不懂的可以联系我的QQ:2100363119

相关文章: