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

前端——Ajax和jQuery

news 2025/7/12 16:44:57

一、Ajax

Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），通过 JS 异步的向服务器发送请求并接收响应数据。

同步访问：当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率较低。

异步访问：当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待。

创建ajax实例

let xhr = new XMLHttpRequest();

创建请求

method:请求方式，取值'GET' 或 'POST'

url:请求地址，字符串。

xhr.open(method,url)；

发送请求

xhr.send()

响应请求

xhr.onload = function(){

//判断你请求服务器的状态是否为200 200的状态码表示成功

if(xhr.status === 200){

console.log(xhr.response);

}

}

二、jQuery

1.jQuery介绍

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

2.工厂函数 - $()

"$()"函数用于获取元素节点，创建元素节点或将原生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);

3.jQuery获取元素

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(选择器)

否定筛选,除()中选择器外,其他元素

示例代码：

<script>// jQuery 是 JavaScript的工具库   对原生js代码中方法 进行封装  dom操作  事件处理   包含数据处理和ajax技术等进行了封装   提供了完善的更加简单的方法   // 直接 使用 $() 来获取元素  console.log($('box')); // 返回结果是JQuery对象  // JQuery对象 转为原生js对象  // let box =$('.box')[0];// console.log(box);// 或者let box =$('.box').get(0);console.log(box);// 通过.css修改文字颜色  $('.box').css('color','red')</script>

4.操作元素内容

// 设置或读取标签内容,等价于原生innerHTML,可识别标签语法

html()

// 设置或读取标签内容,等价于innerText,不能识别标签

text()

// 设置或读取表单元素的值,等价于原生value属性

val()

示例代码：

 <script src='./jquery.js'></script><script>// html()等价于  原生 innerHTML 可识别标签  $('.wrap').html('<h2>明天星期五了</h2>')// 插入文本 $('p').text('搞学习了')// 原生js  读取input控件里面的值 直接.value    // console.log(inp.value);//jquery版获取表单控件里面的内容 console.log($('input').val());// 点击button按钮 把我在input输入框的内容  弹出来 $('button').click(function(){console.log($('input').val());})</script>

5.操作标签属性

1. attr("attrName","value")

设置或读取标签属性

2. prop("attrName","value")

设置或读取标签属性

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

3. removeAttr("attrName")

移除指定属性

示例代码：

<!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></head><body><!-- <input type="text" name='你好' id='check'> --><input type="checkbox" name='你好' id='check'><input type="submit" id='sub'><img  alt="你图片没了" src="https://img2.baidu.com/it/u=2425084553,971201481&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""><script src='./jquery.js'></script><script>// 设置读取标签的属性  console.log($('#check').attr('name'));//读取这个标签的name属性// 给 value属性 设置了内容: 我输入了什么//    console.log($('#check').attr('value','我输入了什么'));//prop 读取或设置属性  //    alert($('#check').prop('value'))//attr 读取或设置属性  //    alert($('#check').attr('value'))$('#sub').click(function () {// 会监听你的点击状态// alert($('#check').prop('value'))//on表示选中// alert($('#check').attr('value'))//弹出  undefined 不会监听你按钮选中状态})// 删除属性$('img').removeAttr('src')</script></body></html>

6.操作标签样式

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

// 添加指定的类名

addClass("className")

// 移除指定的类型,如果参数省略,表示清空class属性值

removeClass("className")

// 如果当前元素存在指定类名,则移除;不存在则添加

toggleClass("className")

2. 操作行内样式

// 设置行内样式

css("属性名","属性值")

// 设置一组CSS样式

css(对象)

示例代码：

<!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>*{margin: 0px;padding: 0px;list-style: none;}.box{width: 300px;height: 300px;background-color: orange;}.wrap{background-color: pink;}.list{width: 400px;height: 80px;background-color: pink;margin: auto;}.list>li{float: left;width: 100px;height: 80px;background-color: gray;color: orange;text-align: center;line-height: 80px;/* 变成小手 */cursor: pointer;}.list>.only{background-color:  #096;}</style>
</head>
<body><div class='text wrap'></div><ul class='list'><li>英雄联盟</li><li>王者荣耀</li><li>永劫无间</li><li class='only'>原神</li></ul><p>我是文本标签</p><script src='./jquery.js'></script><script>// 添加指定类名  $('div').addClass('box')//删除指定类名    如果参数忽略不写 那就清空class属性值  // $('div').removeClass()// 如果当前标签有这个类名那就删掉  无则加 $('div').toggleClass('wrap')$('.list>li').click(function(){// 移除li标签里面用only类名  $('.list>li').removeClass('only');// this指向你当前点击的这个元素   // $(this).addClass('only');$(this).toggleClass('only')})// 操作元素 添加样式   $('元素').css('属性','属性值')  写多个就直接继续后面用.css方法 麻烦 // $('p').css('color','pink').css('font-size','20px')// 快捷写多个属性 就写对象属性  $('p').css({'width':'200px','height':'300px','background-color':'green'})</script>
</body>
</html>

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

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);

4. 移除元素

// 移除$obj

$obj.remove();

示例代码：

<script>// 创建新的span标签 let span = $('<span></span>');// 添加到我的div标签里面   作为最后一个子元素添加  // $('div').append(span)// 作为第一个子元素进行添加 // $('div').prepend(span)// before() 作为同级元素进行插入  在前面插入 $('div').before(span)// after() 作为同级元素进行插入  在后面插入 $('div').after(span)// 设置内容  添加类名 颜色 span.html('我是刚刚新建的span标签').attr('class','text').css('color','green')// 删除元素$('div').remove()</script>

8.动画效果

1. 显示和隐藏

show(speed,callback)/hide(speed,callback)

- speed 可选。规定元素从隐藏到完全可见的速度。默认为 "0"。

- callback 可选。show 函数执行完之后，要执行的函数

2. 通过使用滑动下拉和上推效果，显示隐藏的被选元素（ **只针对块元素** ）

slideDown(speed,callback)/slideUp(speed,callback)

3. 通过使用淡隐淡现方式显示效果，显示隐藏的被选元素

fadeOut(speed,callback)/fadeIn(speed,callback)

<!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>.box {width: 300px;height: 300px;background-color: skyblue;}</style></head><body><div class="box"></div><button class='btn1'>隐藏</button><button class='btn2'>上推</button><button class='btn3'>若隐</button><script src='./jquery.js'></script><script>$('.btn1').click(function () {// // 点击隐藏按钮 box盒子就隐藏 // $('.box').hide(1000,function(){//     // 隐藏之后  按钮的文字 替换成 显示 //     $('.btn1').text('显示')// })// 如果字是隐藏就执行隐藏功能  否则就执行显示   if ($('.btn1').text() === '隐藏') {$('.box').hide(1000, function () {// 隐藏之后  按钮的文字 替换成 显示 $('.btn1').text('显示')})} else {// 不是就执行显示功能   $('.box').show(1000, function () {//显示状态下把文字 替换成 隐藏$('.btn1').text('隐藏')})}})// 上推和下拉效果  $('.btn2').click(function () {//slideUp上推方法 相当于把盒子高度 变为0 了 // $('.box').slideUp(1000, function () {//     $('.btn2').text('下拉')// })// 如果字按钮文字是上推就执行上推效果  if ($('.btn2').text() === '上推') {$('.box').slideUp(1000, function () {$('.btn2').text('下拉')})} else {// slideDown下拉方法$('.box').slideDown(1000, function () {$('.btn2').text('上推')})}})//若隐若现效果$('.btn3').click(function () {// 如果字按钮文字是若隐就执行若隐效果  if ($('.btn3').text() === '若隐') {// fadeOut若隐方法$('.box').fadeOut(1000, function () {$('.btn3').text('若现')})} else {// fadeIn若现方法$('.box').fadeIn(1000, function () {$('.btn3').text('若隐')})}})</script></body></html>

9.数据与对象遍历

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

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

- *index* - 选择器的 index 位置

- element - 当前的元素

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

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

- *index* - 选择器的 index 位置

- data- 当前的数据

10.jQuery事件处理

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

$(function(){

// 文档加载完毕后执行

})

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

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

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

前端——Ajax和jQuery

一、Ajax Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）， 通过 JS 异步的向服务器发送请求并接收响应数据。同步访问：当客户端向服务器发送请求时，服务器在处理的过程中，浏览器…...

编程日记 2024/10/4 5:53:53

C++-vector模拟实现

###vector底层相当于是数组，查看源码可以发现，这个类的私有成员变量是三个迭代器；在实现时迭代器就可以当作是vector里面的元素的指针类型； ###vector是一个类模板，实现时也应当按照这样的写法用一个模板去实现&#…...

编程日记 2024/10/4 5:52:52

Activity

69[toc] 1.启停活动页面 1.Activity启动和结束从当前页面跳到新页面 startActivity(new Intent(this, ActFinishActivity.class));从当前页面返回上一个页面，相当于关闭当前页面 finish();2.Activity生命周期官方描述生命周期 onCreate：创建活…...

编程日记 2024/10/4 5:49:49

【力扣 | SQL题 | 每日四题】力扣1581, 1811, 1821, 1831

今天的题目就1811这个比较难，其他非常的基础。 1. 力扣1581：进店却未进行过交易的顾客 1.1 题目： 表：Visits ---------------------- | Column Name | Type | ---------------------- | visit_id | int | | customer…...

编程日记 2024/10/4 5:48:48

洛谷【P1955 [NOI2015] 程序自动分析】

反思： 这道题一眼就是并查集但是数据太大 mle和re都是有可能的我看了题解才知道是离散化数组加并查集离散化再两个月前我觉得好难啊那道题跟本看不懂现在觉得还行离散化思路： 需要一个离散记录数组----ls[N]用来记录下出现的数步骤： …...

编程日记 2024/10/4 5:45:45

Swift并发笔记

1.同步和异步说到线程的执行方式，最基本的一组概念是同步和异步。所谓同步，就是在操作执行完成之前，运行操作的这个线程都会被占用，直到函数最终被抛出或返回。Swift5.5之前，func关键字声明的所有的函数都是同步的。…...

编程日记 2024/10/4 5:38:35

React 组件命名规范

在 React 项目中，如果希望保持组件命名的一致性，并防止在引入时出现不同名称的问题，可以遵循以下的组件规范： 1、默认导出组件： 所有特殊要求的组件（如页面组件或根组件）应该使用 export defau…...

编程日记 2024/10/4 5:37:34

eNSP网络配置指南：IP设置、DNS、Telnet、DHCP与路由表管理

1.eNSP基本操作和路由器IP配置命令登录设备：通过Console口或通过eNSP的Telnet/SSH客户端登录到设备。进入特权模式：输入system-view进入系统视图。接口配置： 进入接口视图，例如interface GigabitEthernet0/0/0。配置IP地址和子网…...

编程日记 2024/10/4 5:35:32

初步认识产品经理

产品经理思考问题的维度 1️⃣为什么要抓住核心用户？ 所有和产品有关系的群体就是用户，存在共性和差异了解用户的付费点，更好的优化产品是否使用：（目标用户-已使用产品：种子用户-尝鲜；核心用…...

编程日记 2024/10/4 5:34:31

web前端面试中拍摄的真实js面试题（真图）

web前端面试中拍摄的真实js面试题（真图） WechatIMG258.jpeg WechatIMG406.jpeg WechatIMG407.jpeg WechatIMG922.jpeg WechatIMG1063.jpeg © 著作权归作者所有,转载或内容合作请联系作者喜欢的朋友记得点赞、收藏、关注哦！！…...

编程日记 2024/10/4 5:31:29

python 人工智能机器学习当损失函数的数值变成 `nan` 时，这通常意味着在模型训练过程中出现了数值不稳定性以及解决办法，数据分析

当损失函数的数值变成 nan 时，这通常意味着在模型训练过程中出现了数值不稳定性。以下是一些可能导致这个问题的原因以及相应的解决方法： 1. **学习率过高**：如果学习率设置得过高，可能会导致梯度爆炸，从而导致损失函…...

编程日记 2024/10/4 5:30:27

Kafka快速实战与基本原理详解

笔记：https://note.youdao.com/ynoteshare/index.html?id=b0357bdb4821ed2e35ecdbdacd65aa06&type=note&_time=1727570043631 启动kafka之前先启动zookper 看看ZK里面都有什么数据：刚开始什么数据都没有接下来启动kafka，启动好后，日志在这里看：启动好了kaf…...

编程日记 2024/10/4 5:28:25

tftp传文件被服务器拒绝进入tftp: server error: (768) Access to staonline.pcap denied

环境：测试一个ac下挂ap，ap下的抓包文件传出时，出现问题： ac的wan口ip是192.168.186.167/24，gw是192.168.186.1，下挂ap的ip是192.168.202.199/24，ac上开子接口192.168.202.1/24，ac上开…...

编程日记 2024/10/4 5:27:24

express，生成用户登录后的 token

在 Node.js 中使用 Express 框架生成用户登录后的 token，通常会涉及到以下几个步骤： 设置 Express 应用：首先，你需要有一个基本的 Express 应用。安装必要的中间件：例如 jsonwebtoken（JWT）用于…...

编程日记 2024/10/4 5:26:23

银河麒麟桌面操作系统修改默认Shell为Bash

银河麒麟桌面操作系统修改默认Shell为Bash 💐The Begin💐点点关注，收藏不迷路💐 在银河麒麟桌面操作系统（ARM版）中，若要将默认Shell从Dash改为Bash，可执行以下步骤： 打开…...

编程日记 2024/10/4 5:24:22

卷积神经网络（Convolutional Neural Networks, CNN）

卷积神经网络（Convolutional Neural Networks, CNN）是深度学习领域中用于处理具有网格结构的输入（如图像和视频）的神经网络模型。下面以最简单、直观的方式概述CNN的主要流程及其基本概念： 1. 输入层概念&#xff1a…...

编程日记 2024/10/4 5:23:21

文章目录 SpringApplicationSpringApplication#run 启动流程BootstrapContextSpringApplicationRunListenersprepareEnvironmentconfigureEnvironmentconfigurePropertySourcesconfigureProfiles 上下文初始化prepareContextrefreshContextprepareRefreshobtainFreshBeanFactor…...

编程日记 2024/10/4 5:18:16

vgg19提取特征

一般来说，大家使用VGG16，用的是第四列的网络架构，而使用VGG19，使用的就是第六列的网络架构。使用vgg进行提取特征，在这个项目中，使用的就是每一块卷积层的第一层。 import torch.nn as nn from torchvis…...

编程日记 2024/10/4 5:17:15

Qt 中的 QChartView

深入理解 Qt 的 QChartView：图表展示与交互 QChartView 是 Qt Charts 模块中的一个核心类，它用于在 Qt 应用程序中显示图表，并支持多种用户交互方式。它继承自 QGraphicsView，通过封装 QChart，为用户提供了强大的图表…...

编程日记 2024/10/4 5:15:13

cheese安卓版纯本地离线文字识别插件

目的 cheese自动化平台是一款可以模拟鼠标和键盘操作的自动化工具。它可以帮助用户自动完成一些重复的、繁琐的任务，节省大量人工操作的时间。可以采用Vscode、IDEA编写，支持Java、Python、nodejs、GO、Rust、Lua。cheese也包含图色功能，识别…...

编程日记 2024/10/4 5:11:09

通过Wrangler CLI在worker中创建数据库和表

官方使用文档：Getting started Cloudflare D1 docs 创建数据库在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...

编程新知 2025/7/11 8:21:46

【单片机期末】单片机系统设计

主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图一、题目要求二、绘制系统状态流图题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。三、利用定时器产生时…...

编程新知 2025/7/8 18:04:19

【Oracle】分区表

个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/7/12 4:41:38

探索Selenium：自动化测试的神奇钥匙

目录一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/10 21:12:19

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率（或其他自定义指标）来调整这些对象的规模，从而帮助应用程序在负…...

编程新知 2025/7/8 14:40:56

WebRTC调研

WebRTC是什么，为什么，如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2025/7/9 23:25:12

Python学习(8) ----- Python的类与对象

Python 中的类（Class）与对象（Object）是面向对象编程（OOP）的核心。我们可以通过“类是模板，对象是实例”来理解它们的关系。 🧱 一句话理解： 类就像“图纸”，对…...

编程新知 2025/7/9 20:41:09

用 FFmpeg 实现 RTMP 推流直播

RTMP（Real-Time Messaging Protocol） 是直播行业中常用的传输协议。一般来说，直播服务商会给你： ✅ 一个 RTMP 推流地址（你推视频上去） ✅ 一个 HLS 或 FLV 拉流地址（观众观看用）…...

编程新知 2025/7/7 14:14:30

二维数组行列混淆区分 js

二维数组定义行 row：是“横着的一整行” 列 column：是“竖着的一整列” 在 JavaScript 里访问二维数组 grid[i][j] 表示第i行第j列的元素 let grid [[1, 2, 3], // 第0行[4, 5, 6], // 第1行[7, 8, 9] // 第2行 ];// grid[i][j] 表示第i行第j列的…...

编程新知 2025/7/8 1:18:57

LeetCode 0386.字典序排数：细心总结条件

【LetMeFly】386.字典序排数：细心总结条件力扣题目链接：https://leetcode.cn/problems/lexicographical-numbers/ 给你一个整数 n ，按字典序返回范围 [1, n] 内所有整数。你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。…...

编程新知 2025/7/8 2:44:15

一、Ajax

创建ajax实例

创建请求

发送请求

响应请求

二、jQuery

1.jQuery介绍

2.工厂函数 - $()

3.jQuery获取元素

4.操作元素内容

5.操作标签属性

6.操作标签样式

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

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

2. 作为子元素添加

3. 作为兄弟元素添加

4. 移除元素

8.动画效果

9.数据与对象遍历

10.jQuery事件处理

相关文章：