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

第一次接触jquery

文章目录

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

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

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

ArcGIS Enterprise on Kubernetes 11.0安装示例

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

js 防抖函数 节流函数

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

Yarn节点unhealthy解决办法

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

【jumpServer 功能梳理】

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

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

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

java面试题-集合篇

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

Python 异步: 同时运行多个协程(10)

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

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

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

c++ const使用说明

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

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

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

spring之使用Spring的AOP

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

LeetCode LCP 66. 最小展台数量

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

设计模式之模板方法模式

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

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…...

Go基础-函数

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

AC的改进算法——TRPO、PPO

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

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

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

动态规划专题精讲1

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

PPO(proximal policy optimization)算法

博客写到一半发现有篇讲的很清楚&#xff0c;直接化缘了 https://www.jianshu.com/p/9f113adc0c50 Policy gradient 强化学习的目标&#xff1a;学习到一个策略πθ(a∣s)\pi\theta(a|s)πθ(a∣s)来最大化期望回报。 一种直接的方法就是在策略空间中直接搜索来得到最优策略&…...

ElasticSearch基本使用

title: ElasticSearch基本使用 date: 2022-08-29 00:00:00 tags: ElasticSearch基本使用 categories:ElasticSearch 基本概念 随着ES版本的升级&#xff0c;文中有些概念可能已经废弃。 索引词(term) 一个能够被索引的精确值&#xff0c;区分大小写&#xff0c;可以通过term查…...

windows微软商店下载应用失败/下载故障的解决办法;如何在网页上下载微软商店的应用

一、问题背景 设置惠普打印机时&#xff0c;需要安装hp smart&#xff0c;但是官方只提供微软商店这一下载渠道。 点击安装HP Smart&#xff0c;确定进入微软商店下载。 完全加载不出来&#xff0c;可能是因为开了代理。 把代理关了&#xff0c;就能正常打开了。 但是点击“…...

MySQL进阶篇之InnoDB存储引擎

06、InnoDB引擎 6.1、逻辑存储结构 表空间&#xff08;Tablespace&#xff09; 表空间在MySQL中最终会生成ibd文件&#xff0c;一个mysql实例可以对应多个表空间&#xff0c;用于存储记录、索引等数据。 段&#xff08;Segment&#xff09; 段&#xff0c;分为数据段&#x…...

商标侵权行为的种类有哪些

商标侵权行为的种类有哪些 1、商标侵权行为的种类有以下七种&#xff1a; (1)未经商标注册人的许可&#xff0c;在同一种商品上使用与其注册商标相同的商标的; (2)未经商标注册人的许可&#xff0c;在同一种商品上使用与其注册商标近似的商标&#xff0c;或者在类似商品上使…...

Similarity-Preserving KD(ICCV 2019)原理与代码解析

paper&#xff1a;Similarity-Preserving Knowledge Distillationcode&#xff1a;https://github.com/megvii-research/mdistiller/blob/master/mdistiller/distillers/SP.py背景本文的灵感来源于作者观察到在一个训练好的网络中&#xff0c;语义上相似的输入倾向于引起相似的…...

在Linux和Windows上安装seata-1.6.0

记录&#xff1a;381场景&#xff1a;在CentOS 7.9操作系统上&#xff0c;安装seata-1.6.0。在Windows上操作系统上&#xff0c;安装seata-1.6.0。Seata&#xff0c;一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。版本&#xff1a;JDK…...

兼职任务平台收集(二)分享给有需要的朋友们

互联网时代&#xff0c;给人们带来了很大的便利。信息交流、生活缴费、足不出户购物、便捷出行、线上医疗、线上教育等等很多。可以说&#xff0c;网络的时代会一直存在着。很多人也在互联网上赚到了第一桶金&#xff0c;这跟他们的努力和付出是息息相关的。所谓一份耕耘&#…...

目标检测三大数据格式VOC,YOLO,COCO的详细介绍

注&#xff1a;本文仅供学习&#xff0c;未经同意请勿转载 说明&#xff1a;该博客来源于xiaobai_Ry:2020年3月笔记 对应的PDF下载链接在&#xff1a;待上传 目录 目标检测常见数据集总结 V0C数据集(Annotation的格式是xmI) A. 数据集包含种类: B. V0C2007和V0C2012的区别…...

SpringBoot实现统一返回接口(除AOP)

起因 关于使用AOP去实现统一返回接口在之前的博客中我们已经实现了&#xff0c;但我突然突发奇想&#xff0c;SpringBoot中异常类的统一返回好像是通过RestControllerAdvice 这个注解去完成的&#xff0c;那我是否也可以通过这个注解去实现统一返回接口。 正文 这个方法主要…...

网站换空间 seo/2345浏览器下载安装

最近在尝试做一个QQ截图那样的工具&#xff0c;其中一个功能就是要做一个选择框&#xff0c;自然用到了CRectTracker 但是有一个很关键的东西就是&#xff0c;拖拽CRectTracker的时候&#xff0c;不能让CRectTracker“移出”屏幕&#xff0c;否则截图出来就有黑色的块 怎么办&a…...

做ppt模板网站/百度百科入口

http://rcv.kaist.ac.kr/~ail/...

域名备案以后怎么建设网站/ip软件点击百度竞价推广

XML数据文件灵活而强大,在C#中,操作起来也十分方便.我们常用XML文件保存少量的数据,如系统配置信息,用户个性数据...,而对这些数据的操作最常用的就是读取,写入和删除相关的结点.本人的实际的应用过程中,逐步形成了以下XML配置文件的操作类.下面的这个类为大家提供了一系列更加…...

动态网站的功能与特点/怎样做网站的优化、排名

East Central North America 2005-2006——Two Ends 题目来源&#xff1a; POJ 2738Codeforces Gym 100650H题意&#xff1a; 有一组数&#xff0c;你和一个人轮流取数&#xff08;只能从两端取&#xff09;&#xff0c;问你能取到的最大的数和同时对方取到的数的差值。 题解&a…...

做一元购网站 要多少钱/百度双十一活动

mysql 安装双击d:\websoft\mysql-essential-5.1.63-win32.msi 就开始安装了 看图操作出现上面的界面&#xff0c;不要点cancel 那是取消&#xff0c; 等等选择“custom”然后点“next” 出现下面的界面这个是选择mysql 安装的位置&#xff0c;默认在c盘&#xff0c;我们点“cha…...

自己做一个网站一年的费用/seo搜索引擎工具

首先做一个窗体如下 然后单元中如下代码&#xff1a; 在implementation下面声明两个方法如下&#xff1a; //外部方法&#xff0c;只声明一个参数&#xff0c;此时按照标准的对象内部事件方法TNotifyEvent声明,此声明中&#xff0c;Sender则对应为产生该事件的对象指针。…...