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

JavaScript-----jQuery

news 2026/2/9 22:16:19

 目录

前言：

1. jQuery介绍

2. 工厂函数 - $()

jQuery通过选择器获取元素，$("选择器")  

 过滤选择器，需要结合其他选择器使用。

3.操作元素内容

4. 操作标签属性

5. 操作标签样式

6. 元素的创建,添加,删除

7.数据与对象遍历

8.jQuery事件处理

前言：

        今天我们学习JavaScript里面的jQuery，前面我们学习了怎么去通过DOM来获取到html里面的元素 ，那今天我们就学习jQuery进一步去简便获取到html的元素，提高代码的效率，下面就一起来看看吧！

1. jQuery介绍

jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。

2. 工厂函数 - $()

在此之前我们要去引用jQuery的一个文件到html标签当中. 

    <script src="https://www.w3school.com.cn/jquery/jquery.js"></script>

"$()"函数用于获取元素节点，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列jQuery 操作的方法。

用法： 

原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :

  1. 原生JavaScript转换jQuery对象 $(原生对象)，返回 jQuery 对象

  2. jQuery对象转换原生JavaScript对象

    • 方法一 : 根据下标取元素,取出即为原生对象 var div = $("div")[0];

    • 方法二 : 使用jQuery的get(index)取原生对象 var div2 = $("div").get(0);

jQuery通过选择器获取元素，$("选择器")  

标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")
后代选择器： $("div .c1")
子代选择器： $("div>span")
相邻兄弟选择器： $("h1+p")  //匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $("h1~h2") //匹配选择器1后所有满足选择器2的兄弟元素

 过滤选择器，需要结合其他选择器使用。

:first匹配第一个元素 例:$("p:first")
:last匹配最后一个元素 例:$("p:last")
:odd匹配奇数下标对应的元素
:even匹配偶数下标对应的元素
:eq(index)匹配指定下标的元素
:lt(index)匹配下标小于index的元素
:gt(index)匹配下标大于index的元素
:not(选择器)否定筛选,除()中选择器外,其他元素

 代码示例：

<body><div class="he" id="www">555</div><div class="he" id="w">555</div><script>let a=document.getElementsByClassName('he')[0];console.log(a);let b=$('.he');//返回一个jq对象console.log(b,b[0],b[1]);</script>
</body>

结果如下：

3.操作元素内容

// 设置或读取标签内容,等价于原生innerHTML,可识别标签语法
html() 
// 设置或读取标签内容,等价于innerText,不能识别标签
text() 
// 设置或读取表单元素的值,等价于原生value属性
val()

注意：同样的html() 可以去识别标签，text() 不能识别标签

代码示例：

<body><div class="he" id="www">555</div><div class="he">jk</div><input type="text" value="895"><script>document.getElementsByClassName('he')[0].innerHTML='你好世界'console.log($('.he').html(),$('input').text());console.log($("input").val('bey!'));console.log($("input").get(0).value);</script>
</body>

4. 操作标签属性

  1. attr("attrName","value") 设置或读取标签属性 （如果存在属性值的话，就会去修改属性值；如果不存在属性值的话，那么就会去创建一个属性值（自定义属性值））

  2. prop("attrName","value") 设置或读取标签属性 注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写

  3. removeAttr("attrName") 移除指定属性

<body><input type="text" value="895"><script>console.log($('input').attr('value','di'));//对已有属性值进行修改console.log($('input').attr('name','jack'));//创建新的属性值console.log($('input')[0]);$('input').removeAttr('name'); //删除属性值console.log(document.getElementsByTagName('input')[0]);</script>
</body>

5. 操作标签样式

针对类选择器,提供操作class属性值的方法

// 添加指定的类名
addClass("className")	
// 移除指定的类型,如果参数省略,表示清空class属性值
removeClass("className")
// 如果当前元素存在指定类名,则移除;不存在则添加
toggleClass("className")

操作行内样式  

// 设置行内样式
css("属性名","属性值")  
// 设置一组CSS样式
css(对象)

代码示例：

<body><div class="leimu">斯巴拉西</div><script>$('.leimu').css('color','blue');$('.leimu').css('background-color','pink');</script>
</body>

6. 元素的创建,添加,删除

1.创建：使用$("标签语法")，返回创建好的元素

// 创建元素
let div = $("<div></div>");	
// 设置内容和属性
div.html("动态创建").attr("id","d1").css("color","red"); 
let h1 = $("<h1 id='d1'>一级标题</h1>")

 2.作为子元素添加

// 在$obj的末尾添加子元素newObj
$obj.append(newObj);
// 作为第一个子元素添加至$obj中
$obj.prepend(newObj);

 3.作为兄弟元素添加

// 在$obj的后面添加兄弟元素
$obj.after(newObj);	
// 在$obj的前面添加兄弟元素
$obj.before(newObj);

代码示例：

<body><div class="leimu">斯巴拉西</div><script>//创建一个元素let p=$('<p>486</p>');let q=$("<div>666</div>");//添加到div最后面$('.leimu').append(p);//添加到div的第一个子元素$('.leimu').prepend(q);</script>
</body>

7.数据与对象遍历

1.$(selector).each() 方法规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element){})

必需。为每个匹配元素规定运行的函数。

  • index - 选择器的 index 位置

  • element - 当前的元素

2.$.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理

$.each(Object, function(index, data){});

必需。为每个匹配元素规定运行的函数。

  • index - 选择器的 index 位置

  • data- 当前的数据  

示例：

        //遍历数组let b=[1,2,3,4,5,6];$.each(b,function(i,val){console.log(i,val);})//遍历对象let a={name:'jack',age:18,num:2000355};$.each(a,function(i,val){console.log(i,val);})

8.jQuery事件处理

 文档加载完毕原生JavaScript 方法：window.onload jQuery:

文档加载完毕原生JavaScript 方法：window.onload
jQuery:

区别：原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行

事件绑定方式

$("div").on("click",function(){});
$("div").click(function(){});   

示例：

<body><button class="01">click_me</button><button class="02">点击我哦</button><script>//监听点击事件//方法一：$("..01").on('click',function(){console.log('我被点击了');});//方法二：$(".02").click(function(){console.log('点击了我');})</script>

以上就是今天的全部内容了，我们下一期再见！

分享一张壁纸：

相关文章：

JavaScript-----jQuery

目录 前言&#xff1a; 1. jQuery介绍 2. 工厂函数 - $() jQuery通过选择器获取元素&#xff0c;$("选择器") 过滤选择器&#xff0c;需要结合其他选择器使用。 3.操作元素内容 4. 操作标签属性 5. 操作标签样式 6. 元素的创建,添加,删除 7.数据与对象遍历…...

编程日记 2023/9/11 6:42:16

Stream流

Stream操作流 在Java 8中&#xff0c;得益于Lambda所带来的函数式编程&#xff0c;引入了一个全新的Stream概念&#xff0c;用于解决已有集合类库既有的弊端。 1.1 集合的迭代 几乎所有的集合&#xff08;如 Collection 接口或 Map 接口等&#xff09;都支持直接或间接的迭代…...

编程日记 2023/9/11 6:41:14

javaee spring 声明式事务管理方式2 注解方式

spring配置文件 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xmlns:context"http://www.springframewo…...

编程日记 2023/9/11 6:40:13

基于SpringBoot+微信小程序的智慧医疗线上预约问诊小程序

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 近年来&#xff0c;随…...

编程日记 2023/9/11 6:39:11

注意力机制讲解与代码解析

一、SEBlock(通道注意力机制) 先在H*W维度进行压缩&#xff0c;全局平均池化将每个通道平均为一个值。 &#xff08;B, C, H, W&#xff09;---- (B, C, 1, 1) 利用各channel维度的相关性计算权重 (B, C, 1, 1) --- (B, C//K, 1, 1) --- (B, C, 1, 1) --- sigmoid 与原特征相…...

编程日记 2023/9/11 6:38:10

微调 TrOCR – 训练 TrOCR 识别弯曲文本

TrOCR（基于 Transformer 的光学字符识别）模型是性能最佳的 OCR 模型之一。在我们之前的文章中，我们分析了它们在单行打印和手写文本上的表现。然而，与任何其他深度学习模型一样，它们也有其局限性。TrOCR 在处理开箱即用的弯曲文本时表现不佳。本文将通过在弯曲文本数据集上…...

编程日记 2023/9/11 6:37:09

Jetsonnano B01 笔记7：Mediapipe与人脸手势识别

今日继续我的Jetsonnano学习之路&#xff0c;今日学习安装使用的是&#xff1a;MediaPipe 一款开源的多媒体机器学习模型应用框架。可在移动设备、工作站和服务 器上跨平台运行&#xff0c;并支持移动 GPU 加速。 介绍与程序搬运官方&#xff0c;只是自己的学习记录笔记&am…...

编程日记 2023/9/11 6:36:08

vue学习之v-if/v-else/v-else-if

v-else/v-else-if 创建 demo7.html,内容如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Docum…...

编程日记 2023/9/11 6:35:07

ansible的安装和简单的块使用

目录 一、概述 二、安装 1、选择源 2、安装ansible 3、模块查看 三、实验 1、拓扑​编辑 2、设置组、ping模块 3、hostname模块 4、file模块 ​编辑 5、stat模块 6、copy模块&#xff08;本地拷贝到远程&#xff09; 7、fetch模块与copy模块类似&#xff0c;但作用…...

编程日记 2023/9/11 6:34:06

Android 状态栏显示运营商名称

Android 原生设计中在锁屏界面会显示运营商名称&#xff0c;用户界面中&#xff0c;大概是基于 icon 数量长度显示考虑&#xff0c;对运营商名称不作显示。但是国内基本都加上运营商名称。对图标显示长度优化基本都是&#xff1a;缩小运营商字体、限制字数长度、信号图标压缩上…...

编程日记 2023/9/11 6:33:05

10.Xaml ListBox控件

1.运行界面 2.运行源码 a.Xaml 源码 <Grid Name="Grid1"><!--IsSelected="True" 表示选中--><ListBox x:Name="listBo...

编程日记 2023/9/11 6:32:03

基于vue3和element-plus的省市区级联组件

git地址&#xff1a;https://github.com/ht-sauce/elui-china-area-dht 使用:npm i elui-china-area-dht 默认使用 使用方法 <template><div class"app"><!--默认使用--><elui-china-area-dht change"onChange"></elui-china…...

编程日记 2023/9/11 6:31:00

Paper: 利用RNN来提取恶意软件家族的API调用模式

论文 摘要 恶意软件家族分类是预测恶意软件特征的好方法&#xff0c;因为属于同一家族的恶意软件往往有相似的行为特征恶意软件检测或分类方法分静态分析和动态分析两种&#xff1a; 静态分析基于恶意软件中包含的特定签名进行分析&#xff0c;优点是分析的范围覆盖了整个代码…...

编程日记 2023/9/11 6:29:59

sdkman 安装以及 graalvm安装

sdkman安装以及graalvm安装全过程, (可能需要梯子) tiamTiam-Lenovo:~$ curl -s "https://get.sdkman.io" | bash-syyyyyyys:/yho: -yd./yh/ m..oho. hy ..sh/ :N -/…...

编程日记 2023/9/11 6:28:58

如何正确使用 WEB 接口的 HTTP 状态码和业务状态码？

当设计和开发 Web 接口时&#xff0c;必然会和 HTTP 状态码与业务状态码这两个概念打交道。很多同学可能没有注意过这两个概念或者两者的区别&#xff0c;做得稀里糊涂&#xff0c;接下来详细讲解下二者的定义、区别和使用方法。 HTTP 状态码 HTTP 状态码是由 HTTP 协议定义的…...

编程日记 2023/9/11 6:27:57

Spark【Spark SQL（三）DataSet】

DataSet DataFrame 的出现&#xff0c;让 Spark 可以更好地处理结构化数据的计算&#xff0c;但存在一个问题&#xff1a;编译时的类型安全问题&#xff0c;为了解决它&#xff0c;Spark 引入了 DataSet API&#xff08;DataFrame API 的扩展&#xff09;。DataSet 是分布式的数…...

编程日记 2023/9/11 6:26:56

制作立体图像实用软件：3DMasterKit 10.7 Crack

3DMasterKit 软件专为创建具有逼真 3D 和运动效果的光栅图片而设计&#xff1a;翻转、动画、变形和缩放。 打印机、广告工作室、摄影工作室和摄影师将发现 3DMasterKit 是一种有用且经济高效的解决方案&#xff0c;可将其业务扩展到新的维度&#xff0c;提高生成的 3D 图像和光…...

编程日记 2023/9/11 6:25:55

高校 Web 站点网络安全面临的主要的威胁

校园网 Web 站点的主要安全威胁来源于计算机病毒、内部用户恶意攻击和 破坏、内部用户非恶意的错误操作和网络黑客入侵等。 2.1 计算机病毒 计算机病毒是指编制者在计算机程序中插入的破坏计算机功能或者数据&#xff0c; 影响计算机使用并且能够自我复制的一组计算机指令或…...

编程日记 2023/9/11 6:24:54

vue前端解决跨域

1,首先 axios请求&#xff0c;看后端接口路径&#xff0c;http://122.226.146.110:25002/api/xx/ResxxList&#xff0c;所以baseURL地址改成 ‘/api’ let setAxios originAxios.create({baseURL: /api, //这里要改掉timeout: 20000 // request timeout}); export default s…...

编程日记 2023/9/11 6:23:53

【Cicadaplayer】解码线程及队列实现

4.4分支https://github.com/alibaba/CicadaPlayer/blob/release/0.4.4/framework/codec/ActiveDecoder.h对外：送入多个包，获取一个帧 int send_packet(std::unique_ptr<IAFPacket> &packet, uint64_t timeOut) override;int getFrame(std::u...

编程日记 2023/9/11 6:22:52

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2026/2/5 4:23:32

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2026/2/8 0:47:08

归并排序：分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

编程新知 2026/1/27 17:06:38

shell脚本质数判断

shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数&#xff09;shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数&#xff09; 思路&#xff1a; 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...

编程新知 2025/12/8 12:56:00

SQL进阶之旅 Day 22：批处理与游标优化

【SQL进阶之旅 Day 22】批处理与游标优化 文章简述&#xff08;300字左右&#xff09; 在数据库开发中&#xff0c;面对大量数据的处理任务时&#xff0c;单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”&#xff0c;深入探讨如何通过批量操作和游标技术提…...

编程新知 2025/9/29 3:08:51

n8n：解锁自动化工作流的无限可能

在当今快节奏的数字时代&#xff0c;无论是企业还是个人&#xff0c;都渴望提高工作效率&#xff0c;减少重复性任务的繁琐操作。而 n8n&#xff0c;这个强大的开源自动化工具&#xff0c;就像一位智能的数字助手&#xff0c;悄然走进了许多人的工作和生活&#xff0c;成为提升…...

编程新知 2025/12/22 5:11:44

【Redis】Redis 的持久化策略

目录 一、RDB 定期备份 1.2 触发方式 1.2.1 手动触发 1.2.2.1 自动触发 RDB 持久化机制的场景 1.2.2.2 检查是否触发 1.2.2.3 线上运维配置 1.3 检索工具 1.4 RDB 备份实现原理 1.5 禁用 RDB 快照 1.6 RDB 优缺点分析 二、AOF 实时备份 2.1 配置文件解析 2.2 开启…...

编程新知 2026/2/4 4:39:02

智能问数Text2SQL Vanna windows场景验证

架构 Vanna 是一个开源 Python RAG&#xff08;检索增强生成&#xff09;框架&#xff0c;用于 SQL 生成和相关功能。 机制 Vanna 的工作过程分为两个简单步骤 - 在您的数据上训练 RAG“模型”&#xff0c;然后提出问题&#xff0c;这些问题将返回 SQL 查询&#xff0c;这些查…...

编程新知 2026/2/4 13:51:56