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

jQuery BootStrap

news 2026/3/27 22:29:46

1、jQuery的使用方式

1、下载jQuery库文件
网址
2、将下载好的js文件放到项目中，并引入到需要的HTML文件中
3、使用jQuery
注意：jQuery库文件的导入必须在自己写的代码之前。就绪函数在页面上可以写n个。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="js/jquery-3.6.3.js"></script><script>//就绪函数：当页面加载完成以后，自动执行的函数$(function(){var demo = document.getElementById("test");console.log(demo.innerText);});</script>
</head>
<body><div id="test">这是DIV</div>
</body>
</html>

DOM对象与jQuery对象

DOM对象：就是通过原生JavaScript方法获取到的对象就是DOM对象。

jQuery对象：就是通过jQuery方法获取的对象。

jQuery对象和DOM对象可以进行相互转换，但是切记两种对象的属性和函数不能彼此混搭使用

DOM对象转jQuery对象，语法：jQuery(DOM对象); 或 $(DOM对象);

jQuery对象转DOM对象，语法：jQuery对象[index]; 或 jQuery对象.get(index);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="js/jquery-3.6.3.js"></script><script>//就绪函数：当页面加载完成以后，自动执行的函数$(function(){var demo1 = document.getElementById("test");console.log(demo1.innerText);//使用jQuery来获取id为test的标签的内容//使用js方式获取的对象叫做js对象，使用jQuery获取的对象叫做jQuery对象var demo2 = $("#test");console.log(demo2.text());//将JS对象转换成jQuery对象console.log($(demo1).text());//将jQuery对象转换成JS对象console.log(demo2[0].innerText);});</script>
</head>
<body><div id="test">这是DIV</div>
</body>
</html>

2、jQuery选择器

1、基本选择器

使用最多的选择器分别是：标签选择器，ID选择器，类选择器，全局选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.3.js"></script><script>$(function(){//获取id为test的标签，将其文本颜色改为红色//$("#test").css("color","red");//获取class为test的标签，将其文本颜色改为红色//$(".test").css("color","red");//获取所有的div标签，将其文本颜色改为红色//$("div").css("color","red");//获取所有的标签，将其文本颜色改为红色$("*").css("color","red");});</script>
</head>
<body><div>第一个DIV</div><div id="test">第二个DIV</div><div>第三个DIV</div><div class="test">第四个DIV</div><p class="test">第一个P</p>
</body>
</html>

2、层次选择器
根据元素与元素之间的关系来查找元素分别是：后代选择器，子元素选择器>，同辈元素选择器~，同辈相邻元素选择器+

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.3.js"></script><script>$(function(){//获取id为out的标签里面的span标签，将其背景颜色改为红色//$("#out span").css("background-color","red");//获取id为out的标签里面的span子标签，将其背景颜色改为红色//$("#out>span").css("background-color","red");//获取id为out的标签的后面的同级span标签，将其背景颜色改为红色//$("#out~span").css("background-color","red");//获取id为out的标签的后面的同级且相邻span标签，将其背景颜色改为红色$("#out+span").css("background-color","red");});</script>
</head>
<body><span>这是out前面的span</span><div id="out"><span>这是out里面的span</span><p><span>这是out里面的p里面的span</span></p></div><span>这是out后面的span</span><span>这是out后面的span再后面的span</span><p>这是out后面的后面的的P</p>
</body>
</html>

3、jQuery属性操作

prop()

prop(“属性名”);获取指定属性的值。

prop(“属性名”,”属性值”);设置指定属性的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.3.js"></script><script>$(function(){$("#all").click(function(){var checkedValue = $(this).prop("checked");$("[name=hobby]").prop("checked",checkedValue);});});</script>
</head>
<body><input type="checkbox" id="all">全选<br><input type="checkbox" name="hobby">篮球<br><input type="checkbox" name="hobby">足球<br><input type="checkbox" name="hobby">排球<br><input type="checkbox" name="hobby">乒乓球<br>
</body>
</html>

4、jQuery样式操作

1、css(“样式名”,”样式值”);或css({“样式名1”:”样式值1”,“样式名2”:”样式值2”});

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#test{width: 100px;height: 100px;background-color: red;}</style><script src="js/jquery-3.6.3.js"></script><script>$(function(){$("#css").click(function(){$("#test").css({"width":"200px","height":"200px","background-color":"yellow"});});});</script>
</head>
<body><div id="test"></div><input type="button" value="css" id="css">
</body>
</html>

5、jQuery内容操作

html();设置或返回所选元素的内容（包括 HTML 标记），相当于JS的innerHTML

text();设置或返回所选元素的文本内容，相当于JS的innerText

val();设置或返回表单域的值，相当于JS的value

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.3.js"></script><script>$(function(){$("#html").click(function(){console.log($("#test").html());$("#test").html("<a href='http://www.taobao.com'>淘宝</a>");});$("#text").click(function(){console.log($("#test").text());$("#test").text("<a href='http://www.taobao.com'>淘宝</a>");});$("#val").click(function(){console.log($("#username").val());console.log($("#username").val("mary"));});});</script>
</head>
<body><div id="test"><h1>这是DIV</h1></div><input type="text" id="username" value="陈微"><br><input type="button" value="html" id="html"><input type="button" value="text" id="text"><input type="button" value="val" id="val">
</body>
</html>

6、jQuery文档操作

$();创建标签

append();在指定的标签中后置添加

prepend();在指定的标签中前置添加

after();在指定标签的后面添加

before();在指定标签的前面添加

remove();移除指定标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.3.js"></script><script>$(function(){$("#btn").click(function(){//创建一个能够跳转到B站的超链接var newEle = $("<a href='http://www.bilibili.com'>B站</a>");//将新建的标签放到id为test的标签中的最后//$("#test").append(newEle);//将新建的标签放到id为test的标签中的最前面//$("#test").prepend(newEle);//将新建的标签放到id为test的标签的后面//$("#test").after(newEle);//将新建的标签放到id为test的标签的前面//$("#test").before(newEle);//将id为test的标签删除掉$("#test").remove();});});</script>
</head>
<body><div id="test" style="background-color: red;"><h1>这是DIV</h1></div><input type="button" value="测试" id="btn">
</body>
</html>

7、jQuery动画

显示与隐藏

show(time,function);显示

hide(time,function);隐藏

toggle(time,function);在显示与隐藏之间相互切换

time：显示与隐藏的时间，单位是毫秒

function：回调函数。显示与隐藏完毕之后自动调用的函数。

两个参数都是可选参数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.3.js"></script><script>$(function(){$("#show").click(function(){$("#img").show(1000,function(){alert("显示出来了");});});$("#hide").click(function(){$("#img").hide(1000,function(){alert("隐藏起来了");});});$("#toggle").click(function(){$("#img").toggle(1000,function(){alert("切换了");});});});</script>
</head>
<body><input type="button" value="show" id="show"><input type="button" value="hide" id="hide"><input type="button" value="toggle" id="toggle"><br><img src="img/gouza.png" width="300" id="img">
</body>
</html>

8、bootstrap使用方式

在HTML文件中引入对应的bootstrap文件（注意，bootstrap.js是基于jQuery的，所以要先引入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"><title></title><script src="js/jquery-3.6.3.js"></script><script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script><link href="bootstrap-3.4.1-dist/css/bootstrap-theme.css" rel="stylesheet"><link href="bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
</head>
<body><h1>你好，世界！</h1>
</body>
</html>

jQuery BootStrap

1、jQuery的使用方式 1、下载jQuery库文件网址 2、将下载好的js文件放到项目中，并引入到需要的HTML文件中 3、使用jQuery 注意：jQuery库文件的导入必须在自己写的代码之前。就绪函数在页面上可以写n个。 <!DOCTYPE html> <html lang"en…...

编程日记 2023/5/6 11:36:04

Vue2.0开发之——购物车案例-Footer组件封装(50)

一概述导入Footer子组件定义fullState计算属性把全选状态传递给Footer子组件实现全选功能二导入Footer子组件 2.1 App.vue中导入Footer组件 import Footer from "/components/Footer/Footer.vue";2.2 App.vue中注册Footer子组件 components: {Header,Goods,F…...

编程日记 2023/5/6 11:36:01

HTML基本概述

文章目录网站和网页浏览器的作用HTML标签元素注释乱码问题web系统是以网站形式呈现的，而前端是以网页形式呈现的。网站和网页网站（web site）：互联网上用于展示特定内容的相关网页的集合。也就是说，一个网站包含多个…...

编程日记 2023/5/6 11:35:59

Vue 3.0 响应式计算和侦听【Vue3 从零开始】

本节使用单文件组件语法作为代码示例 #计算值有时我们需要依赖于其他状态的状态——在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用 computed 方法：它接受 getter 函数并为 getter 返回的值返回一个不可变的…...

编程日记 2023/5/6 11:35:56

1.mbedtls移植到STM32

mbedtls学习笔记 1.关于mbedtls2.STM32移植方法2.1STM32cubemx移植2.2手动移植12.3移植总结2.4手动移植22.4.1移植方式22.4.2测试SHA1加密1.关于mbedtls 1.主要提供了的 SSL/TLS 支持（在传输层对网络进行加密），各种加密算法，各种哈希算法，随机数生成以及 X.509（密码学里…...

编程日记 2023/5/6 11:35:54

模块、包和异常

目录1.模块import 导入from...import 导入2. 模块的搜索顺序3. __name__属性的使用4. 包包的使用步骤5. 发布模块6. 安装模块7. 卸载模块8. pip 安装第三方模块9. 异常处理异常捕获异常的传递抛出 raise 异常1.模块模块是 Python 程序架构的一个核心概念每一个以扩展名 py …...

编程日记 2023/5/6 11:35:52

RocketMQ控制台的安装与启动

RocketMQ控制台的安装与启动下载修改配置开放端口号重启防火墙添加依赖编译 rocketmq-dashboard运行 rocketmq-dashboard本地访问rocketmq无法发送消息失败问题。connect to ＜公网ip:10911＞ failed下载下载地址修改配置修改其src/main/resources中…...

编程日记 2023/5/6 11:35:49

pytorch安装的超级详细教程(没有之一)

一、发展历程 （简单介绍） (15年)caffe --> (16年)tensorflow1.x --> (17年)keras --> (18年)Tensorflow2.x --> (19年)pytorch。面向gihub开源项目编程。向下支持比较好，各个版本之间支持比较好，兼容性强。版本…...

编程日记 2023/5/6 11:35:47

leetcode两数之和

给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值 target 的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回…...

编程日记 2023/5/6 11:35:45

断点调试(debug)

目录 F8案例编辑 debug过程中报错编辑用debug查看方法源码一层一层查看 Arrays.sort()方法 F9 DebugExercise 介绍：断点调试是指在程序的某一行设置一个断电，调试时，程序运行到这一行就会停住，然后可以一步步往下调试…...

编程日记 2023/5/7 11:03:24

Vuex 状态管理

文章目录Vuex概述安装单向数据流Vuex核心概念StatemapState 辅助函数扩展运算符GettermapGetters 辅助函数Mutation提交载荷提交载荷对象对象风格提交使用常量替代mutation事件类型Action异步分发Module命名空间Vuex 概述 Vuex 是一个状态管理库，用于管理 Vue.js …...

编程日记 2023/5/7 2:52:54

射频功率放大器在辉光放电特征及风速测量原理中的应用

实验名称：辉光放电特征及风速测量原理研究方向：辉光放电测试设备：信号发生器、ATA-8202射频功率放大器，热成像仪、万用表、等离子体传感器实验过程：在等离子体形成条件和流场响应机制的基础上，可以明确影响…...

编程日记 2023/5/7 2:52:52

keepalived+nginx 双机热备搭建

keepalivednginx 双机热备搭建一、准备工作1.1 准备两台centos7.91.2 nginx 与 keepalived软件双机安装1.3 ip分配1.4 修改主机名1.5 关闭selinux（双机执行）1.6 修改hosts（双机执行）二、安装keepalived2.1 执行一下命令安装keepa…...

编程日记 2023/5/7 2:52:47

零基础如何入门学习Python？

阶段一：Python开发基础 Python全栈开发与人工智能之Python开发基础知识学习内容包括：Python基础语法、数据类型、字符编码、文件操作、函数、装饰器、迭代器、内置方法、常用模块等。阶段二：Python高级编程和数据库开发 Python全栈开发与人…...

编程日记 2023/5/7 2:52:45

认识CSS之基础选择器

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简…...

编程日记 2023/5/7 2:52:42

JavaScript面试题整理汇总

1、面试官：说说JavaScript中的数据类型？存储上的差别？在JavaScript中，我们可以分成两种类型：基本类型和复杂类型。两种类型的区别是：存储位置不同基本类型主要为以下6种：NumberStringBooleanUnd…...

编程日记 2023/5/7 2:52:40

科普| 什么是云原生？

“新冠疫情从根本上改变了商业模式，工作流向在线迁移的速度比以往任何时候都要快。越来越多的公司和消费者依靠电子商务“ B2B”和B2C”，以及网上银行促进创新以满足日益增长的客户需求，云原生技术在其中发挥重要作用，同时也加速了…...

编程日记 2023/5/6 11:35:42

Spring Boot 3.0系列【9】核心特性篇之依赖管理

有道无术，术尚可求，有术无道，止于术。本系列Spring Boot版本3.0.3 源码地址：https://gitee.com/pearl-organization/study-spring-boot3 文章目录前言依赖管理1. dependencyManagement、parent2. spring-boot-starter-parent3. spring-boot-dependencies4. 实际开发中的…...

编程日记 2023/5/7 2:52:38

每日算法题

目录第一题第二题第一题题目描述小蓝要为一条街的住户制作门牌号。这条街一共有 20202020 位住户，门牌号从 11 到 20202020 编号。小蓝制作门牌的方法是先制作 00 到 99 这几个数字字符，最后根据需要将字符粘贴到门牌上，例如门牌…...

编程日记 2023/5/6 11:35:40

xss靶场绕过

目录第一关原理 payload 第二关原理 payload 第三关原理 payload 第四关原理 payload 第五关原理 payload 第六关原理 payload 第七关原理 payload 第八关原理 payload 第九关原理 payload 第十关原理 payload 第十一关原理 payl…...

编程日记 2023/5/6 17:42:53

从SWF中提取供应链安全控制：JPEXS Free Flash Decompiler安全研究

从SWF中提取供应链安全控制：JPEXS Free Flash Decompiler安全研究【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款强大的开源工具&#x…...

编程新知 2026/3/27 20:59:43

人工智能毕业设计2026方向集合

0 选题推荐 - 人工智能篇毕业设计是大家学习生涯的最重要的里程碑，它不仅是对四年所学知识的综合运用，更是展示个人技术能力和创新思维的重要过程。选择一个合适的毕业设计题目至关重要，它应该既能体现你的专业能力，又能满足实际…...

编程新知 2026/3/27 20:33:36

老码农和你一起学AI系列：ELECTRA

ELECTRA（Efficiently Learning an Encoder that Classifies Token Replacements Accurately）是Google Research在2020年提出的一种自监督预训练方法。它不像BERT那样做“完形填空”，而是让模型扮演一个“作弊检测员”，通过判别输入…...

编程新知 2026/3/27 19:44:59

BGE嵌入模型突破指南：解锁多模态检索增强的实战路径

BGE嵌入模型突破指南：解锁多模态检索增强的实战路径【免费下载链接】FlagEmbedding Dense Retrieval and Retrieval-augmented LLMs 项目地址: https://gitcode.com/GitHub_Trending/fl/FlagEmbedding 在信息爆炸的时代，如何让机器精准理解人类语…...

编程新知 2026/3/27 18:54:45

开源动作捕捉新纪元：FreeMoCap低成本解决方案全解析

开源动作捕捉新纪元：FreeMoCap低成本解决方案全解析【免费下载链接】freemocap Free Motion Capture for Everyone 💀✨ 项目地址: https://gitcode.com/GitHub_Trending/fr/freemocap 问题：动作捕捉技术的高门槛困境在数字内容创作…...

编程新知 2026/3/27 18:28:32

SDXL-Turbo快速上手：AutoDL开箱即用，零配置体验实时AI绘画

SDXL-Turbo快速上手：AutoDL开箱即用，零配置体验实时AI绘画 1. 什么是SDXL-Turbo SDXL-Turbo是StabilityAI推出的新一代实时AI绘画模型，它彻底改变了传统AI绘画需要等待数秒甚至数十秒才能看到结果的工作方式。基于创新的对抗扩散蒸馏技术(A…...

编程新知 2026/3/27 17:31:57

分布式电池管理系统：基于微控制器架构的智能电池保护与均衡解决方案

分布式电池管理系统：基于微控制器架构的智能电池保护与均衡解决方案【免费下载链接】SmartBMS Open source Smart Battery Management System 项目地址: https://gitcode.com/gh_mirrors/smar/SmartBMS SmartBMS是一个开源的智能电池管理系统，专…...

编程新知 2026/3/27 17:21:55

嵌入式通信协议SPI/I2C/UART原理与应用

嵌入式通信协议原理图解与技术解析1. 串行通信协议基础1.1 SPI通信协议SPI(Serial Peripheral Interface)是一种全双工、同步串行通信协议，采用主从架构设计。其核心特点包括：四线制结构：SCLK(时钟)、MOSI(主出从入)、MISO(主入从出)、SS(片选…...

编程新知 2026/3/27 16:51:33

Wan2.2-I2V-A14B开源可部署：符合等保2.0要求，支持审计日志+访问控制

Wan2.2-I2V-A14B开源可部署：符合等保2.0要求，支持审计日志访问控制 1. 镜像概述与核心特性 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像，基于RTX 4090D 24GB显存显卡和CUDA 12.4环境深度定制。本镜像不仅提供高性能的视频生成…...

编程新知 2026/3/27 14:28:28

PCB数据处理利器：从安装到实战的全方位指南

PCB数据处理利器：从安装到实战的全方位指南【免费下载链接】pcb-tools Tools to work with PCB data (Gerber, Excellon, NC files) using Python. 项目地址: https://gitcode.com/gh_mirrors/pc/pcb-tools 1. 项目价值解析 PCB Tools作为一款专注于印制电…...

编程新知 2026/3/27 13:57:15