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

第一次接触jquery

news 2025/9/14 23:14:19

文章目录

  • 一.关于jqurey
  • 二.什么是jqurey
  • 三.上课实例
    • 1.表格 2.鼠标移动效果 3隐藏和显示效果
    • 代码如下
    • 注意

一.关于jqurey

简而言之：jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

二.什么是jqurey

jQuery 是一个 JavaScript 函数库。

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

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示： 除此之外，jQuery 还提供了大量的插件。

三.上课实例

1.表格 2.鼠标移动效果 3隐藏和显示效果

代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="jquery-3.6.3.min.js"></script><script type="text/javascript" src="index.js" defer></script></head><body><button type="button" id="btn">隐藏</button><table id="tab"><tr><th>姓名</th><th>年龄</th><th>爱好</th></tr><tr><td>xxx</td><td>19</td><td>唱歌</td></tr><tr><td>xxx</td><td>20</td><td>游戏</td></tr><tr><td>xxx</td><td>3</td><td>小汽车</td></tr><tr><td>xxx</td><td>31</td><td>唱歌</td></tr></table></body>
</html>

$("#tab").css({"width":"600px","margin":"0 auto","text-align":"center","line-height":"30px"})$("tr:odd").css({"background":"red","color":"blue"
})
.mouseleave(function(){$(this).css({"background":"red","color":"blue"})
});$("tr:even").css({"background":"#333","color":"#ddd"
})
.mouseleave(function(){$(this).css({"background":"#333","color":"#ddd"})});//鼠标移动上去改变背景颜色
//链式写法
$("tr").mouseenter(function(){$(this).css({"background":"red"})
});$("#btn").click(function(){$("#tab").toggle();/* if($(this).text=="隐藏"){$(this).text("显示");$("#tab").fadeOut(2000);}else{$(this).text("隐藏");$("#tab").fadeIn(2000);} */});

注意

JQUREY的语法和CSS有些不同，它是以$().()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有 < p > 元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的 < p > 元素

$(“#test”).hide() - 隐藏 id=“test” 的元素

相关文章：

第一次接触jquery

文章目录一.关于jqurey二.什么是jqurey三.上课实例1.表格 2.鼠标移动效果 3隐藏和显示效果代码如下注意一.关于jqurey 简而言之&#xff1a;jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 二.什么是jqurey jQuery 是一个 JavaScript 函数库。 jQu…...

编程日记 2023/2/20 5:58:24

Vue中 引入使用 babel-polyfill 兼容低版本浏览器

注意&#xff1a;本文主要介绍的 vue-cli 版本&#xff1a;3.x&#xff0c; 4.x&#xff1b; 最近在项目中使用 webpack 打包后升级&#xff0c;用户反馈使用浏览器&#xff08;chrome 45&#xff09;访问白屏。经过排查发现&#xff1a;由于 chrome 45 无法兼容 ES6 语法导致的…...

编程日记 2023/2/20 5:57:17

ArcGIS Enterprise on Kubernetes 11.0安装示例

博客主页&#xff1a;https://tomcat.blog.csdn.net 博主昵称&#xff1a;农民工老王 主要领域&#xff1a;Java、Linux、K8S 期待大家的关注&#x1f496;点赞&#x1f44d;收藏⭐留言&#x1f4ac; 目录安装前置条件基本安装解压文件生成秘钥执行安装脚本配置DNS方法一方法二…...

编程日记 2023/2/20 5:56:09

js 防抖函数 节流函数

某些事件中(如 onresize onscroll onkeydown onkeyup onmousemove …)&#xff0c;会连续触发函数的执行&#xff0c;如果函数执行一些耗时的操作(如请求数据…)&#xff0c;会影响性能&#xff0c;也有可能造成服务器压力。这时可以用 防抖函数 或 节流函数解决这种问题。 防…...

编程日记 2023/2/20 5:55:04

Yarn节点unhealthy解决办法

这几天用Spark计算任务时&#xff0c;发现yarn上有两个节点不参与计算&#xff0c;很是tm的离谱。使用下面的命令查看Yarn上的nodemanager节点状态yarn node -list -all发现两个节点处于unhealthy状态。经过Google查明原因&#xff1a;这种情况一般是因为那个节点上HDFS文件过多…...

编程日记 2023/2/20 5:52:43

【jumpServer 功能梳理】

用户管理 1.1 用户列表 创建jumpServe 账号 ;角色分为用户 管理员&#xff1b;更新账号信息&#xff1b;查看用户详情以及授权的资产&#xff1b; 1.2 用户组 用户组&#xff0c;这个组的意义在于用一个统称对接资源&#xff1b;用户组包含多个用户&#xff0c;可以操作增加删除…...

编程日记 2023/2/20 5:51:37

中国各省人力资本测算就业人员受教育程度构成（2000-2021年）

数据来源&#xff1a;自主整理 时间跨度&#xff1a;2000-2021年 区域范围&#xff1a;全国各省 指标说明&#xff1a; 人力资本测算公式&#xff1a;&#xff08;小学*6初中*9高中*12大专及以上*16&#xff09;/六岁及以上人口 参考文献&#xff1a; [1]罗仁福, 刘承芳,…...

编程日记 2023/2/20 5:50:32

java面试题-集合篇

Collection1.Collection有哪些类&#xff1f;Java集合框架中的Collection接口是所有集合类的基础接口&#xff0c;定义了一些基本的集合操作&#xff0c;如添加元素、删除元素、判断是否包含某个元素等。常见的集合类包括List、Set和Queue。ListList接口定义了按照索引访问和操…...

编程日记 2023/2/20 5:49:24

Python 异步: 同时运行多个协程（10）

asyncio 的一个好处是我们可以同时运行许多协程。这些协同程序可以在一个组中创建并存储&#xff0c;然后同时一起执行。这可以使用 asyncio.gather() 函数来实现。 让我们仔细看看。 1. 什么是 Asyncio gather() asyncio.gather() 模块函数允许调用者将多个可等待对象组合在一…...

编程日记 2023/2/20 5:48:17

SVN 获取多版本间的更新内容

文章目录背景介绍操作步骤 - 获取某段时间内的代码更新内容背景介绍 公司有个项目期初明确要做微信小程序&#xff0c;没有做其他端的意向&#xff0c;并且当时团队人数有限&#xff0c;没有项目实践过 uniapp&#xff0c;项目时间周期紧&#xff0c;就没有用 uniapp 去实现 然…...

编程日记 2023/2/20 5:47:11

c++ const使用说明

作⽤ 1. 修饰变量&#xff0c;说明该变量不可以被改变&#xff1b; 2. 修饰指针&#xff0c;分为指向常量的指针和指针常量&#xff1b; 3. 常量引⽤&#xff0c;经常⽤于形参类型&#xff0c;即避免了拷⻉&#xff0c;⼜避免了函数对值的修改&#xff1b; 4. 修饰成员函数…...

编程日记 2023/2/20 5:46:03

VSTO 开发 EXCEL 委托与多线程的极简示例

VSTO 开发 EXCEL 委托与多线程的极简示例问题解决步骤代码问题 这几天做 excel 加载项时遇到一个问题&#xff0c;对话框弹窗显示后&#xff0c;需要等待网络数据的返回来填充 ListBox 控件&#xff0c;由于网络延迟问题&#xff0c;整个窗体连带 Excel 一起白屏卡顿 5-10秒&a…...

编程日记 2023/2/20 5:44:58

spring之使用Spring的AOP

文章目录前言一、准备工作1、添加相应的依赖2、添加相应的命名空间3、创建目标类4、创建切面二、使用AOP1.在切面类中编写增强代码以及切点表达式2、开启aspectj的自动代理3、测试类4、测试结果前言 Spring对AOP的实现包括以下三种方式 1、Spring框架结合AspectJ框架实现的AOP…...

编程日记 2023/2/20 5:43:51

LeetCode LCP 66. 最小展台数量

力扣嘉年华将举办一系列展览活动&#xff0c;后勤部将负责为每场展览提供所需要的展台。 已知后勤部得到了一份需求清单&#xff0c;记录了近期展览所需要的展台类型&#xff0c; demand[i][j] 表示第 i 天展览时第 j 个展台的类型。 在满足每一天展台需求的基础上&#xff0c;…...

编程日记 2023/2/20 5:42:46

设计模式之模板方法模式

什么是模板方法模式 模板方法模式定义了一个操作中算法的框架&#xff0c;而将一些步骤延迟到子类中&#xff0c;使得子类可以不改变一个算法的结构就可以重定义该算法的某些特定步骤。     模板方法模式主要包含几下几个角色&#xff1a;         AbstractClass(抽…...

编程日记 2023/4/1 9:30:41

Python数据挖掘基础

一、Matplotlib 画二维图表的python库&#xff0c;实现数据可视化 &#xff0c; 帮助理解数据&#xff0c;方便选择更合适的分析方法1、折线图1.1引入matplotlibimport matplotlib.pyplot as plt %matplotlib inlineplt.figure() plt.plot([1, 0, 9], [4, 5, 6]) plt.show()1.2…...

编程日记 2023/2/20 5:40:32

Go基础-函数

文章目录1 定义2 参数的写法3 返回值的写法4 空白符1 定义 函数是将输入数据通过一系列算法运算之后&#xff0c;输出对应的结果。函数一般都是一些特定的功能块&#xff0c;实现某一种功能的封装&#xff0c;降低代码的冗余性 语法 // 关键字 函数名 函数参数 返…...

编程日记 2023/2/20 5:39:24

AC的改进算法——TRPO、PPO

两类AC的改进算法 整理了动手学强化学习的学习内容 1. TRPO 算法&#xff08;Trust Region Policy Optimization&#xff09; 1.1. 前沿 策略梯度算法即沿着梯度方向迭代更新策略参数 。但是这种算法有一个明显的缺点&#xff1a;当策略网络沿着策略梯度更新参数&#xff0c…...

编程日记 2023/2/20 5:38:18

【C++学习】list的使用及模拟实现

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; list的使用及模拟实现&#x1f63c;构造函数&#x1f435;模拟实现&#x1f63c;迭代器&#x1f435;…...

编程日记 2023/2/20 5:37:13

动态规划专题精讲1

致前行的人&#xff1a; 要努力&#xff0c;但不要着急&#xff0c;繁花锦簇&#xff0c;硕果累累都需要过程&#xff01; 前言&#xff1a; 本篇文章为大家带来一种重要的算法题&#xff0c;就是动态规划类型相关的题目&#xff0c;动态规划类的题目在笔试和面试中是考察非常高…...

编程日记 2023/2/20 5:36:07

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/8/18 10:21:48

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/9/9 16:59:16

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/9/1 22:19:02

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/9/13 17:42:33

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/9/6 5:46:56

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/7/20 9:54:27