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

零.前言

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

  1. HTML相关知识(DOM)
  2. CSS相关知识
  3. JavaScript相关知识

一.JQuery

1.1JQuery简介

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

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

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

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

JQuery具有以下功能：

  1. HTML元素选取
  2. HTML元素操作
  3. CSS操作
  4. HTML事件函数设计、绑定
  5. JavaScript特效和动画
  6. HTML DOM的遍历和修改
  7. 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()”

其中：

  1. “selector”是“选择器”，用来表示选取的是哪一个(种)元素
  2. “action()”是“操作”，用来表示对选取的元素进行何种操作
  3. “$”是“定义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代码，从而出错”

下面是两个失败的例子：

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

下面再给出一个“点击按钮后，<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)当鼠标悬停在被绑定元素时

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/596857.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

非关系型数据库（缓存数据库）redis的性能管理

非关系型数据库（缓存数据库）redis的性能管理

目录 一.Redis性能管理 1.Info Memory——查看Redis内存使用 2.内存碎片率 3. 内存使用率 4.内存回收key 二.缓存的穿透&#xff0c;击穿和雪崩 1.缓存的穿透 1.1 问题描述 1.2 缓存穿透发生的条件 1.3 缓存穿透发生的原因 1.4 解决方案 2 缓存的击穿 2.1 问题描…
阅读更多...
SQLServer2022安装

SQLServer2022安装

首先从官网上下载2022版本SQL Server 下载 | Microsoft 选择此把呢不能运行&#xff0c;适合我们在学习阶段使用。 同时网页往下滑动&#xff0c;下载SSMS 下载后的文件 注意&#xff1a;在运行时最好获取管理员权限运行&#xff0c;第一次在安装时未获取管理员权限最终…
阅读更多...
代码随想录算法训练营三刷day46 | 动态规划之139.单词拆分

代码随想录算法训练营三刷day46 | 动态规划之139.单词拆分

三刷day46 139.单词拆分1.确定dp数组以及下标的含义2.确定递推公式3.dp数组如何初始化4.确定遍历顺序5.举例推导dp[i] 139.单词拆分 题目链接 解题思路&#xff1a;单词就是物品&#xff0c;字符串s就是背包&#xff0c;单词能否组成字符串s&#xff0c;就是问物品能不能把背包…
阅读更多...
关于工程师提升计划及个人发展若干问题

关于工程师提升计划及个人发展若干问题

作为工程师&#xff0c;不进则退&#xff0c;不像服务员&#xff0c;学会后就一直够用&#xff0c;工程师需要不断学习&#xff0c;不断发展。在技术服务行业&#xff0c;员工技能的提升是公司持续发展的基础。经过近两年的工程师培养和提升计划考核实践&#xff0c;我们总结了…
阅读更多...
AlgorithmStar（AS机器学习与科学计算库） 实现 矩阵数据类型的计算函数汇总

AlgorithmStar（AS机器学习与科学计算库） 实现 矩阵数据类型的计算函数汇总

AlgorithmStar 实现 矩阵 计算 AlgorithmStar 本文中将会演示通过 AS 机器学习库 实现 矩阵计算 目录 文章目录 AlgorithmStar 实现 矩阵 计算目录矩阵创建通过数组创建通过稀疏矩阵创建通过填充创建矩阵通过随机的方式创建矩阵 矩阵计算矩阵的基本运算矩阵的加法计算矩阵的减…
阅读更多...
上位机图像处理和嵌入式模块部署（qmacvisual图像清晰度）

上位机图像处理和嵌入式模块部署（qmacvisual图像清晰度）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 做过isp的同学都知道&#xff0c;图像处理里面有一个3A&#xff0c;即自动曝光、自动白平衡和自动对焦。其中自动对焦这个&#xff0c;就需要用输入…
阅读更多...
QAuth 2.0

QAuth 2.0

OAuth 2.0授权框架支持第三方支持访问有限的HTTP服务&#xff0c;通过在资源所有者和HTTP服务之间进行一个批准交互来代表资源者去访问这些资源&#xff0c;或者通过允许第三方应用程序以自己的名义获取访问权限。 为了方便理解&#xff0c;可以想象OAuth2.0就是在用户资源和第…
阅读更多...
Linux-exec函数族和system函数

Linux-exec函数族和system函数

参考资料&#xff1a;《Linux环境编程&#xff1a;从应用到内核》 execve函数 execve函数接口如下&#xff1a; #include <unistd.h>int execve(const char *filename, char *const argv[],char *const envp[]);参数&#xff1a; 第一个参数&#xff1a;filename是可执…
阅读更多...
合宙开发板Core_Air780E测试AT指令

合宙开发板Core_Air780E测试AT指令

一、官方资料 CORE-AIR780E 开发板是合宙通信推出的基于 Air780E 模组所开发的&#xff0c;包含电源&#xff0c;SIM 卡&#xff0c;USB&#xff0c;天线&#xff0c;音频等必要功能的最小硬件系统。以方便用户在设计前期对 Air780E 模块 进行性能评估&#xff0c;功能调试&…
阅读更多...
更新至2021年各省经济韧性测度原始数据

更新至2021年各省经济韧性测度原始数据

更新至2021年各省经济韧性测度原始数据 1、时间&#xff1a;具体时间如下&#xff1a; 2001-2021各省一二三产业就业人数和一二三产业产值、总就业、国内生产总值数据 2002-2021年城镇登记失业人员、城镇登记失业率数据 2000-2020年各省GDP和人均GDP数据 2000-2020年各省实…
阅读更多...
我的第一份工作经历

我的第一份工作经历

2024年4月6日 我是艾迪，我目前拿到了新的offer，打算入职新公司，和入职将近两年的前东家说拜拜了，在走之前，我还是想好好记录一下我的这次工作经历，方便以后好好复盘。 求职阶段 首先是求职阶段，我是以应届毕业生的身份进公司的，所以一开始并没有很好的做准备，况且当…
阅读更多...
深入理解指针（4）

深入理解指针（4）

目录&#xff1a; 1.二维数组传参的本质 2.函数指针变量 3.函数指针数组 1.二维数组传参的本质 之前使用二维数组传参 #include <stdio.h> void test(int a[3][5], int r, int c) {int i 0;int j 0;for(i0; i<r; i){for(j0; j<c; j){printf("%d ", …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023