JQuery(一)---【JQuery简介、安装、初步使用、各种事件】

news2024/11/20 23:27:14

零.前言

在学习JQuery前，您需要具备以下知识：

HTML相关知识(DOM)
CSS相关知识
JavaScript相关知识

一.JQuery

1.1JQuery简介

JQuery是一个JavaScript的“函数库”，不是JavaScript的一个框架，与“VUE、REACT”有本质区别！

(为方便起见，后续的JQ全部代指JQuery)

JQuery设计的初衷是：“方便对DOM对象的操作以及对DOM对象进行更精细的操作”

在“VUE、REACT”等框架出现之前，JQ曾经统治过一整个时代，即使现在JQ相对落后，但学习JQ仍然是有必要的，学习JQ后可以帮我们精简代码(偷偷懒)

JQuery具有以下功能：

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数设计、绑定
JavaScript特效和动画
HTML DOM的遍历和修改
AJAX

1.2JQuery的安装

JQ作为JS的一个“函数库”，并不集成于JS中，而是作为一个外部库，需要我们自行安装使用。

安装方式有两种：“本地安装”、“网络安装”

“本地安装”的优点是用户启动快，将JQ库集成在项目中。缺点是可能占点小空间(也可以忽略不计)

使用方法：

在<head>标签中，使用<script>的“src”属性，导入本地JQ文件的路径：

<script src="本地JQ.js文件的路径"></script>

“网络安装”的优点是用户启动可能较慢，因为需要用户先到“网络共享器”中下载JS库，再启动项目，不过当今的主流浏览器都内置了JQ文件，可以忽略不计。

使用方法：

在<head>标签中，使用<script>的“src”属性，写入“网络JS共享器的URL”

对于“URL”有很多，可以使用国内的：“抖音”、“阿里”的URL，也可以使用官方的URL。

官网地址：

jQuery CDN

在这里我们可以选择需要的JQ地址，其中有四个版本：“uncompressed”、“minified”、“slim”、“slim minified”四个版本。

四个版本的功能性依次下降，所占体积依次下降。

点击需要的版本，可以弹出URL：

二.JQuery语法

2.1JQ语法介绍

JQ语法相对简单，有JS基础的可以立刻上手：

“$(selector).action()”

其中：

“selector”是“选择器”，用来表示选取的是哪一个(种)元素
“action()”是“操作”，用来表示对选取的元素进行何种操作
“$”是“定义JQ”，用来定义JQ语句

2.2JQ选择器

JQ语法中的“选择器”，与JS基本相同，下面来学习“元素选择器”共四种：

“this选择器”、“标签选择器”、“类选择器”、“id选择器”：

$(this).hide() ：隐藏当前元素(this指针代指当前元素)
$("p").hide()：隐藏<p>元素
$(".test").hide()：隐藏类名为“test”的所有元素
$("#test").hide()：隐藏id为“test”的元素

可以看到，四个选择器的使用方式与JS一模一样

2.3文件就绪函数【重要】

在实际应用中，你会发现很多JQ语句都被包含在了一个“$(document).ready()”函数中：

$(document).ready(function(){
    //JQ操作
})

这个函数叫作：“文件就绪函数”，作用是：“防止文档在完全加载(就绪)之前就运行JQuery代码，从而出错”

下面是两个失败的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

下面再给出一个“点击按钮后，<p>段落消失的例子”，里面用到了“文件就绪函数”，可以好好体会一下

<body>
    <p id="sample">我在按钮被点击后会消失</p>
    <button onclick="click">点击我</button>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#sample").hide()
            })
        })
    </script>
</body>

2.4更多的JS选择器

除了上面所说的“元素选择器”以外，在JQ中还有：“属性选择器”、“CSS选择器”、“混合选择器”

“属性选择器”可以使用“XPath”表达式选择带有特定属性的元素：

$("[href]")：选取所有带有“href”属性的元素
$("[href='#']")：选取所有带有“href”属性且属性值为“#”的元素
$("[href!='#']")：选取所有带有“href”属性且属性值不为“#”的元素
$("[href$='.jpg']")：选取所有href值以“.jpg”结尾的元素

“CSS选择器”可用于改变HTML元素的CSS属性：

$("p").css("background-color","red")

上述例子用来改变<p>标签的背景颜色

“混合选择器”可将“id选择器”、“类选择器”、“标签选择器”等所有选择器混合一起使用

混合规则：“从左到右，依次翻译”

$("div#intro.head")：id="intro"的<div>标签的所有class="head"的元素

三.JQ事件

3.1JQ事件简介

JQ可以实现将某个元素与JQ(JS)事件函数绑定在一起，从而实现复杂功能

常见的事件有：“鼠标点击”、“鼠标移动”、“快捷键”等等

官方给出的内置事件函数基本可以供我们日常使用，较复杂的功能且动手能力强的可以：“自定义事件函数”

JQ事件处理跟JS使用DOM对象绑定事件函数几乎一样

3.2JQ事件使用

给出一个例子：

<!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="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p id="sample">我在按钮被点击后会消失</p>
    <button onclick="click">点击我</button>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#sample").hide()
            })
        })
    </script>
</body>
</html>

这段代码将“click()事件函数绑定给了<button>标签

3.3常见的事件汇总

下面给出一些常见的事件汇总，更完全的事件请参考“JQ文档”：

jQuery 参考手册 - 事件 (w3school.com.cn)

事件函数	效果
$(document).ready(function)	当文档就绪后
$(selector).click(function)	当被绑定元素被点击后
$(selector).dbclick(function)	当被绑定元素被双击后
$(selector).focus(function)	当被绑定元素获得焦点时
$(selector).mouseover(function)	当鼠标悬停在被绑定元素时