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

JavaScript-----jQuery

news 文章来源：https://blog.csdn.net/m0_73633088/article/details/132782181 2025/1/23 14:53:55

 目录

前言：

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

把文件上传到Gitee的详细步骤

目录 第一步&#xff1a;创建一个空仓库 第二步&#xff1a;找到你想上传的文件所在的地址&#xff0c;打开命令窗口&#xff0c;git init 第三步&#xff1a;git add 想上传的文件 &#xff0c;git commit -m "给这次提交取个名字" 第四步&#xff1a;和咱们在第…...

编程日记 2023/9/11 6:21:50

基于keras中Lenet对于mnist的处理

文章目录 MNIST导入必要的包加载数据可视化数据集查看数据集的分布开始训练画出loss图画出accuracy图 使用数据外的图来测试图片可视化转化灰度图的可视化可视化卷积层的特征图第一层卷积 conv1 和 pool1第二层卷积 conv2 和 pool2 MNIST MNIST&#xff08;Modified National …...

编程日记 2023/9/11 6:20:48

Python爬虫 教程：IP池的使用

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 一、简介 爬虫中为什么需要使用代理 一些网站会有相应的反爬虫措施&#xff0c;例如很多网站会检测某一段时间某个IP的访问次数&#xff0c;如果访问频率…...

编程日记 2023/9/11 6:19:47

Ansible之playbook剧本

一、playbook概述1.1 playbook 介绍1.2 playbook 组成部分 二、playbook 示例2.1 playbook 启动及检测2.2 实例一2.3 vars 定义、引用变量2.4 指定远程主机sudo切换用户2.5 when条件判断2.6 迭代2.7 Templates 模块1.先准备一个以 .j2 为后缀的 template 模板文件&#xff0c;设…...

编程日记 2023/9/11 6:18:45

unique_ptr的大小探讨

unique_ptr大小和删除器有很大关系&#xff0c;具体区别看如下代码的分析。不要让unique_ptr占用的空间太大&#xff0c;否则不会达到裸指针同样的效果。 #include <iostream> #include <memory> using namespace std;class Widget {int m_x;int m_y;int m_z;publ…...

编程日记 2023/9/11 6:17:44

人工智能TensorFlow PyTorch物体分类和目标检测合集【持续更新】

1. 基于TensorFlow2.3.0的花卉识别 基于TensorFlow2.3.0的花卉识别Android APP设计_基于安卓的花卉识别_lilihewo的博客-CSDN博客 2. 基于TensorFlow2.3.0的垃圾分类 基于TensorFlow2.3.0的垃圾分类Android APP设计_def model_load(img_shape(224, 224, 3)_lilihewo的博客-CS…...

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

ElementPlus·面包屑导航实现

面包屑导航 使用vue3中的UI框架elementPlus的 <el-breadcrumb> 实现面包屑导航 <template><!-- 面包屑 --><div class"bread-container" ><el-breadcrumb separator">"><el-breadcrumb-item :to"{ path:/ }&quo…...

编程日记 2023/9/11 6:15:43

【项目管理】PM vs PMO 18点区别

导读&#xff1a;项目经理跟PMO主要有哪些区别&#xff1f;首先从定义上了解&#xff0c;然后根据其他维度进行对比分析&#xff0c;基本可以了解这二者的区别&#xff0c;文中罗列18点区别供各位参考。 目录 1、定义 1.1 PMO 1.2 PM 2、两者区别 2.1 ROI 2.2 项目成功率…...

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

13 Python使用Json

概述 在上一节&#xff0c;我们介绍了如何在Python中使用xml&#xff0c;包括&#xff1a;SAX、DOM、ElementTree等内容。在这一节&#xff0c;我们将介绍如何在Python中使用Json。Json的英文全称为JavaScript Object Notation&#xff0c;中文为JavaScript对象表示法&#xff…...

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

PDFBOX和ASPOSE.PDF

一、aspose.pdf 文档 https://docs.aspose.com/pdf/java/ 1、按段落分段 /*** docx文本按段分段*/ public static void main(String[] args) {int i 1;try {// 打开文件流FileInputStream file new FileInputStream("I:\\范文.docx");// 创建 Word 文档对象XWPFDo…...

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

网站制作一般收费/站长工具在线查询

A&#xff0e;不可以填充颜色B&#xff0e;填充效果如封闭图形一样C&#xff0e;填充的颜料将漏到整个绘图窗口中D&#xff0e;以上都不对24&#xff0e;在Windows 2000的资源管理器中&#xff0c;格式化磁盘操作可用_______。A&#xff0e;左击磁盘图标&#xff0c;选[格式化]…...

编程日记 2025/1/23 13:09:42

高端网网站建设/中国足球世界排名

在游戏中每个人物的武将台词设计的特别有意思&#xff0c;也是性格和生平事迹的展示。而有时候&#xff0c;因为语句述说过快而常常被听错。今天咱们就来看看哪些台词被听错了吧&#xff0c;绝对有你听错过的。NO.1 貂蝉——亲&#xff0c;帮妾身充充气嘛&#xff01;这句台词出…...

编程日记 2025/1/23 12:38:00

谁做视频网站/关键词优化排名查询

http://www.cnblogs.com/AnnieKim/archive/2013/06/15/MorrisTraversal.html转载于:https://www.cnblogs.com/CarryPotMan/p/5343681.html...

编程日记 2025/1/23 10:58:21

做外贸什么网站/网站优化要多少钱

大数据与互联网的结合一、互联网产业的需求二、大数据平台架构三、大数据应用--数据分析四、数据分析案例一、互联网产业的需求 1、分布式系统执行任务瓶颈&#xff1a;延迟高。MapReduce&#xff1a;几分钟&#xff0c;Spark&#xff1a;几秒钟。 2、互联网产品要求&#xf…...

编程日记 2025/1/23 10:33:08

自己在网站做邮箱/电脑培训中心

前言 目前越来越多的红蓝对抗中&#xff0c;钓鱼邮件攻击使用的越来越频繁&#xff0c;也是比较高效打点的一种方式&#xff0c;常见的钓鱼邮件攻击一种是直接通过二维码&#xff0c;内嵌链接、直接索要敏感信息等方式钓运维人员、内部人员相关的管理账号密码&#xff0c;另一…...

编程日记 2025/1/23 10:11:18

网站中文域名好不好/搭建网站的五大步骤

Math.Round&#xff1a;四舍六入五取整 Math.Ceiling&#xff1a;向上取整&#xff0c;只要有小数都加1 Math.Floor&#xff1a;向下取整&#xff0c;总是舍去小数转载于:https://www.cnblogs.com/fifirain/p/7249489.html...

编程日记 2025/1/23 8:43:38