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

Jquery笔记

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$(…...

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

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

TextClamp for Vue3.0(Vue3.0的文本展开收起组件)

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

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

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

在 Windows 上搭建 NTP 服务器

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

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

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

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…...

SpringBoot启动流程及自动配置

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

【Linux】进程轻松入门

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

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

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

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

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

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

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

二分查找算法(全网最详细代码演示)

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

draw up a plan

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

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

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

QEMU(Quick Emulator)

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

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…...

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…...

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

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

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;任…...

6.1.tensorRT高级(1)-概述

目录 前言1. tensorRT高级概述总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习 tensorRT 高级-概述 课程大纲可看下面的思维…...

【Python】将M4A\AAC录音文件转换为MP3文件

文章目录 m4aaac 基础环境&#xff1a; sudo apt-get install ffmpegm4a 要将M4A文件转换为MP3文件&#xff0c;你可以使用Python中的第三方库pydub。pydub使得音频处理变得非常简单。在开始之前&#xff0c;请确保你已经安装了pydub库&#xff0c;如果没有&#xff0c;可以通…...

个性新颖纯css手风琴效果选项卡

当涉及到个性新颖的纯CSS手风琴效果选项卡时&#xff0c;有多种方法可以实现。以下是三种可能的方法&#xff1a; 三种方法实现 方法一&#xff1a;使用:target伪类和CSS过渡效果 <style>.accordion {width: 300px;}.accordion-item {overflow: hidden;max-height: 0;…...

js的sendBeacon方法介绍

js的sendBeacon方法介绍 Beacon API是一种轻量级且有效的将网页活动记录到服务器的方法。它是一个 JavaScript API&#xff0c;可帮助开发人员将少量数据&#xff08;例如分析或跟踪信息、调试或诊断数据&#xff09;从浏览器发送到服务器。 在本文中&#xff0c;我们将介绍B…...

【Tomcat---1】IDEA控制台tomcat日志输出乱码解决

一、修改IDEA的文件编码配置为UTF-8 二、修改IDEA的vmoptions文件&#xff0c;添加-Dfile.encodingUTF-8 到Tomcat目录/conf文件夹修改logging.properties 重启idea即可。采用统一的编码...

Redis学习路线(2)—— Redis的数据结构

一、Redis的数据结构 Redis是一个Key-Value的数据库&#xff0c;key一般是String类型&#xff0c;不过Value的类型却有很多&#xff1a; String&#xff1a; Hello WorldHash&#xff1a; {name: "jack", age: 21}List&#xff1a; [A -> B -> C -> C]Set…...

【Redis深度专题】「核心技术提升」探究Redis服务启动的过程机制的技术原理和流程分析的指南(持久化功能分析)

探究Redis服务启动的过程机制的技术原理和流程分析的指南&#xff08;持久化功能分析&#xff09; Redis提供的持久化机制Redis持久化如何工作Redis持久化的故障分析持久化频率操作分析数据库多久调用一次write&#xff0c;将数据写入内核缓冲区&#xff1f;内核多久将系统缓冲…...

IT管理者年过50后何去何从

最近面试了一位前职为IT技术及管理专家&#xff0c;知名院校硕士毕业&#xff0c;唯一不同的是&#xff0c;他是一名已过50岁的IT技术及管理者。一直知道过了50岁&#xff0c;我们估计会有很大的坎&#xff0c;但是那时候从未曾想过连我们保险公司都会因为年龄而拒绝这样优秀的…...

C++字符串题基础(进阶请看下一个文章)

打印小写字母表 #include<iostream> #include<string.h> #include<iomanip> #include<stdio.h> #include<cmath> using namespace std; int main() {char na;for(int i1;i<13;i){cout<<n;n;}cout<<endl;for(int i1;i<13;i){c…...

webpack如何实现热更新?

webpack如何实现热更新&#xff1f; 要使用 Webpack 实现热更新&#xff0c;可以按照以下步骤进行配置&#xff1a; 1.在项目中安装 Webpack 和相关的开发依赖&#xff1a; npm install webpack webpack-cli webpack-dev-server --save-dev2.创建一个名为 webpack.dev.js 的…...

网站服务器配置单/各大网站收录提交入口

方法一、使用os模块的system方法&#xff1a;os.system&#xff08;cmd&#xff09;&#xff0c;其返回值是shell指令运行后返回的状态码&#xff0c;int类型&#xff0c;0表示shell指令成功执行&#xff0c;256表示未找到&#xff0c;该方法适用于shell命令不需要输出内容的场…...

房地产网站建设策划书/软文营销成功案例

标准写法如下&#xff1a; 第一种写法&#xff1a; SQL示例如下&#xff1a; create_time > #{startTime} and create_time < #{endTime}第二种写法&#xff1a; 大于等于 <![CDATA[ > ]]> 小于等于 <![CDATA[ < ]]>SQL示例如下&#xff1a; cre…...

大淘客网站怎样做百度推广/软件网站排行榜

做一个小例子演示滤镜的动态效果 在舞台建两个元件或导入两张图片到舞台再转化为元件&#xff0c;分别取实例名apple01和apple02&#xff1b; var blurSpeed:Number 1;//首先使用动画滤镜 var bevelSpeed:Number 5;//为两个苹果添加MOUSE_OVER 事件侦听 apple01.addEventList…...

可以做结构式的网站/sem是什么测试

使用Tomcat8.5.32和nginx14做负载均衡&#xff0c;登录系统时输入用户名和密码、验证码后很大概率会重新进入登录页面而不是直接进入系统&#xff0c;一开始怀疑是不是nginx重定向的问题&#xff0c;nginx.conf配置了半天仍然无效。。。后来就在登录代码里都加上打印输出语句&a…...

大型企业网站建设/凡科建站怎么收费

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言&#xff08;HTML&#xff09;的第五次重大修改&#xff08;这是一项推荐标准、外语原文&#xff1a;W3C Recommendation、见本处参考资料原文内容&#xff1a; 2014年10月29日&#xff0c;万维网联盟宣布&#x…...

卖衣服的网站排名/网络营销的产品策略

你可以使用多种绘图程序创建 SVG 图像&#xff0c;包括开源的 Inkscape 和 Adobe Illustrator。让你的图像“能动起来”需要更多的努力。幸运的是&#xff0c;有一些开源解决方案甚至可以引起 Belshazzar 的注意。-- Jeff Macharyas&#xff08;作者&#xff09;开源 SVG&#…...