JQuery
JQuery是一个快速、简洁且功能丰富的JavaScript框架;
1. 引入依赖
使用JQuery需要先引入对应的库;
在使用 JQuery CDN 时,只需要在 HTML 文档中加入如下代码
html"><script src="https://code.html" title=jquery>jquery.com/html" title=jquery>jquery-3.7.1.min.js"></script>
参考地址: https://releases.html" title=jquery>jquery.com/
其中,src
属性指明了 JQuery 库所在的URL
,这个 URL 是 CDN(内容分发网络) 服务提供商,为 jQuery 库提供的一个统一资源定位符
;
如果需要使用其他版本的 JQuery,可以在官网进行下载:
Jquery 官方共提供了4种类型的 JQuery 库:
- uncompressed:非压缩版本(易读,但是文件较大,传输速度慢)
- minified:压缩版(不易读,文件小,性能高,开发中推荐)
- slim:精简瘦身版,没有Ajax和一些特效
- slim minified :slim的压缩版
开发时,建议把 JQuery 库下载到本地,放在当前项目中,引入外部地址,会有外部地址不能访问的风险.
下载方式:
- 先创建一个新的 HTML 文件,用于引入依赖:
- 右键
uncompressed
和minified
版本,在新的标签页中打开:
- 我们可以看到未压缩版本的方法很工整,而压缩版本的方法则不讲究格式:
我们可以根据实际需求,在未压缩版本/压缩版本的页面中按右键,通过另存的方式,存到对应的项目中,在项目中引入这个文件,才可以在项目中使用 JQuery 提供的框架,引入 JQuery 文件,需要利用网路来传输,推荐使用压缩版本,可以大大节约传输文件的时间开销;
这个方法是存在本机的,使用的是内部连接,放置网络连接失效导致异常:
为了让文件整洁一点,我们把 JS 文件和 HTML 文件区分开:
修改链接:
2. JQuery 语法
jQuery 语法是通过选取HTML元素,并对选取的元素执行某些操作
基础语法
html"> $(selector).action()
$()
:一个函数,它是jQuery提供的一个全局函数,用于选择和操作 HTML 元素.Selector
:选择器,用来"查询"和"查找" HTML 元素action
: 操作,执行对元素的操作
JQuery的代码通常都写在document ready 函数中;
document:整个文档对象,一个页面就是一个文档对象,使用document表示.
这是为了防止文档在完全加载(就绪)之前运行jQuery代码,即在文档加载完成后才可以对页面进行操作。
如果在文档没有完全加载之前就运行函数,操作可能失败
示例:
保存代码,打开页面:
给按钮添加了click事件,点击后出现弹窗:
保存代码,刷新页面:
3. JQuery 选择器
我们通过 JQuery 选择器来选择一些 HTML 元素,然后对元素进行操作.
JQuery选择器基于已经存在的CSS选择器,除此之外,还有一些自定义的选择器.
jQuery 中所有选择器都以 $ 开头: $()
.
$(“.intro .demo”)是一个复合标签,如果加了空格,表示 .demo 是 .intro 的子标签,加空格的描述就是,选中含有 .demo 标签的 .intro 标签;
4. JQuery 事件
jQuery 参考手册 - 事件 (w3school.com.cn)