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

第一次接触jquery

news 2026/3/31 12:47:25

文章目录

  • 一.关于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

快速部署MinerU镜像：开箱即用的PDF提取方案，告别繁琐配置

快速部署MinerU镜像&#xff1a;开箱即用的PDF提取方案&#xff0c;告别繁琐配置 1. 引言&#xff1a;为什么你需要一个“开箱即用”的PDF提取工具&#xff1f; 如果你曾经尝试过从一份复杂的PDF文档里提取文字、表格和公式&#xff0c;你大概率经历过这样的痛苦&#xff1a;…...

编程新知 2026/3/31 12:46:00

Shiny框架终极指南：输入控件与输出渲染的完美交互原理

Shiny框架终极指南&#xff1a;输入控件与输出渲染的完美交互原理 【免费下载链接】shiny Easy interactive web applications with R 项目地址: https://gitcode.com/gh_mirrors/sh/shiny Shiny是R语言生态中一款强大的交互式Web应用框架&#xff0c;它让数据科学家和分…...

编程新知 2026/3/31 11:23:11

终极指南：如何构建现代化微服务架构 - Zend Framework Expressive完整教程

终极指南&#xff1a;如何构建现代化微服务架构 - Zend Framework Expressive完整教程 【免费下载链接】zendframework Official Zend Framework repository 项目地址: https://gitcode.com/gh_mirrors/ze/zendframework 在当今快速发展的微服务架构时代&#xff0c;PHP…...

编程新知 2026/3/31 10:59:05

终极指南：Redaxios参数序列化完全掌握，自定义查询字符串生成逻辑如此简单

终极指南&#xff1a;Redaxios参数序列化完全掌握&#xff0c;自定义查询字符串生成逻辑如此简单 【免费下载链接】redaxios The Axios API, as an 800 byte Fetch wrapper. 项目地址: https://gitcode.com/gh_mirrors/re/redaxios Redaxios是一个轻量级的Fetch封装库&a…...

编程新知 2026/3/31 10:32:45

Blender 3MF插件终极指南：从零开始掌握3D打印文件格式

Blender 3MF插件终极指南&#xff1a;从零开始掌握3D打印文件格式 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 3MF&#xff08;3D Manufacturing Format&#xff09;格…...

编程新知 2026/3/31 10:00:21

实时口罩检测系统性能优化：从算法到工程全链路调优

实时口罩检测系统性能优化&#xff1a;从算法到工程全链路调优 1. 引言 在公共场所疫情防控中&#xff0c;实时口罩检测系统发挥着重要作用。但在实际部署中&#xff0c;很多开发者会遇到性能瓶颈&#xff1a;检测速度跟不上视频流帧率、GPU资源占用过高、误报漏报频发等问题…...

编程新知 2026/3/31 8:43:47

Phi-3-mini-4k-instruct-gguf实操手册：短问答/改写/摘要三大高频场景落地

Phi-3-mini-4k-instruct-gguf实操手册&#xff1a;短问答/改写/摘要三大高频场景落地 1. 模型简介与核心能力 Phi-3-mini-4k-instruct-gguf是微软推出的轻量级文本生成模型&#xff0c;基于Phi-3系列优化而来。这个GGUF版本特别适合处理短文本任务&#xff0c;具有以下特点&a…...

编程新知 2026/3/31 8:33:43

敏捷团队沟通技巧：减少冲突的5个方法

在敏捷开发环境中&#xff0c;软件测试从业者常面临跨职能冲突的挑战。数据显示&#xff0c;超过70%的项目延迟源于沟通不畅&#xff0c;尤其在测试与开发团队之间&#xff0c;角色目标错位&#xff08;如开发侧重快速交付&#xff0c;测试聚焦风险防控&#xff09;易引发摩擦。…...

编程新知 2026/3/31 7:37:23

n600高效涡流选粉机设计【说明书 CAD图纸 开题报告 任务书 实习报告】

n600高效涡流选粉机作为粉体分级领域的核心设备&#xff0c;其设计聚焦于提升分级精度与处理效率。该设备通过优化涡流场分布与颗粒运动轨迹&#xff0c;实现微细粉体的高效分离。其核心作用在于利用离心力和气流的复合作用&#xff0c;使不同粒径的颗粒在旋转流场中产生差异化…...

编程新知 2026/3/31 7:27:17

Android BLE开发实战：从BlueDroid扫描流程到性能调优全解析（附代码示例）

Android BLE开发深度优化&#xff1a;从BlueDroid扫描机制到实战性能调优 1. 理解BLE扫描的核心机制 在Android蓝牙低功耗&#xff08;BLE&#xff09;开发中&#xff0c;扫描机制是连接设备的第一步&#xff0c;也是最容易出现性能瓶颈的环节。与传统的蓝牙扫描不同&#xff0…...

编程新知 2026/3/31 7:15:05