关于JQuery引用及基本用法

zhezhongyun 2025-05-30 18:56 40 浏览

在JQuery文件中下载，并将其引入html文件。在使用jQuery之前，我们需要到jQuery的官方网站：“
https://jquery.com/download/”

把下载好的文件放到工程根目录下，然后在这个根目录下创建index.html文件。最后，将下载的JQuery文件引入index.html文件，其代码如下：

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="jquery-3.5.1.min.js"></script>

</head>



<body>

</body>



</html>

1234567891011121314151617181920212223242526272829复制代码类型：[html]

通过引入script标签，JQuery被引入到subject的subject中，subject是：

接下来，我们将研究JQuery的基本语法，并对其进行一些介绍。

示例1:$("div").hide()；此行表示隐藏div元素；

例子2:$(".box1").hide()；这行代码意味着class属性隐藏在box1的元素中；

示例3:$("#wrap").hide()；这行代码表示隐藏元素id的值为wrap；

示例4:$("hide.box1").hide()；这一行代码意味着，隐藏带有box1的cycle属性的hv元素；

从上面的例子中可以看出，JQuery语法非常简单，只需要一个美元符号$，后面跟着一个html的元素选择符(与我们之前学到的css选择符高度一致)，然后在后面加上JQuery的方法，例如hide(show等等)。

无论显示或隐藏元素时，都需要一个事件来触发该动作，我们常用的触发方式是鼠标点击，比如你用鼠标点击一个按钮，然后页面上就会弹出一个提示框，通过点击来触发效果，我们称之为“事件”。点击JQuery中事件的书写方式为：$("div").click(function(){...})，此代码意味着在div标签被点击之后触发事件，具体事件内容以函数形式写入。除单击事件外，JQuery还可以通过鼠标移动事件、双击事件、元素获取焦点事件等方式进行学习，后面我们将一一介绍，并查看JQuery如何使用。

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="jquery-3.5.1.min.js"></script>

</head>

<style>

.box1 {

width: 100px;

height: 100px;

background-color: red;

}

</style>



<body>

<button id="btn1">点我隐藏元素</button>

<div class="box1"></div>

</body>

<script>

$(document).ready(function(){

$("#btn1").click(function(){

$(".box1").hide();

})

})

</script>

</html>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253复制代码类型：[html]

在以上代码中，我们定义了一个button元素，一个div元素，然后点击按钮button，这个div元素就会被隐藏起来，各位同学可以尝试一下。在代码的最后一部分，包含了一段script标签，这段是JavaScript代码，所有的JavaScript代码都将被放置在script标签中以执行。

接下来是代码的第一句话：$(document).ready(function){...}，这是JQuery的固定写法，意思是页面加载后立即执行，执行代码被写入function函数的方法中(即{}内)。我们已经看到了这一方法。

$("#btn1").click(函数){

$(".box1").hide()；

})

这个代码就是我们前面提到的click事件，当单击id值为btn1的按钮时，会引发一个click元素的隐藏事件，click元素的名字叫做box1。

CSS 组合选择符

上一篇：前端面试题
下一篇：我常用的几个 VueUse 最佳组合，推荐给你们

关于JQuery引用及基本用法

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）

怎么用三种代码写「九九乘法表」（如何编写九九乘法表的程序）

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」