当前位置：首页 > news >正文

jQuery补充

news 文章来源：https://blog.csdn.net/2202_75345049/article/details/132872863 2025/1/15 16:55:58

文章目录

简介
安装
语法
选择器
- 元素选择器
- #id 选择器
- .class 选择器
- 事件
- - 常用事件方法
效果
- 显示隐藏
- 淡入淡出
- 滑动
- 动画
- 停止动画
- 获取内容和属性
- 添加元素
- 删除元素
- 操作css
- 父辈

💛💛孔子云：温故而知新，可以为师矣💛💛
第一次学习的时候云里雾里，通过对前端半年多的学习，再来学习一下jQuery，希望可以有收获，并用在以后的开发中。

简介

什么是jQuery
jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

安装

从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
案例：
$(this).hide() - 隐藏当前元素

选择器

jQuery 中所有选择器都以美元符号开头：$()

元素选择器

$("p")

#id 选择器

$("#test")

.class 选择器

$(".test")

事件

$("p").click(function(){// 动作触发后执行的代码!!
});

常用事件方法

click()
click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

$("p").click(function(){$(this).hide();
});

dblclick()
当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function(){$(this).hide();
});

mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#p1").mouseenter(function(){alert('您的鼠标移到了 id="p1" 的元素上!');
});

效果

显示隐藏

hide() 和 show()

$("#hide").click(function(){$("p").hide();
});$("#show").click(function(){$("p").show();
});

淡入淡出

fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。. 可选的 callback 参数是
fading 完成后所执行的函数名称

fadeOut() 淡出可见元素

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称

fadeToggle() 在 fadeIn() 与 fadeOut() 方法之间进行切换

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

滑动

slideDown() 向下滑动元素。

$(selector).slideDown(speed,callback);

slideUp() 向上滑动元素

$(selector).slideUp(speed,callback);

slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换

$(selector).slideToggle(speed,callback);

动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称

停止动画

stop()

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

获取内容和属性

text() - 设置或返回所选元素的文本内容

$("#btn1").click(function(){alert("Text: " + $("#test").text());
});

html() - 设置或返回所选元素的内容（包括 HTML 标签）
val() - 设置或返回表单字段的值

添加元素

append() - 在被选元素的结尾插入内容

$("p").append("追加文本");

prepend() - 在被选元素的开头插入内容

$("p").prepend("在开头追加文本");

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

$("img").after("在后面添加文本");$("img").before("在前面添加文本");

删除元素

remove() - 删除被选元素（及其子元素）

$("#div1").remove();

empty() - 从被选元素中删除子元素

$("#div1").empty();

操作css

addClass() - 向被选元素添加一个或多个类

 $("div").addClass("important");

removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

父辈

parent() parent()
方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

$(document).ready(function(){$("span").parent();
});

parents()
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil()

jQuery补充

文章目录简介安装语法选择器元素选择器#id 选择器.class 选择器事件常用事件方法效果显示隐藏淡入淡出滑动动画停止动画获取内容和属性添加元素删除元素操作css父辈 💛💛孔子云：温故而知新，可以为师矣💛&#x1f49b…...

编程日记 2023/9/14 19:13:49

goaccess 日志分析 nginx

分析命令： goaccess -a -d -f /mnt/winshare/access-2023070112.log -p goaccess.conf -o /mydata/nginx/html/2023070112_new.html分析日志时的参数 goaccess使用参数详解-a 开启 UserAgent 列表。开启后会降低解析速度 -c 在程序开始运行时显示日志/日期配…...

编程日记 2023/9/14 19:12:48

认养一头牛———众筹+合伙人商业模式解析

2016年成立以来，认养一头牛致力于打造数字化乳业第一品牌，只为一杯好牛奶。公司在创立三年内完成了10个亿销售目标，被业界称为新消费品牌黑马，一举闯入互联网新消费梯队的视线。未来三年，认养一头牛将着力打造全国最大…...

编程日记 2023/9/14 19:10:47

前端面试的话术集锦第 11 篇：高频考点（React和Vue两大框架）

这是记录前端面试的话术集锦第十一篇博文——高频考点（React和Vue两大框架），我会不断更新该博文。❗❗❗ React 和Vue应该是国内当下最火热的前端框架。当然，Angular也是一个不错的框架，但是这个产品，国内使用的人很少，因而，框架的章节中不会涉及到Angular的内容。这…...

编程日记 2023/9/14 19:09:46

前端js下载zip文件异常问题解决

目录一，本文解决问题如下二，原下载代码 1，ajax get 下载文件 2，下载异常图： 三，成功下载的 1， JQuery 实现文件下载xhr 2，图例引言： 本人使用的ajax 下载&…...

编程日记 2023/9/14 19:08:45

深度学习面试八股文（2023.9.06）

一、优化器 1、SGD是什么？ 批梯度下降（Batch gradient descent）：遍历全部数据集算一次损失函数，计算量开销大，计算速度慢，不支持在线学习。随机梯度下降（Stochastic gradient desc…...

编程日记 2023/9/14 19:07:44

Linux入门-网络基础|网络协议|OSI七层模型|TCP/IP五层模型|网络传输基本流程

文章目录一、网络基础二、网络协议 1.OSI七层模型 2.TCP/IP五层（或四层）模型三、网络传输基本流程 1.网络传输流程图 2.数据包封装和分用四、网络中的地址管理 1.IP地址 2.MAC地址一、网络基础网络发展最初是独立模式，即计算…...

编程日记 2023/9/14 19:05:42

docker系列(2) - 常用命令篇

文章目录 2. docker常用命令2.1 参数说明(tomcat案例)2.2 基本命令2.3 高级命令2.4 其他 2. docker常用命令 2.1 参数说明(tomcat案例) 注意如果分成多行，\后面不能有空格 # 拉取运行 docker run \ -d \ -p 8080:8080 \ --privilegedtrue \ --restartalways \ -m…...

编程日记 2023/9/14 19:04:42

Debian11安装MySQL8.0，链接Navicat

图文小白教程 1 下载安装MySQL1.1 从MySQL官网下载安装文件1.2 安装MySQL1.3 登录MySQL 2 配置Navicat远程访问2.1 修改配置2.2 Navicat 连接 end: 卸载 MySQL 记录于2023年9月，Debian11 、 MySQL 8.0.34 1 下载安装MySQL 1.1 从MySQL官网下载安装文件打开 MySQ…...

编程日记 2023/9/14 19:03:41

vue项目中使用特殊字体的步骤

写在前面在项目中使用特殊字体，需要注意，所使用的特殊字体是否被允许商用或是个人开发，以及如何使用，切记不要侵权。首先需要在对应字体网站下载字体文件，取出里面后缀名为.ttf的文件然后把该文件放到src -> ass…...

编程日记 2023/9/14 19:02:39

激光雷达检测负障碍物（附大概 C++ 代码)

检测效果如图，红色是正负的障碍物点： 障碍物根据其相对于地面的高度可以分为两类：正向障碍物和负向障碍物。在室外环境中，负障碍物是沟渠、悬崖、洞口或具有陡峭负坡度的地形，可能会造成安全隐患。不慎通过道路坑洼处…...

编程日记 2023/9/14 19:01:38

【每日一题】9.13 PING是怎么工作的？

PING命令的作用是什么? PING命令是计算机网络中常用的命令之一，它的作用是测试两台计算机之间的连通性以及测量数据包往返的时间。 PING命令的工作原理是什么? PING命令的工作原理涉及到ICMP(Internet Control Message Protocol)和网络协议栈的操作: 1.发送ICMP …...

编程日记 2023/9/14 18:59:35

【Python百日进阶-Web开发-Peewee】Day279 - SQLite 扩展（四）

文章目录 12.2.10 class FTSModel 12.2.10 class FTSModel class FTSModel与FTS3 和 FTS4 全文搜索扩展VirtualModel一起使用的子类。 FTSModel 子类应该正常定义，但是有几个注意事项： 不支持唯一约束、非空约束、检查约束和外键。字段索引和多列索引…...

编程日记 2023/9/14 18:58:34

Postman接口压力测试 ---- Tests使用（断言）

所谓断言，主要用于测试返回的数据结果进行匹配判断，匹配成功返回PASS，失败返回FAIL。下图方法一，直接点击右侧例子函数，会自动生成出现在左侧窗口脚本，只需修改数据即可。方法二：直接自己写脚…...

编程日记 2023/9/14 18:57:33

nvue文件中@click.stop失效

在nvue文件中在子元素使用click.stop失效，父元素的事件触发了在uniapp开发中nvue文件是跟vue文件是不一样的，就比如click.stop阻止点击事件继续传播就失效了，这时我们需要在子元素事件中添加条件编译，这样就会解决这个问题 // …...

编程日记 2023/9/14 18:56:32

【微信小程序开发】宠物预约医疗项目实战-开发功能介绍

【微信小程序开发】宠物医院项目实战-开发功能介绍前言本项目主要带领大家学习微信小程序开发技术，通过一个完整的项目系统的学习微信小程序的开发过程。鉴于一些同学对视频教学跟不上节奏，为此通过图文描述的方式，完整的将系统开发过程记…...

编程日记 2023/9/14 18:55:31

vue网页缓存页面与不缓存页面处理

在主路由页面 <template><div style"height: 100%"><keep-alive><router-view v-if"$route.meta.keepAlive"></router-view></keep-alive><router-view v-if"!$rou…...

编程日记 2023/9/14 18:54:30

AI系统论文阅读：SmartMoE

提出稀疏架构是为了打破具有密集架构的DNN模型中模型大小和计算成本之间的连贯关系的——最著名的MoE。 MoE模型将传统训练模型中的layer换成了多个expert sub-networks，对每个输入，都有一层special gating network 来将其分配到最适合它的expert中&…...

编程日记 2023/9/14 18:53:29

AD20多层板设计中的平电层设计规则

一般情况下的多层板设计非常复杂，尤其层叠的次序以及平电层的电源层设计，Gnd层的设计比较简单，不需要过多的关注，但是电源层的设计非常关键，常常让人感到无法下手的感觉，这里介绍一个简单的防盲很快的让你上…...

编程日记 2023/9/14 18:51:27

压力测试有哪些评价指标

在进行压力测试时，您可以评估多个指标来确定系统的性能和稳定性。以下是一些常见的压力测试评价指标： 响应时间（Response Time）： 平均响应时间：请求的平均处理时间。最大响应时间：最长处理时…...

编程日记 2023/9/14 18:50:26

WebUploader 资源下载 http://fex.baidu.com/webuploader/download.html WebUploader 使用方法 http://fex.baidu.com/webuploader/getting-started.html php 上传代码 <?php header(Content-type:text/html;charsetutf-8);if($_FILES[file][error] 0){ // 判断上传是…...

编程日记 2023/9/14 18:49:25

Pandas数据分析一览-短期内快速学会数据分析指南(文末送书)

前言三年耕耘大厂数据分析师，有些工具是必须要掌握的，尤其是Python中的数据分析三剑客：Pandas，Numpy和Matplotlib。就以个人经验而已，Pandas是必须要掌握的，它提供了易于使用的数据结构和数据操作工具&am…...

编程日记 2023/9/14 18:48:24

应用程序分类与相关基本概念介绍

0、引言在从事软件开发的过程中，由于笔者并不是计算机专业的同学，所以时常会对一些概念感到困惑。比如： 前些年很火的前端和后端是什么意思？什么是 GUI？什么是 CLI？计算机的应用程序分为哪些种类&#x…...

编程日记 2023/9/14 18:47:23

springcloude gateway的意义

应用场景 1、南北向流量需要流量网关和微服务网关配合使用，将内部的微服务能力，以统一的 HTTP 接入点对外提供服务。流量网管主要是接入流量进行负载均衡，上游的微服务网关地址和数量变化不大，对服务发现要求不高。微服务网…...

编程日记 2023/9/14 18:46:22

重新定义每天进步一点点

日拱一卒，每天进步一点点~ 这个主题之前写过一次，今天看了《全情投入》又有了新的感触，于是将其记录下来。关于目标的设定问题目标不是改变自己的日常行动，而是改变进行活动时的思维！ 有些事情，坚持下…...

编程日记 2023/9/14 18:44:20

代码随想录算法训练营第51天 | ● 309.最佳买卖股票时机含冷冻期 ● 714.买卖股票的最佳时机含手续费

文章目录前言一、309.最佳买卖股票时机含冷冻期二、714.买卖股票的最佳时机含手续费总结前言买卖股票完结； 一、309.最佳买卖股票时机含冷冻期确定dp数组以及下标的含义 dp[i][j]，第i天状态为j，所剩的最多现金为dp[i][j]。其实本题很多…...

编程日记 2023/9/14 18:43:19

李佳琦掉粉，国货品牌却从“商战大剧”走向“情景喜剧”

李佳琦直播间带货怼网友，“哪里贵了，国货很难的”“这么多年工资没涨，有没有认真工作？”本人事后垂泪道歉仍掉粉百万，但是闻风而来的国货品牌却迎来了一场流量盛宴。从蜂花蹲点“捡”粉丝，上架三款79元洗…...

编程日记 2023/9/14 18:42:18

linux 下 C++ 与三菱PLC 通过MC Qna3E 二进制协议进行交互

西门子plc 有snap7库进行交互，并且支持c 而且跨平台。但是三菱系列PLC并没有现成的开源项目，没办法只能自己拼接，我这里实现了MC 协议 Qna3E 帧，并使用二进制进行交互。 #pragma once#include <stdio.h> #include <std…...

编程日记 2023/9/14 18:40:16

Spring基础（2w字---学习总结版）

目录一、Spirng概括 1、什么是Spring 2、什么是容器 3、什么是IoC 4、模拟实现IoC 4.1、传统的对象创建开发 5、理解IoC容器 6、DI概括二、创建Spring项目 1、创建spring项目 2、Bean对象 2.1、创建Bean对象 2.2、存储Bean对象（将Bean对象注册到容器…...

编程日记 2023/9/14 18:39:15

07 目标检测-YOLO的基本原理详解

一、YOLO的背景及分类模型 1、YOLO的背景上图中是手机中的一个app，在任何场景下(工业场景，生活场景等等)都可以试试这个app和这个算法，这个app中间还有一个button，来调节app使用的模型的大小，更大的模型实时性差但精…...

编程日记 2023/9/14 18:37:12

杭州网站建设哪家好/手机系统优化软件哪个好

$secretKey 你的secretKey;$srcStr GETfaceid.tencentcloudapi.com/?;// 文档中示例是POST的这里改成GET 这里踩个坑- -$param ["Action"> DetectAuth,//默认"Nonce"> rand(1000,9999),"SecretId">"你的secretId",Regio…...

编程日记 2025/1/15 15:53:31

每个网站都有服务器吗/一手app推广接单平台

定义： 使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系，将这个对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。解决的问题请求和处理分开、实现解耦、提高系统的灵活…...

编程日记 2025/1/15 15:25:51

淘宝做轮播广告哪个网站好/市场推广怎么做

Swift中的注释使用"// MARK:- 注释内容",对属性或方法进行注释使用"///注释内容"对属性或方法提供调用说明的注释使用extension对同一个类中的相关方法进行划分. extension类似于OC中的category,也是只能扩充方法,不能扩充属性使用代码添加UITableView…...

编程日记 2025/1/15 14:06:06

做设计常用的素材网站/一个新产品策划方案

WebStorm 2019 for mac是JetBrains公司旗下一款很好用的JavaScript开发工具。，支持自动代码完成，动态代码分析，重构支持以及VCS集成，功能强大，被誉为最智能的JavaScript IDE。WebStorm 2019 Mac破解版最大的特点是支持…...

编程日记 2025/1/15 9:24:47

商城建站服务/东莞seo优化

下面由sublime教程栏目给大家介绍sublime自动修复eslint报错的方法，希望对需要的朋友有所帮助！问题描述PyQt 环境正常，可以使用 Windows 的虚拟 DOS 正常运行，但在 Sublime Text 2 下使用 Ctrl B运行后，界面不显示&a…...

编程日记 2025/1/15 8:56:57

青海建设厅通报网站/seo提升关键词排名

作者简介李剑，携程系统研发部技术专家，负责Redis和Mongodb的容器化和服务化工作，喜欢深入分析系统疑难杂症。前言随着携程的应用大规模在生产上用容器部署，各种上规模的问题都慢慢浮现，其中比较难定位和解决的就是偶发…...

编程日记 2025/1/15 7:26:19