【前端基础篇】JavaScript之jQuery介绍

文章目录

  • 前言
  • JQuery基本介绍和使用方法
    • 引入依赖
  • jQuery语法
  • jQuery选择器
  • jQuery事件
  • 操作元素
    • 获取/设置元素内容
    • 获取/设置元素属性
    • 获取/返回css属性
    • 添加元素
    • 删除元素
  • 总结：
    • 常用的jQuery方法 - 详细解释与示例
    • 事件处理拓展 - 详细解释与示例
  • 其他拓展内容

前言

在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔😘

JQuery基本介绍和使用方法

W3C 标准给我们提供了⼀系列的函数, 让我们可以操作:

  • ⽹⻚内容
  • ⽹⻚结构
  • ⽹⻚样式

但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象.

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素，从⽽减少了开发⼈员编写的代码量，提⾼了开发效率,

它提供的 API 易于使⽤且兼容众多浏览器，这让诸如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为.

引入依赖

使⽤JQuery需要先引⼊对应的库

在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

参考地址：jQuery CDN

在这里插入图片描述

在这里插入图片描述

Jquery官⽅共提供了4种类型的JQuery库：

uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢)

minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐)

slim: 精简瘦⾝版, 没有Ajax和⼀些特效

slim minified : slim 的压缩版

开发时, 建议把JQuery库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险.

下载⽅式:

  1. 通过浏览器访问上述连接
  2. 右键 -> 另存为… 保存到本地, 放在项⽬中即可.

也可以从其他CDN上下载引⽤JQuery

⽐如：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></scr

jQuery语法

jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作

基础语法：

 $(selector).action()

  • $() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.

  • Selector 选择器, ⽤来"查询"和"查找" HTML 元素

  • action 操作, 执⾏对元素的操作

JQuery 的代码通常都写在 document ready 函数中

document：整个⽂档对象, ⼀个⻚⾯就是⼀个⽂档对象, 使⽤document表⽰.

这是为了防⽌⽂档在完全加载（就绪）之前运⾏ jQuery 代码，即在⽂档加载完成后才可以对⻚⾯进⾏操作。

如果在⽂档没有完全加载之前就运⾏函数，操作可能失败

$(document).ready(function(){// jQuery functions go here
})

示例：

<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>$(document).ready(function(){$('button').click(function(){$(this).hide();});
});</script>

给按钮添加了click事件,点击后元素消失.

简洁写法:

$(function(){  // jQuery functions go here  });

jQuery选择器

我们通过JQuery选择器来选择⼀些HTML元素.然后对元素进⾏操作.

JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器.

jQuery中所有选择器都以$ 开头：$().

语法描述
$(“*”)选取所有元素
$(this)选取当前 HTML 元素
$(“p”)所有

元素

$(“p:first”)选取第一个

元素

$(“p:last”)最后一个

元素

$(“.box”)所有 class=“box” 的元素
$(“#box”)id=“box” 的元素
$(“.intro.demo”)所有 class=“intro” 且 class=“demo” 的元素
$(“p.intro”)选取 class 为 intro 的

元素

$(“ul li:first”)选取第一个
  • 元素的第一个
  • 元素
$(“:input”)所有 元素
$(“:text”)所有 type=“text” 的 元素
$(“:checkbox”)所有 type=“checkbox” 的 元素

jQuery事件

JS要构建动态⻚⾯,就需要感知到⽤⼾的⾏为.

⽤⼾对于⻚⾯的⼀些操作(点击,选择,修改等)操作都会在浏览器中产⽣⼀个个事件,被JS获取到,从⽽进⾏更复杂的交互操作.

浏览器就是⼀个哨兵,在侦查敌情(⽤⼾⾏为).⼀旦⽤⼾有反应(触发具体动作),哨兵就会点燃烽⽕台的狼烟(事件),后⽅就可以根据狼烟来决定下⼀步的对敌策略.

事件由三部分组成：

  1. 事件源:哪个元素触发的
  2. 事件类型:是点击,选中,还是修改?
  3. 事件处理程序:进⼀步如何处理.往往是⼀个回调函数.

例如:某个元素的点击事件:

$("p").click(function(){//动作发⽣后执⾏的代码 
});

常⻅的事件有:

事件代码
文档就绪事件(完成加载)$(document).ready(function)
点击事件$(selector).click(function)
双击事件$(selector).dblclick(function)
元素的值发生改变$(selector).change(function)
鼠标悬停事件$(selector).mouseover(function)

操作元素

获取/设置元素内容

三个简单的获取元素内容的JQuery⽅法：

JQuery方法说明
text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容（包括 HTML 标签）
val()设置或返回表单字段的值

**这三个⽅法即可以获取元素的内容,⼜可以设置元素的内容. **

  • 有参数时,就进⾏元素的值设置

  • 没有参数时,就进⾏元素内容的获取

代码示例：

获取元素内容：

<div id="test"><span>你好</span></div><input type="text" value="hello"><script>$(document).ready(function () {var html = $("#test").html();console.log("html内容为:"+html);var text = $("#test").text();console.log("⽂本内容为:"+text);var inputVal = $("input").val();console.log(inputVal);});
</script>

设置元素内容：

<div id="test"></div>
<div id="test2"></div>
<input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>设置html</h1>');$("#test2").text('<h1>设置text</h1>');$("input").val("设置内容");
});
</script>

获取/设置元素属性

JQuery attr()⽅法⽤于获取属性值.

代码示例：

获取元素属性：

<p><a href="https://www.bitejiuyeke.com/index" id="bite">小明</a></p><script>$(function(){var href = $("p a").attr("href")console.log(href);
});
</script>

设置元素属性：

<p><a href="https://www.bitejiuyeke.com/index" id="bite">小明</a></p><script>$(function(){$("p a").attr("href","baidu.com")console.log($("p a").attr("href"));
});
</script>

获取/返回css属性

css()⽅法设置或返回被选元素的⼀个或多个样式属性

代码⽰例：

获取元素属性

<div style="font-size: 36px;">我是⼀个⽂本</div><script>$(function(){var fontSize = $("div").css("font-size");console.log(fontSize);
});
</script>

设置元素属性

<div style="font-size: 36px;">我是⼀个⽂本</div><script>$(function(){$("div").css("font-size","24px");
});
</script>

添加元素

添加HTML内容

  1. append():在被选元素的结尾插⼊内容
  2. prepend():在被选元素的开头插⼊内容
  3. after():在被选元素之后插⼊内容
  4. before():在被选元素之前插⼊内容
<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<img src="pic/rose.jpg"><script>$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("img").before("图⽚前插⼊");$("img").after("图⽚后插⼊");
});
</script>

删除元素

删除元素和内容，⼀般使⽤以下两个jQuery⽅法：

  1. remove():删除被选元素（及其⼦元素）
  2. empty():删除被选元素的⼦元素。

代码示例：

删除被选元素（及其子元素）

<div id="div1">我是⼀个div</div>
<button>删除 div 元素</button><script>$(function () {$('button').click(function(){$('#div1').remove();});
});
</script>

删除被选元素的子元素

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<button>删除列表元素</button><script>$(function () {$('button').click(function(){$('ol').empty();});
});
</script>

总结：

常用的jQuery方法 - 详细解释与示例

  1. text(): 用于获取或设置所选元素的文本内容。这是最常用的方法之一，特别是在动态更新页面内容时。

    // 获取文本
var text = $("#elementId").text();
console.log(text);  // 打印出元素的文本内容// 设置文本
$("#elementId").text("新的文本内容");
// 此时，页面上的 #elementId 元素的文本内容会变为 "新的文本内容"

  2. html(): 用于获取或设置所选元素的HTML内容。这对于更新包含HTML标签的内容非常有用。

    // 获取HTML内容
var htmlContent = $("#elementId").html();
console.log(htmlContent);  // 打印出元素的HTML内容// 设置HTML内容
$("#elementId").html("<strong>新的HTML内容</strong>");
// 此时，#elementId 的内容将被替换为粗体的“新的HTML内容”

  3. val(): 用于获取或设置表单元素的值，特别是在表单交互过程中非常有用。

    // 获取表单值
var inputValue = $("#inputId").val();
console.log(inputValue);  // 打印出输入框的当前值// 设置表单值
$("#inputId").val("新值");
// 用户在 inputId 输入框中会看到值被更新为 "新值"

  4. css(): 获取或设置CSS属性，能够动态地改变元素的样式，是实现动态交互效果的重要工具。

    // 获取CSS属性
var backgroundColor = $("#elementId").css("background-color");
console.log(backgroundColor);  // 打印出背景颜色属性的值// 设置CSS属性
$("#elementId").css("background-color", "blue");
// 此时，#elementId 元素的背景颜色会变为蓝色

  5. attr(): 获取或设置HTML元素的属性值，例如链接的href、图片的src等。

    // 获取属性值
var hrefValue = $("#linkId").attr("href");
console.log(hrefValue);  // 打印出链接的 href 属性值// 设置属性值
$("#linkId").attr("href", "https://new-url.com");
// 链接的目标地址会被更新为 "https://new-url.com"

  6. addClass(): 为元素添加一个或多个类，通常用于动态控制样式的应用。

    $("#elementId").addClass("newClass anotherClass");
// 现在，#elementId 元素上会有 "newClass" 和 "anotherClass" 两个类

  7. removeClass(): 移除元素的一个或多个类，通常与addClass()配合使用，用于动态样式切换。

    $("#elementId").removeClass("oldClass anotherOldClass");
// "oldClass" 和 "anotherOldClass" 类将被从 #elementId 元素上移除

  8. toggleClass(): 切换元素的类，即如果元素已经有该类，则移除；如果没有，则添加。适合用于开关状态的切换。

    $("#elementId").toggleClass("activeClass");
// 如果 #elementId 元素当前有 "activeClass" 类，则移除它，否则添加它

事件处理拓展 - 详细解释与示例

  1. focus(): 当元素获得焦点时触发，常用于输入框的交互。

    $("#inputId").focus(function(){$(this).css("background-color", "yellow");
});
// 当用户点击或 Tab 键进入 #inputId 输入框时，背景颜色会变为黄色

  2. blur(): 当元素失去焦点时触发，通常用于验证用户输入。

    $("#inputId").blur(function(){$(this).css("background-color", "white");
});
// 当用户离开 #inputId 输入框时，背景颜色会恢复为白色

  3. hover(): 当鼠标悬停在元素上时触发两个不同的函数，分别用于鼠标移入和移出。通常用于增强用户体验。

    $("#elementId").hover(function(){$(this).css("background-color", "lightblue");}, function(){$(this).css("background-color", "lightgrey");}
);
// 当鼠标进入 #elementId 元素时，背景颜色变为浅蓝色；移出时，变为浅灰色

  4. keydown(): 当用户按下键盘按键时触发，适合处理键盘事件。

    $(document).keydown(function(event){alert("你按下了键盘上的按键: " + event.key);
});
// 当用户按下任意键时，弹出一个包含按键字符的警告框

  5. submit(): 当表单提交时触发，通常用于在提交前进行验证或提交确认。

    $("form").submit(function(){alert("表单已提交!");
});
// 用户提交表单时，弹出提示

  6. change(): 当表单元素的值发生变化时触发，适用于下拉菜单或单选按钮等。

    $("#selectElement").change(function(){alert("选择的值是: " + $(this).val());
});
// 当用户选择不同的选项时，弹出当前选择的值

其他拓展内容

除了这些基本功能外，jQuery还提供了一些高级功能，例如：

  1. animate(): 用于制作复杂动画。

    $("#elementId").animate({opacity: 0.25,left: "+=50",height: "toggle"
}, 5000, function() {// 动画完成后执行的回调函数alert("动画完成");
});
// 此代码将使 #elementId 渐渐变透明，同时向右移动50px，并在5秒内切换高度

  2. ajax(): 用于进行异步HTTP请求，可以加载数据而无需重新加载页面。

    $.ajax({url: "https://api.example.com/data",type: "GET",success: function(response) {$("#elementId").html(response);},error: function(error) {console.log("请求失败", error);}
});
// 使用GET方法从指定URL加载数据，并在成功时将其显示在 #elementId 元素中

  3. fadeIn() / fadeOut(): 处理淡入淡出效果，常用于显示或隐藏内容。

    $("#elementId").fadeIn(1000);  // 元素将在1秒内淡入
$("#elementId").fadeOut(1000); // 元素将在1秒内淡出

  4. slideUp() / slideDown(): 实现滑动隐藏和显示效果。

    $("#elementId").slideUp(1000);   // 元素将在1秒内向上滑动隐藏
$("#elementId").slideDown(1000); // 元素将在1秒内向下滑动显示

以上就是关于【前端基础篇】JavaScript之jQuery介绍的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/91136.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/91136.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vue入门：vue项目的创建和基本概念

Vue入门：vue项目的创建和基本概念

一、vue的基本简介1. 什么是vue?Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。无论是简单还是…
阅读更多...
2.oracle保姆级安装教程

2.oracle保姆级安装教程

一、Oracle数据库安装1.找到软件的位置 D:\学习软件\Oracle&#xff0c;并解压软件2.双击setup.exe3.选择 是4.去掉勾&#xff0c;下一步5.创建和配置数据库&#xff0c;下一步6.桌面类&#xff0c;下一步7.配置安装路径地址和密码8.点完成9.正在安装&#xff0c;稍等片刻10.有…
阅读更多...
STM32 软件模拟 I2C 读写 MPU6050--实现加速度与陀螺仪数据采集

STM32 软件模拟 I2C 读写 MPU6050--实现加速度与陀螺仪数据采集

演示视频&#xff1a; https://www.bilibili.com/video/BV1iCQRYXEBb/?share_sourcecopy_web&vd_source0e4269581b0bc60d57a80c9a27c98905一、前言在嵌入式开发中&#xff0c;MPU6050 六轴传感器因其集成加速度计和陀螺仪且成本低廉&#xff0c;广泛应用于平衡小车、飞控、…
阅读更多...
TFLOPs与TOPS的转换关系详解：如何衡量AI芯片的算力？

TFLOPs与TOPS的转换关系详解：如何衡量AI芯片的算力？

在评估AI芯片或计算硬件的性能时&#xff0c;我们经常会遇到TFLOPs和TOPS这两个关键指标。很多开发者对它们的区别和转换关系存在疑惑。本文将深入解析这两个指标的含义、应用场景及转换方法&#xff0c;并提供实际应用中的注意事项。 一、基本概念解析 1.1 TFLOPs&#xff08;…
阅读更多...
C语言：第11天笔记

C语言：第11天笔记

C语言&#xff1a;第11天笔记 内容提要函数函数的概述函数的分类函数的定义形参和实参函数的返回值函数的调用函数的声明函数 函数的概述 **函数&#xff1a;**实现一定功能的&#xff0c;独立的代码模块&#xff0c;对于函数的使用&#xff0c;一定是先定义&#xff0c;后使 ​…
阅读更多...
java导出pdf（使用html）

java导出pdf（使用html）

引入maven <dependencies><!-- Thymeleaf --><dependency><groupId>org.thymeleaf</groupId><artifactId>thymeleaf</artifactId><version>3.1.1.RELEASE</version> <!-- 或与 Spring Boot 匹配的版本 --></de…
阅读更多...
Qt 远程过程调用（RPC）实现方案

Qt 远程过程调用（RPC）实现方案

在分布式系统开发中&#xff0c;远程过程调用&#xff08;RPC&#xff09;是实现跨进程、跨机器通信的重要技术。Qt 作为一个强大的跨平台框架&#xff0c;提供了多种 RPC 实现方案&#xff0c;能够满足不同场景下的通信需求。本文将深入探讨 Qt 中 RPC 的各种实现方式&#xf…
阅读更多...
攻防世界-引导-Web_php_unserialize

攻防世界-引导-Web_php_unserialize

题目内容&#xff1a;出现一段源代码&#xff0c;分段分析第一部分如下<?php class Demo { private $file index.php;public function __construct($file) { $this->file $file; }function __destruct() { echo highlight_file($this->file, true); }function __w…
阅读更多...
pytorch学习笔记-自定义卷积

pytorch学习笔记-自定义卷积

未完结的草稿———&#xff01;大概是准备整合一下常见的层&#xff0c;整合完感觉就可以进行搭建了&#xff08;还没进行到这一步所以不太确定版&#xff09; &#xff08;ps我将在完结这一篇的时候删除上面的小字and二编一下整篇文章的结构&#xff0c;如果看到了这部分文字…
阅读更多...
[明道云]-基础教学2-工作表字段 vs 控件：选哪种？

[明道云]-基础教学2-工作表字段 vs 控件：选哪种？

本文深入解析“工作表字段”与“控件”的关系与差别，并从结构、功能、使用场景和选型建议等方面进行对比。 一、基础概念厘清 ✅ 工作表字段 = 数据模型中的列 工作表字段相当于数据库表中的列，是记录每条业务对象（如订单、客户等）属性的数据项，每个字段都有明确的名称和…
阅读更多...
C++-一篇文章入门coroutines协程

C++-一篇文章入门coroutines协程

文章目录前言什么是协程协程实现原理C协程的最小例子12345协程等效代码协程传值的例子前言 最近学习了一下C协程&#xff0c;这篇文章将介绍协程的相关概念&#xff0c;以及在C中如何使用协程。 什么是协程 C中&#xff0c;协程&#xff08;coroutines&#xff09;可以理解为…
阅读更多...
数字经济专业的就业全景指南

数字经济专业的就业全景指南

CDA数据分析师证书含金量高&#xff0c;适应了未来数字化经济和AI发展趋势&#xff0c;难度不高&#xff0c;行业认可度高&#xff0c;对于找工作很有帮助。一、数字经济就业热力图二、核心岗位发展路径1. 互联网数字运营岗2. 金融科技岗岗位类型技能组合证书加持5年薪资范围智…
阅读更多...
PDF转Word免费工具！批量处理PDF压缩,合并, OCR识别, 去水印, 签名等全功能详解

PDF转Word免费工具！批量处理PDF压缩,合并, OCR识别, 去水印, 签名等全功能详解

大家好&#xff0c;欢迎来到程序视点&#xff01;我是你们的老朋友.小二&#xff01;前言PDF软件我发的非常多&#xff0c;但今天这款工具是大家公认最值得推荐的&#xff0c;这款软件就是PDF24PDF24几乎包含了PDF的所有功能&#xff0c;目前是更新到了最新版本&#xff01;文末…
阅读更多...
Flutter开发实战之Widget体系与布局原理

Flutter开发实战之Widget体系与布局原理

第3章：Widget体系与布局原理 在前面两章中，我们已经搭建好了Flutter开发环境，并且了解了Dart语言的基础知识。现在是时候深入Flutter的核心——Widget体系了。如果说Dart是Flutter的语言基础，那么Widget就是Flutter的灵魂。理解Widget体系，是掌握Flutter开发的关键所在。…
阅读更多...
C++:stack与queue的使用

C++:stack与queue的使用

stack与queue的使用一.stack与queuej基础1.stack1.1基本认识1.2示例代码代码功能解析2.queue2.1基础知识操作说明2.2示例代码代码分析 一.stack与queuej基础 1.stack 1.1基本认识以上图片展示了栈&#xff08;stack&#xff09;这种数据结构的基本操作示意。栈是一种遵循后进先…
阅读更多...
Unity 编辑器开发 之 Excel导表工具

Unity 编辑器开发 之 Excel导表工具

一个简单的Excel导表工具&#xff0c;可以用来热更数据配置工具使用&#xff1a;&#xfeff;&#xfeff;执行菜单 SDGSupporter/Excel/1.Excel2Cs 生成c#脚本。&#xfeff;&#xfeff;等待C#类编译完成&#xfeff;&#xfeff;执行菜单 SDGSupporter/Excel/2.Excel2Bytes …
阅读更多...
【数据结构与算法】力扣 415. 字符串相加

【数据结构与算法】力扣 415. 字符串相加

题目描述 415. 字符串相加 给定两个字符串形式的非负整数 num1 和num2 &#xff0c;计算它们的和并同样以字符串形式返回。 你不能使用任何內建的用于处理大整数的库&#xff08;比如 BigInteger&#xff09;&#xff0c; 也不能直接将输入的字符串转换为整数形式。 示例 1…
阅读更多...
进阶向:Manus AI与多语言手写识别

进阶向:Manus AI与多语言手写识别

Manus AI与多语言手写识别：从零开始理解 手写识别技术作为人工智能领域的重要应用之一，近年来在智能设备、教育、金融等行业得到了广泛运用。根据市场调研机构IDC的数据显示，2022年全球手写识别市场规模已达到45亿美元，预计到2025年将突破70亿美元。其中，多语言手写识别技…
阅读更多...
Javaweb————HTTP请求头属性讲解

Javaweb————HTTP请求头属性讲解

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️前面我们已经说过http请求分为三部分&#xff0c;请求行&#xff0c;请求头和请求体 请求头包含若干个属性&#xff1a;格式为属性名&#xff1a;属性值&#xff0c;这篇文章我们就来介绍一下http请求头中一些常见属性的含义 我们…
阅读更多...
9.c语言常用算法

9.c语言常用算法

查找顺序查找&#xff08;线性查找&#xff09;算法思想&#xff1a;从数组的第一个元素开始&#xff0c;逐个与目标值进行比较&#xff0c;直到找到目标值或查找完整个数组。时间复杂度&#xff1a;最好情况&#xff1a;O(1)&#xff08;目标在第一个位置&#xff09;最坏情况…
阅读更多...
最新文章

Copyright @ 2022~2023