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

Jquery笔记

news 2025/11/7 14:32:47

DOM对象通过jquery获取

所有的代码都是基于引入jquery.js文件

var mydiv =$('#div');//直接获取到DOM对象元素id
var mydiv=$('.div')；//通过class获取DOM对象，如果有同名class只会获取第一个
var mysapn=$('span');//通过元素的标签名获取DOM对象
var divarr=$('#id,.class,span');//一次获取多个DOM对象
var all=$('*');//通用选择器
var houdai=$('#father div');//获取id为father下面所有的div
var zidai=$('#father>div')获取id为father下面直接的子级div
var xianglinxia=$('.one +img')//选择类名为one的下一个img元素
var tongbei=$('.one~img')//选择类名为one的之后的img元素 只会向下找不会向上找

表单类元素获取方法在这里插入图片描述

DOM操作

1.获取属性

在这里插入图片描述

<!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><div class="box">1111</div><div id="box1">222</div><input type="checkbox" name="ch" checked="checked" id="aa" abc="aaanncc"><input type="checkbox" name="ch"  id="bb">
</body>
<script src="./jquery-3.7.0.js"></script>
<script>
//操作元素的属性//获取属性 attr('属性名') prop()//固有属性 标签自己带的属性 返回值是boolean的属性  自定义属性：自己定义的属性let ipt1name=$('#aa').attr('name')let ipt1names=$('#aa').prop('name')let ipt1boolean=$('#aa').prop('checked')let ipt1booleans=$('#aa').attr('checked')let ipt2boolean=$('#bb').prop('checked')//undefinedlet ipt2booleans=$('#bb').attr('checked')//falseconsole.log(ipt1name,ipt1names,ipt1boolean,ipt2boolean,ipt2booleans);//设置属性$('#aa').attr('value',1)$('#bb').prop('value',2)
//    $('#bb').attr('checked',false)$('#bb').prop('checked',true);//设置boolean类型的有这个方便//移除属性 $('#aa').removeAttr('checked') 
</script></html>

2.操作元素的样式

在这里插入图片描述

//操作元素的样式 //自己需要写css样式并且class名为sss$('#box1').attr('class','sss')//设置class名$('#box1').addClass('bbb')//追加calss名$('#box1').css('color',"red")//设置单个 $('#box1').css({'color':"red","font-size":'46px'})//设置多个 $('#box1').removeClass('sss')

3.操作元素内容

在这里插入图片描述

   //操作元素的内容$('#box1').html()//获取元素的内容非表单元素$('#box1').html('')//设置元素的内容非表单元素$('#box1').text()//获取元素的纯文本内容非表单元素不识别html元素$('#box1').text('')//设置元素的纯文本内容非表单元素 不识别html元素$('#box1').val()//获取元素的的值 表单元素 $('#box1').val('')//设置元素的的值 表单元素

元素的创建与删除
在这里插入图片描述

  $('<p>这是一个p标签</p>')//创建一个p标签$('#box1').prepend('<p>小奶狗</p>')//在指定元素的内部最前面追加子元素$('<p>小狼狗</p>').prependTo($('#box1'))//在指定元素的内部最前面追加子元素$('#box1').append('<p>小狗</p>')//在指定元素的内部最后面面追加子元素$('<p>小狼狗</p>').appendTo($('#box1'))//在指定元素的内部最后面追加子元素$('#box1').before('<p>狗1</p>')//在指定元素的前面追加元素$('#box1').after('<p>狗2</p>')//在指定元素的后面追加元素$('#box1').after($('.box'))//在指定元素的后面追加元素

在这里插入图片描述

 $('#box3').remove()//删除元素及其子元素标签内容一起删除$('#box4').empty()//只删除内容 很少用

遍历元素在这里插入图片描述

$('#box5').each(function(index,element){//index 下标 element元素console.log(index,element);})

绑定事件

在这里插入图片描述


//绑定事件       这里改相对应的事件 change mouse$('#box4').bind('click',()=>{console.log('111')})

在这里插入图片描述

ajax请求

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

相关文章：

Jquery笔记

DOM对象通过jquery获取 所有的代码都是基于引入jquery.js文件 var mydiv $(#div);//直接获取到DOM对象元素id var mydiv$(.div)&#xff1b;//通过class获取DOM对象&#xff0c;如果有同名class只会获取第一个 var mysapn$(span);//通过元素的标签名获取DOM对象 var divarr$(…...

编程日记 2023/7/31 1:44:24

【C++】优先级队列的基本概念以及其模拟实现

文章目录 补充知识&#xff1a;仿函数一、优先级队列&#xff1a;1.引入2.介绍 二、priority_queue的模拟实现1.大体框架2.私有成员函数&#xff1a;1.向下调整&#xff08;AdjustDown&#xff09;2.向上调整&#xff08;AdjustUp&#xff09; 3.公有成员函数1大小&#xff08;…...

编程日记 2023/7/31 1:43:24

TextClamp for Vue3.0（Vue3.0的文本展开收起组件）

呦&#xff01;大家好&#xff0c;好久没有更新博客了&#xff0c;最近实现了一个一直想自己完成的一个东西&#xff0c;就是文本的展开收起组件&#xff0c;以前项目需要用到&#xff0c;自己实现一个又太繁琐&#xff0c;所以那个时候都是用的别人的轮子&#xff0c;现在自己…...

编程日记 2023/7/31 1:42:22

区间预测 | MATLAB实现VAR向量自回归时间序列区间预测

区间预测 | MATLAB实现VAR向量自回归时间序列区间预测 目录 区间预测 | MATLAB实现VAR向量自回归时间序列区间预测预测效果基本介绍程序设计参考资料预测效果 基本介绍 区间预测 | MATLAB实现VAR向量自回归时间序列区间预测 VAR（Vector Autoregression）模型是一种广泛应用于时…...

编程日记 2023/7/31 1:41:21

在 Windows 上搭建 NTP 服务器

文章目录 一、基础环境二、适用场景三、操作步骤四、常用的NTP服务器五、参考资料 版权声明&#xff1a;本文为博主原创文章&#xff0c;于2023年7月30日首发于CSDN&#xff0c;转载请附上原文出处链接和本声明。本文链接&#xff1a;https://blog.csdn.net/u011046671 一、基础…...

编程日记 2023/7/31 1:40:19

应急响应经典案例-FTP 暴力破解

应急响应经典案例-FTP 暴力破解 应急场景日志分析应急处理措施 应急场景 从昨天开始&#xff0c;网站响应速度变得缓慢&#xff0c;网站服务器登录上去非常卡&#xff0c;重启服务器就能保证一段时间的正常访问&#xff0c;网站响应状态时而飞快时而缓慢&#xff0c;多数时间是…...

编程日记 2023/7/31 1:39:18

41. linux通过yum安装postgresql

文章目录 1.下载安装包2.关闭内置PostgreSQL模块:3.安装postgresql服务:4.初始化postgresql数据库:5.设置开机自启动:6.启动postgresql数据库7.查看postgresql进程8.通过netstat命令或者lsof 监听默认端口54329.使用find命令查找了一下postgresql.conf的配置位置10.修改postgre…...

编程日记 2023/7/31 1:38:17

SpringBoot启动流程及自动配置

SpringBoot启动流程源码&#xff1a; 1、启动SpringBoot启动类SpringbootdemoApplication中的main方法。 SpringBootApplication public class SpringbootdemoApplication {public static void main(String[] args) {SpringApplication.run(SpringbootdemoApplication.class, …...

编程日记 2023/7/31 1:37:16

【Linux】进程轻松入门

目录 一&#xff0c; 冯* 诺依曼体系结构 1&#xff0c;存储结构 ​编辑 二&#xff0c; 操作系统 1&#xff0c;概念 2&#xff0c;设计OS的目的 3&#xff0c;定位 4&#xff0c;如何理解 "管理" 5&#xff0c; 总结 三&#xff0c;进程 1. 概念 那么…...

编程日记 2023/7/31 1:36:14

【使用时空RBF-NN进行非线性系统识别】实现了 RBF、分数 RBF 和时空 RBF 神经网络，用于非线性系统识别研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/7/31 1:35:13

Tomcat 安装配置教程及成功后，启动失败报错解决方案

解决方案 我的报错原因是因为我的JDK是1.8的而我的Tomcat是10版本的&#xff0c;可能是因为版本原因吧&#xff0c;我重新装了Tomcat 9就可以启动成功了&#xff01; 简单说下安装的时候需要注意哪些步骤吧 今天我在安装tomcat10的时候&#xff0c;安装成功后&#xff0c;启…...

编程日记 2023/7/31 1:34:12

C#文件操作从入门到精通（2）——查看某个dll中有哪些函数

kernel32.dll中含有ini文件操作使用的函数，我们可以通过VisualStudio自带的dumpbin.exe查看dll所包含的函数，操作步骤如下： 1、找到dumpbin.exe所在的文件夹 我的电脑中安装了VisualStudio2019社区版以及VisualStudio2017Professional，但是我发现VisualStudio2019社区版中…...

编程日记 2023/7/31 1:33:11

二分查找算法（全网最详细代码演示）

二分查找也称 半查找&#xff08;Binary Search&#xff09;&#xff0c;它时一种效率较高的查找方法。但是&#xff0c;折半查找要求线性表必须采用顺序存储结构&#xff0c;而且表中元素按关键字 有序 排列。 注意&#xff1a;使用二分查找的前提是 该数组是有序的。 在实际开…...

编程日记 2023/7/31 1:32:10

draw up a plan

爱情是美好的&#xff0c;却不是唯一的。爱情只是属于个人化的感情。 推荐一篇关于爱情的美文&#xff1a; 在一个小镇上&#xff0c;有一家以制作精美巧克力而闻名的手工巧克力店&#xff0c;名叫“甜蜜之爱”。这家巧克力店是由一位名叫艾玛的年轻女性经营的&#xff0c;她对…...

编程日记 2023/7/31 1:31:09

抖音seo源码开发源代码开发技术分享

一、 抖音SEO源码开发&#xff0c;需要掌握以下技术&#xff1a; 抖音API接口&#xff1a;抖音提供了丰富的API接口&#xff0c;包括用户信息、视频信息、评论信息等。 数据爬取技术&#xff1a;通过抓包分析抖音接口的数据结构&#xff0c;可以使用Python等编程语言编写爬虫程…...

编程日记 2023/7/31 1:30:06

QEMU（Quick Emulator）

QEMU&#xff08;Quick Emulator&#xff09;是一款由法布里斯贝拉等人编写的免费的可执行硬件虚拟化的开源托管虚拟机。它可以通过动态的二进制转换模拟CPU&#xff0c;并提供一组设备模型&#xff0c;使它能够运行多种未修改的客户机OS。QEMU还可以为user-level的进程执行CPU…...

编程日记 2023/7/31 1:29:03

Gateway结合nacos（lb://xxx）无效问题

Gateway结合nacos无效 版本如下&#xff1a; com.alibaba.cloud:spring-cloud-starter-alibaba-nacos-discovery:2021.0.1.0 org.springframework.cloud:spring-cloud-starter-gateway:3.1.1 配置如下&#xff1a; server:port: 7000 spring:application:name: springCloudGa…...

编程日记 2023/7/31 1:28:02

NODEJS笔记

全局对象 global/window console.log/info/warn/error/time/timeEnd process.arch/platform/version/env/kill/pid/nextTick Buffer.alloc(5,abcde) String/toString setTimeout/clearTimeout setInterval/clearInterval setImmediate/clearImmediate process.nextTi…...

编程日记 2023/7/31 1:26:59

无涯教程-jQuery - html( )方法函数

html(val)方法获取第一个匹配元素的html内容(innerHTML)。此属性在XML文档上不可用。 html( ) - 语法 selector.html( ) html( ) - 示例 以下是一个简单的示例&#xff0c;简单说明了此方法的用法- <html><head><title>The jQuery Example</title>…...

编程日记 2023/7/31 1:25:58

Linux vsftp三种模式的简单配置部署

环境&#xff1a;Debian 6.1.27-1kali1 (2023-05-12) vsftpd 安装 --查看是否当前系统是否已安装 apt list --installed | grep vsftpd 没有安装的话&#xff0c;就正常安装 apt-get update apt-get install vsftpd 一、匿名用户模式 分享一些不重要文件&#xff0c;任…...

编程日记 2023/7/31 1:24:57

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2025/11/7 10:17:55

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/11/1 23:39:16

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/8/29 10:53:38

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/10/27 6:22:43

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/10/28 3:27:57

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

编程新知 2025/11/3 8:50:43

react菜单，动态绑定点击事件，菜单分离出去单独的js文件，Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...

编程新知 2025/11/2 4:46:30