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

JQuery介绍

news 2025/10/19 11:35:10

文章目录

一. JQuery介绍
二. JQuery使用
三. JQuery选择器
四. JQuery选择集过滤
五.JQuery选择集转移
六. JQuery获取和操作标签内容
七. JQuery获取和设置元素属性
八. JQuery事件
九.JQuery事件代理
- - 事件冒泡
- - 事件绑定的问题
- - 事件代理

一. JQuery介绍

定义: jquery是JS的一个函数库
作用: 负责网页交互
优点: 兼容主流浏览器, 简化JS编程过程, 提高开发效率

二. JQuery使用

<script src="JS/jquery-1.12.4.min.js"></script>
<!-- 注意导入 jquery 的script区域和标签操作区域不能一样 -->
<script>代码
</script>

JS对象和Jquery对象转换

js对象 ----> jquery对象
oDiv ----> $(oDiv)Jquery对象 ----> js对象
$Div ----> $Div[0]

在浏览器中, 可以使用控制台

> var oDiv = document.getElementById('box')
undefined
> oDiv;
<div id="box"> 这是一个div </div>
> var $Div = $(oDiv)
undefined
> $Div
n.fn.init [div#box, context: div#box]
> $Div[0]
<div id="box"> 这是一个div </div>
> $Div[1]
undefined

三. JQuery选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入Jquery --><script src="JS/jquery-1.12.4.min.js"></script><!-- 书写自己的js代码 --><script>// 入口函数$(function(){// 标签选择器  $('标签')var result = $('div');console.log(result.length);  // 2// id选择器   $('#ID号')console.log($('#box').length);  // 1// 类选择器   $('#类名')console.log($('.box').length);  // 1// 层级选择器 $('选择器1 选择器2')console.log($('div p').length);   // 2// 属性选择器 $('选择器[属性=值]')console.log($('div[class="box"]').length);  // 1});</script>
</head>
<body><div id="box" class="box">这是第一个div<p>好好学习</p></div><div >这时第二个div<p>天天向上</p></div>
</body>
</html>

四. JQuery选择集过滤

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="Js/jquery-1.12.4.min.js"></script><script>$(function(){$('div').css({'background': 'red'});// 选择集过滤, has 可以再指定其他选择器进行筛选, 相当于加了一个条件$('div').has('p').css({'font-size': '28px', 'background': 'pink'});// eq(下标)   下标是从0开始的, 1就表示第二个div标签$('div').eq(1).css({'color': 'green'});});</script>
</head>
<body><div>这是第一个div<p>好好学习</p></div><div>这是第二个div <br>天天向上</div>
</body>
</html>

五.JQuery选择集转移

注意: 转移不包含自己, 而过滤是包含自己的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JS/jquery-1.12.4.min.js"></script><script>$(function(){// 选择文字3的标签$li = $('#box');$li.css({'background': 'red'});// 选择上一个   $li.prev()$li.prev().css({'background': 'green'});// 选择上面所有的   $li.prevAll()$li.prevAll().css({'color': 'blue'});// 选择下一个$li.next().css({'background': 'yellow'});// 选择下面所有的$li.nextAll().css({'color': 'orange'});// 选择除了自己之外的同一级节点$li.siblings().css({'font-size': '26px'});// 选择父级节点$('ul').parent().css({'background': 'pink'});// 选择子集节点$('div').children().css({'background': 'blue'});// find() 查找的是子标签,最终选择子标签$('div').find('.c_p').css({'color': 'red'});// has()  查找的是子标签,最终选择的是自己$('div').has('.c_p').css({'font-size': '30px'});});</script>
</head>
<body><ul><!-- li{文字$}*8 可以批量生成 --><li>文字1</li><li>文字2</li><li id="box">文字3</li><li>文字4</li><li>文字5</li><li>文字6</li><li>文字7</li><li>文字8</li></ul><div>this is div1<p>this is p1</p></div><div>this is div2<p class="c_p">this is p2</p></div>
</body>
</html>

六. JQuery获取和操作标签内容

获取标签内容: 标签对象.html()
设置标签内容: 标签对象.html('内容')
追加标签内容: 标签对象.append('内容')

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){// 获取标签内容var sResult = $('div').html();alert(sResult);// 修改标签内容$('div').html('good good study!');// 追加标签内容$('div').append('<a href="http://www.baidu.com">百度</a>');});</script>
</head>
<body><div>好好学习</div>
</body>
</html>

七. JQuery获取和设置元素属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JS/jquery-1.12.4.min.js"></script><script>$(function(){var $A = $('a');// 获取a标签的 href 属性alert($A.prop('href'));// 设置属性, 可以直接修改原有属性或者增加新属性$A.prop({'href': 'https://www.csdn.net/', 'target': '_blank'});});function fnClick(){// 获取input标签alert($('#box').prop('value'));};function fnAdd(){// 先获取 输入的值// alert($('#box').prop('value'));var result = $('#box').val();// 默认获取到的数据类型是字符串, 想要进行加法计算, 需要进行类型转换result = parseInt(result);$('#box').val(result + 10);};</script>
</head>
<body><div><a href="http://www.baidu.com">百度</a></div><div><input type="text" name="" id="box" value="10"><input type="button" value="点击获取 input 内容" onclick="fnClick()"><input type="button" value="点击, 对 input 的数字 + 10显示" onclick="fnAdd()"></div>
</body>
</html>

八. JQuery事件

鼠标点击: click()
失去焦点: blur()
获得焦点: focus()
鼠标进入: mouseover()
鼠标离开: mouseleave()
页面标签加载完成: $(document).ready()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 80px;background: red;font-size: 26px;}</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){// 鼠标点击事件$('div').click(function(){// 特殊变量 this   发生事件的标签对象, 相当于python的selfconsole.log('鼠标点击了: ',$(this).html());});// 鼠标进入$('div').mouseover(function(){console.log('鼠标进入了');$(this).css({'background': 'blue'});});// 鼠标离开$('div').mouseleave(function(){console.log('鼠标离开了');$(this).css({'background': 'red'});});// 获得焦点 输入框$('input').focus(function(){$(this).prop({'placeholder': ''});$(this).css({'font-size': '28px'});});// 失去焦点$('input').blur(function(){$(this).prop({'placeholder': '请输入内容'});$(this).css({'font-size': ''});});});</script>
</head>
<body><div>这是一个div</div><input type="text" placeholder="请输入内容">
</body>
</html>

九.JQuery事件代理

事件代理: 使用事件冒泡的原理, 让父标签代理子标签的事件

$(父标签选择器).delegate(子标签选择器, 代理事件, 处理函数);

- 事件冒泡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;background: red;}.box2{width: 100px;height: 100px;background: pink;}</style><script src="js/jquery-1.12.4.min.js"></script><script>// 事件冒泡: 内层标签的事件会向外层标签进行传递, 例如 下面两个div ,点击内层的div , 外层的div也会随着发生变化$(function(){$('div').click(function(){$(this).css({'background': 'blue'});});});</script>
</head>
<body><div class="box1">This is div <div class="box2">Good Good Study</div></div>
</body>
</html>

- 事件绑定的问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){// 事件绑定, 只能对在绑定之前已经存在的标签进行绑定, 新加入的标签不能绑定$('li').click(function(){console.log($(this).html());});});function fnClick(){// 添加li标签$('ul').append('<li>文字' + ($('li').length+1) + '</li>');};</script>
</head>
<body><ul><li>文字1</li><li>文字2</li><li>文字3</li><li>文字4</li><li>文字5</li></ul><input type="button" value="点击添加li标签" onclick="fnClick()">
</body>
</html>

- 事件代理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){// 事件代理, 让父标签代理子标签的事件// delegate('子元素选择器', '代理的事件名称', '当事件触发时执行的代码,可以写 function(){}匿名函数')$('ul').delegate('li', 'click', function(){console.log($(this).html());});});function fnClick(){// 添加li标签$('ul').append('<li>文字' + ($('li').length+1) + '</li>');};</script>
</head>
<body><ul><li>文字1</li><li>文字2</li><li>文字3</li><li>文字4</li><li>文字5</li></ul><input type="button" value="点击添加li标签" onclick="fnClick()">
</body>
</html>

JQuery介绍

文章目录一. JQuery介绍二. JQuery使用三. JQuery选择器四. JQuery选择集过滤五.JQuery选择集转移六. JQuery获取和操作标签内容七. JQuery获取和设置元素属性八. JQuery事件九.JQuery事件代理- 事件冒泡- 事件绑定的问题- 事件代理一. JQuery介绍定义: jquery是JS的一个函数…...

编程日记 2023/3/20 15:03:18

Selenium基础篇之八大元素定位方式

文章目录前言一、如何进行元素定位？1.右击元素-检查2.F12-选择工具点击元素3.借助selenium IDE二、八大元素定位方式1.ID1.1 方法1.2 举例1.3 代码1.4 截图2.NAME2.1 方法2.2 举例2.3 代码2.4 截图3.CLASS_NAME3.1 方法3.2 举例3.3 代码3.4 截图4.TAG_NAME4.1 方法4…...

编程日记 2023/3/20 14:58:16

C语言的灵魂---指针（基础）

C语言灵魂指针1.什么是指针？2.指针的大小3.指针的分类3.1比较常规的指针类型3.2指针的解引用操作3.3野指针野指针的成因：4.指针运算4.1指针加减整数4.2指针-指针1.什么是指针？ 这个问题我们通常解释为两种情况： 1.指针本质&#…...

编程日记 2023/3/20 14:53:14

带你一文透彻学习【PyTorch深度学习实践】分篇——线性模型梯度下降

分享给大家一段我国著名作家、散文家史铁生先生的一段话：把路想象的越是坎坷就越是害怕，把山想象的越是险峻就越会胆怯，把别人想象的越是优秀就越是不敢去接近。惯于这样想象的人，是天生谦卑的人。 --------史铁生《关于恐惧》 🎯作者主页：追光者♂🔥 �…...

编程日记 2023/3/20 14:48:12

Javascript如何截取含有表情的字符串

Javascript如何截取含有表情的字符串一、说说背景社区社交应用中，难免会有输入用户昵称的操作，如果用户老老实实的输入中文汉字或者英文字母，那当然没啥问题，我们能够轻松的处理字符串的截取，产品说按多少字符截取…...

编程日记 2023/3/20 14:43:09

【云原生】prometheus结合jmx exporter 的java agent模式采集tomcat监控实战

前言大家好，我是沐风晓月，今天我们又来探讨一款使用prometheus监控tomcat的另外一种形式：Java agent模式。如果你想使用http server模式，请参考：【云原生】prometheus结合jmx exporter 的http server模式采集tomca…...

编程日记 2023/3/20 14:38:08

深度学习应用技巧总结与pytorch框架下训练过程的记忆技巧

大家好，我是微学AI，今天给大家总结一下深度学习模型训练过程中的一些技巧总结，以及pytorch框架下训练过程的记忆技巧，很有用的干货，理解模型训练过程的步骤，让流程难懂，难记忆的过程变得简单&am…...

编程日记 2023/3/20 14:33:07

数字图像处理基于OpenCV的一种简单的阴影校正的方法

一、简述在很多工业场景，都是基于工业相机、或者结合显微镜进行拍照采样，以进行进一步的分析，通常情况下分析结果和图像的质量息息相关，我们这里讨论的主要是因光照不均衡而在图像边缘产生阴影的图像的校正。 1、亮度阴影亮度阴影（光学上称为渐晕，Vignetting）就是我们…...

编程日记 2023/3/20 14:28:05

OpenHarmony之cJSON库使用介绍

一、前言我们前面OpenHarmony设备配网文章中，给大家提供的示例有使用cJSON解析和cJSON创建json数据的用法那么有同学会提出疑问，我难道只能用cJSON库？ 当然不是啊，你也可以用 json-parser、parson、jansson 等等三方库回到正题…...

编程日记 2023/3/24 1:07:45

门面设计模式

介绍 Java门面模式(Facade Pattern)是一种结构型设计模式,它提供了一个简单的接口,隐藏了复杂系统的实现细节,使得客户端可以更加容易地使用系统. 在Java门面模式中,一个门面对象(Facade)提供了一个简单的接口,该接口包装了一个或多个复杂的子系统,客户端可以直接使用门面对象…...

编程日记 2023/3/24 3:24:48

苹果手写笔好用吗？比较好用的ipad手写笔推荐

随着技术的进步，各种新型的电子产品和数码器件层出不穷。比如智能手机、IPAD、以及电容笔。而在实际生活中，为了更好的利用ipad，我们需要一支好用的电容笔。就好比如我们在ipad上做笔记，要用手来进行手写记录，会很不方…...

编程日记 2023/3/24 3:24:39

GPT-4来了！看看她究竟强在哪里！

GPT-4来了！OpenAI老板Sam Altman直接开门见山地介绍说：这是我们迄今为止功能最强大的模型！GPT-4是一个超大的多模态模型，也就是说，它的输入可以是文字（上限2.5万字），还可以是图像。我…...

编程日记 2023/3/20 13:51:09

GPT-4 API 接口调用及价格分析

GPT-4 API 接口调用及价格分析 15日凌晨，OpenAI发布了万众期待的GPT-4！新模型支持多模态，具备强大的识图能力，并且推理能力和回答准确性显著提高。在各种专业和学术基准测试上的表现都媲美甚至超过人类。难怪OpenAI CEO Sam Altm…...

编程日记 2023/3/20 13:46:07

MySQL高级功能：存储过程、触发器、事务、备份和恢复

MySQL高级功能MySQL是一款广泛使用的关系型数据库管理系统，它不仅具有基本的数据库功能，还支持一些高级功能，如存储过程、触发器、事务、备份和恢复等。这些高级功能可以帮助开发人员更高效地管理和维护数据库，本文将介绍MySQL的高…...

编程日记 2023/3/20 13:41:06

SAP 发出商品业务配置

SAP发出商品业务配置，即： 出具销售发票时结转成本一、业务背景： 发出商品业务简单的理解为跨月开票，即出库与开票不在同一个月份。该业务在系统内的实现方式，为保证成本与收入的配比，在出库时不计算成…...

编程日记 2023/3/20 13:36:04

C++线程池理解

线程池基本信息线程池是一种结合池化思想衍生出来的一种线程管理及使用的方案其主要针对服务器端多线程场景下，服务器频繁接收请求，每个请求都分配一个单独的线程去处理。使用线程的开销： 创建和销毁线程调度线程线程池主要解决的核…...

编程日记 2023/3/20 13:31:03

2023年最新软著申请流程（一）：软件著作权说明、国家版权官网的账号注册与实名认证

若该文为原创文章，转载请注明原文出处本文章博客地址：https://hpzwl.blog.csdn.net/article/details/129230460 红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…...

编程日记 2023/3/20 13:26:01

SuperMap iServer如何发布S3对象存储中的瓦片

作者：Carlo 前言： S3 对象存储服务是一个基于对象的海量存储服务，为客户提供海量、安全、高可靠、低成本的数据存储能力。其海量、安全的特性，为存储海量瓦片提供可能。 SuperMap iServer 支持将存储在阿里云对象存储 (OSS)、华为…...

编程日记 2023/3/20 13:20:59

ElasticSearch-第四天

目录 ElasticSearch文档分值_score计算底层原理 relevance score算法 Term frequency Inverse document frequency Field-length norm 分析一个document上的_score是如何被计算出来的分词器工作流程切分词语内置分词器的介绍定制分词器 ik分词器详解 IK分词器自…...

编程日记 2023/3/20 13:15:58

基于鲸鱼算法的极限学习机(ELM)分类算法-附代码

基于鲸鱼算法的极限学习机(ELM)分类算法文章目录基于鲸鱼算法的极限学习机(ELM)分类算法1.极限学习机原理概述2.ELM学习算法3.分类问题4.基于鲸鱼算法优化的ELM5.测试结果6.参考文献7.Matlab代码摘要：本文利用鲸鱼算法对极限学习机进行优化，并用于分类问…...

编程日记 2023/3/20 13:10:57

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...

编程新知 2025/10/19 2:35:33

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2025/10/15 14:22:53

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...

编程新知 2025/10/18 19:23:35

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

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

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

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/10/19 1:25:53

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

C++ Visual Studio 2017厂商给的源码没有.sln文件易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/10/6 7:38:54

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/9/24 10:52:31

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录使用 erase 返回值继续迭代使用索引进行遍历我们知道类似 vector 的顺序迭代器被删除后，迭代器会失效，因为顺序迭代器在内存中是连续存储的，元素删除后，后续元素会前移。但一些场景中，我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20