JavaScript之jQuery够用即可（jQuery的引入、查找选择器、左侧菜单栏）_使用js给静态页面添加搜索功能,左侧展示一级菜单树-优快云博客

本文链接：https://blog.youkuaiyun.com/Viewinfinitely/article/details/106144763

JQuery世界上使用最广泛的一个库，它是一个轻量级的库，文件大小只有几十k，但是功能却相当强大。并且它可以兼容CSS的多个版本和各种浏览器，这也是它用途极为广泛的原因。接下来几篇将要介绍jQuery的相关用法。

1、jQuery的下载
它在很多网站都可以下载到，这里推荐一个jquery下载所有版本（实时更新）。

下载完了后是一个压缩包，解压之后是一个js文件，我们把它复制到我们的项目文件夹里就可以使用了。

2、jQuery的引入

然后在html文档里，用<script>标签引入jQuery的文件链接：

<script src="jquery-3.4.1.js"></script>

3、jQuery的使用（$的用法）
例如：

$("#test").html()

这个$符号就是使用jQuery的标志，它是一个基本原则器，因此每次使用前都需要加上它，上述代码的意思是：
获取ID为test的元素内的html代码。其中html()是jQuery里的方法

4、jQuery的基础语法

$(selector).action()

selecto就是选择器方面，action就是我们需要的操作方面（各种方法）

1、基本选择器（$符号）

$("*")    $("#id")    $(".class")   $("element")    $(".class,p,div")

2、层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

3、基本选择器（：索引）

$("li:first")  $("li:eq(4)")  $("li:even") $("li:gt(2)")

4、属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

5、表单选择器

$("[type='text']").css("width","200px");  //直接设置属性
$(":text").css("width","500px");  //用简单方式

6、练习代码

<!DOCTYPE html>
<html lang="en"<