jQuery学习笔记1--环境准备与语法简介

最新推荐文章于 2024-04-19 15:29:12 发布

ice_railgun

最新推荐文章于 2024-04-19 15:29:12 发布

阅读量134

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_38606936/article/details/80877743

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近由于实训需要，再次拾起了荒废很久的前端。这次要做比当年静态页面更高级的页面。那么学习jQuery+AJAX会是个不错的选择。废话少说，直接切入正题。

什么是jQuery？

从jQuery官网摘取得来的介绍如下：

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

大致就是jQuery是一个快速，小巧而且特性丰富的JS库。它使诸如HTML文档的遍历和操纵，事件处理，动画和Ajax等事情变得简单得多。它具有可在多种浏览器中工作的易于使用的API。

jQuery库的添加

首先从官网下载，附上链接 jQuery库下载链接

compressed 是压缩过的jQuery库，uncompressed的是未压缩过的jQuery库。

下载下来分别是

和

通常情况下：
jquery.js是完整的未压缩的jQuery库，一般用于阅读学习源码或修改源码，一般不用于线上项目。
jquery.min.js是由完整版的jQuery库压缩得来，功能与未压缩的一样，只是将空白字符、注释等与逻辑无关的内容删除，并进行优化。这个版本一般用于网站引用使用，减小文件体积，提升访问速度等。

然后在html文件中的<head></head>中添加

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

即可。其中src后的字符串是jquery.js或jquery.min.js在你的项目中的路径。

jQuery实例

下面给出一个实例来显示其作用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#button1").click(function(){
			$("p").hide();
		});
			$("#button2").click(function(){
			$("p").show();
		});
		});
	</script>
</head>
<body>
	<h2>这是一个示例</h2>
	<p>我是第一行文字</p>
	<p>我是第二行文字</p>
	<button id="button1">点我文字隐藏</button>
	<button id="button2">点我文字出现</button>
</body>
</html>

这个代码实现点击按钮来实现文字的隐藏与出现。

在<head></head>中添加的第二个<script></script>标签的内容就是jQuery。其基础语法为：

$(selector).action()

$定义了jQuery

selector是选择符，可以是id，也可以是标签，也可是类。如下所示

$(this).hide() //隐藏当前元素
$("p").hide()  //隐藏所有<p></p>
$(".test").hide() //隐藏所有 class="test" 的元素
$("#button1").hide() //隐藏所有 id="button1" 的元素

再观察我们的示例代码，所有jQuery代码写在了一个

$(document).ready()

就绪函数中。这是为了防止在页面完全加载完之前执行jQuery代码。如果代码中涉及获取未完全加载的图片大小，或者对不存在的对象进行操作，不加就绪函数的写法会出错。

ice_railgun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记1--环境准备与语法简介

最近由于实训需要，再次拾起了荒废很久的前端。这次要做比当年静态页面更高级的页面。那么学习jQuery+AJAX会是个不错的选择。废话少说，直接切入正题。 ...
复制链接

扫一扫

专栏目录