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.mzph.cn/news/796201.shtml

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

相关文章

字符串匹配问题(strs)(栈)

字符串匹配问题(strs) 【题目描述】 字符串中只含有括号 (),[],<>,{},判断输入的字符串中括号是否匹配。如果括号有互相包含的形式&#xff0c;从内到外必须是<>,(),[],{}&#xff0c;例如。输入: [()] 输出:YES&#xff0c;而输入([])&#xff0c;([)]都应该输出…

IPSEC VPN双机热备份的配置讲解一

IPSEC VPN双机热备份的配置讲解一 VPN 是一种专用网络&#xff0c;可使用公共网络连接两个或两个以上的远程站点。VPN 可使用通过公共网络路由&#xff08;以隧道方式发送&#xff09;的虚拟连接&#xff0c;而非网络之间的专用连接。IPsec VPN 是一项协议&#xff0c;由建立 …

HTML如何设置字体样式?

HTML如何设置字体样式&#xff1f; 我们开发一个页面时&#xff0c;会经常涉及到文字部分。HTML 默认的字体样式为宋体&#xff0c;12px。如果我们不想设置字体为宋体的话&#xff0c;需要为它更改样式。HTML 字体样式的更改需要用到 CSS。 CSS 常用的字体属性有五种&#xf…

DHCP-PXE

Dynamic Host Configuration Protocol 动态主机配置协议 1.Selinux 调试为Permission 防火墙配置 搭建DHCP的主机必须有一个静态地址&#xff0c;提前配置好 安装DHCP软件 服务名为dhcpd DHCP地址分配四次会话&#xff0c; DISCOVERY发现 OFFER 提供 REQUEST 回应 A…

【C++】每日一题 380 O(1)时间插入,删除和获取随机元素

实现RandomizedSet 类&#xff1a; RandomizedSet() 初始化 RandomizedSet 对象 bool insert(int val) 当元素 val 不存在时&#xff0c;向集合中插入该项&#xff0c;并返回 true &#xff1b;否则&#xff0c;返回 false 。 bool remove(int val) 当元素 val 存在时&#xf…

代码随想录算法训练营第42天| 背包问题、416. 分割等和子集

01 背包 题目描述&#xff1a;有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 二维dp数组01背包&#xff1a; 确定dp数组以及下标的含义 …

实景三维技术也是一种新质生产力

实景三维技术作为一种新兴的技术手段&#xff0c;正在逐渐被认为是一种新质生产力。它通过高精度的数据采集、处理和可视化&#xff0c;为多个行业领域提供了全新的工作方式和解决方案&#xff0c;从而推动了生产力的发展和创新。以下是实景三维技术作为新质生产力在不同方面的…

2024年华为OD机试真题-最长的指定瑕疵度的元音子串-Java-OD统一考试(C卷)

题目描述: 开头和结尾都是元音字母(aeiouAEIOU)的字符串为 元音字符串 ,其中混杂的非元音字母数量为其 瑕疵度 。比如: “a” 、 “aa”是元音字符串,其瑕疵度都为0 “aiur”不是元音字符串(结尾不是元音字符) “abira”是元音字符串,其瑕疵…

Mac 配置 Aria2

文章目录 1. Aria2 安装1.1 安装 brew1.2 安装 Aria2 2. 配置 Aria22.1 创建配置文件 aria2.conf 和空对话文件 aria2.session2.2 编辑配置文件 aria2.conf 3. 开机启动设置3.1 创建用户启动文件3.2 管理自启动项 4. 配置 BT tracker 自动更新4.1 XIU2/TrackersListCollection …

通义灵码-ai编码

https://developer.aliyun.com/topic/lingma/activities/202403?taskCode14508&recordIdb1ef3ba27250a5818b1b6ffe418af658#/?utm_contentm_fission_1 「通义灵码 体验 AI 编码&#xff0c;开 AI 盲盒」

Python笔记|列表推导式

用列表推导式创建列表的方式更简洁。常见的用法为&#xff0c;对序列或可迭代对象中的每个元素应用某种操作&#xff0c;用生成的结果创建新的列表&#xff1b;或用满足特定条件的元素创建子序列。 例如&#xff0c;创建平方值的列表&#xff1a; >>> squares [] &…

【Kafka】Kafka安装、配置、使用

【Kafka】安装Kafka 1. 安装Kafka2. Kafka使用2.0 集群分发脚本xsync(重要)2.0.1 scp命令2.0.2 rsync远程同步工具2.0.3 写一个集群分发脚本xsync (Shell 脚本) 2.1 Zookeeper安装2.2 对Kafka进行分发2.2.1 执行同步脚本2.2.2 三台云主机配置Kafka环境变量 1. 安装Kafka Kafka…

《QT实用小工具·十五》多种样式的开关控件

1、概述 源码放在文章末尾 目前实现了三种样式的开关控件按钮&#xff0c;如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #ifndef IMAGESWITCH_H #define IMAGESWITCH_H/*** 图片开关控件 * 1. 自带三种开关按钮样式。* 2. 可自定义开关图片。*/#include <QWid…

多層解壓p

import os import subprocess from tqdm import tqdm def extract_compressed_file(file_path, passwordNone, extract_path"."):"""解压单个压缩文件到指定目录&#xff0c;并实时显示解压进度Parameters:- file_path (str): 压缩文件的完整路径- pa…

FreeRtos入门-7 中断管理

中断管理 中断管理相比非中断的优势 1&#xff0c;简洁和效率。 2&#xff0c;同步和安全。提供了中断安全的操作&#xff0c;确保在中断上下文中执行时不会引发竞态条件或破坏系统状态。 3&#xff0c;通过配置中断的优先级&#xff0c;可以确保高优先级的中断能够立即响应…

配置Mysql集群主从复制报错

配置Mysql集群主从复制报错: 我在master创建了一个数据库&#xff08;demo_ds_0&#xff09;,然后又快速删除了。然后又再次创建了 demo_ds_0, 发现 slave 数据库没有将 demo_ds_0 库同步过来。 后面在 slave 数据库中执行 show slave status 发现 SLave_IO_Running 字段是 …

浏览器控制台(console)中JS的常用方法:获取元素、鼠标点击、键盘输入等

文章目录 1.获取元素的常用方法(1)获取tabs列表(国内版/国际版)2.模拟输入框input的输入3.模拟点击click()1.获取元素的常用方法 // 1 根据元素IDlet img = document.getElementById("m1");// 2 根据元素标签--元素列表let div

OpenHarmony开发-系统烧录

本文详细介绍了烧录OpenHarmony系统到开发板的操作流程。从基础的硬件准备和软件环境设置入手&#xff0c;详细说明了如何配置开发环境、构建系统镜像等过程&#xff0c;详细描述了烧录过程中的关键步骤&#xff0c;以及如何使用专用工具将OpenHarmony系统镜像传输到开发板。同…

蓝桥杯每日一题:公约数(gcd)

题目描述&#xff1a; 给定两个正整数 a 和 b。 你需要回答 q 个询问。 每个询问给定两个整数 l,r&#xff0c;你需要找到最大的整数 x&#xff0c;满足&#xff1a; x 是 a和 b 的公约数。l≤x≤r。 输入格式 第一行包含两个整数 a,b。 第二行包含一个整数 q。 接下来…

力扣Lc29---- 541. 反转字符串 II(java版)-2024年4月06日

1.题目描述 2.知识点 &#xff08;1&#xff09;执行步骤如下&#xff1a; 初始化 s “abcdefg” 和 k 2 将字符串分割成长度为 2k 4 的块。 对每个块中的前 k 2 个字符进行反转。 执行过程 1&#xff09;第一次循环&#xff08;i 0&#xff09; start 0 end Math.min(0…