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

JavaWeb——JQuery

news 2025/7/10 14:24:14

文章目录

  • JQuery 是什么?
    • jQuery 的原理示意图
  • JQuery 基本开发步骤
  • jQuery 对象和 DOM 对象
    • 将dom对象转为JQuery对象
    • jQuery 对象转成 DOM 对象
  • jQuery 选择器
    • 基本选择器
    • 基础过滤选择器

JQuery 是什么?

基本介绍

  1. jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom…
  2. 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互
  3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情. 4. jQuery 实现了浏览器的兼容问题

jQuery 的原理示意图

在这里插入图片描述

JQuery 基本开发步骤

下面是jquery的一个简单说明
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    引入jquery库--><script type="text/javascript" src="script/jquery-3.7.1.min.js"></script><script type="text/javascript">/*** 下面的代码必须在  <script type="text/javascript">内写。上面的<script type="text/javascript" src="script/jquery-3.7.1.min.js">仅仅是导包* 1. 初次使用 jquery , 你会觉得语法比较奇怪，其实 jquery 的底层仍然是 js,只是做了封 装* 2. $(function () {} 等价 window.onload = function () {}* 3. $() 可以理解成是一个函数 [可以定义 function $(id) {} ...]* 3. $("#btn01") 底层: document.getElementById("btn01")* 4. 注意 $("#btn01") 不能写成 $("btn01")* 5. 通过$("#btn01") 返回的对象就是 jquery 对象(即进行了封装)，而不是原生的 dom 对象*/$(function () {/** $btn01 是一个 jquery 对象 其实就是对 dom 对象的包装.* 2. jquery 中，获取对象的方法是 $("#id"), 必须在 id 前有#* 3. 编程中，规定 jquery 对象的命名以$开头.(不是必须，但是约定)* */var $btn = $("#btn");// 绑定事件$btn.click(function () {                <!--这里是click，不是onclick了-->alert("hello, jquery")})});</script><!--    &lt;!&ndash;    使用原生方法&ndash;&gt;--><!--    <script type="text/javascript">--><!--        window.onload = function () {--><!--            var elementById = document.getElementById("btn");--><!--            elementById.onclick = function () {--><!--                alert("提交成功")--><!--            }--><!--        }--><!--    </script>-->
</head>
<body>
<button id="btn">提交</button>
</body>
</html>

jQuery 对象和 DOM 对象

  1. jQuery 对象就是对 DOM 对象进行包装后产生的对象

 比如： $(“#test”).html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
 这段代码等同于用DOM实现代码： document.getElementById(“id”).innerHTML;

  1. jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用
    jQuery 里的方法: $(“#id”).html();

  2. 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $ , 比如: var $variable =
    jQuery 对象 var variable = DOM 对象

将dom对象转为JQuery对象

//把 username dom 对象转成 jquery 对象
var $username = $(username);

jQuery 对象转成 DOM 对象

  • jQuery 本身提供，通过.get(index)方法，得到相应的 DOM 对象
  • jQuery 对象是一个数组对象，可以通过[index]的方法，来得到相应的 DOM 对象
//方式 1
// var username = $username[0];//方式 2
var username = $username.get(0);

<

相关文章：

JavaWeb——JQuery

文章目录 JQuery 是什么?jQuery 的原理示意图JQuery 基本开发步骤jQuery 对象和 DOM 对象将dom对象转为JQuery对象jQuery 对象转成 DOM 对象jQuery 选择器基本选择器基础过滤选择器JQuery 是什么? 基本介绍 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理…...

编程日记 2023/12/28 16:46:17

Python教程：查询Py模块的版本号，有哪些方法？

1.查看模块内部的版本信息&#xff1a;如果你已经导入了该模块&#xff0c;可以查看模块内部的__version__属性来获取版本信息。例如&#xff0c;对于pandas模块&#xff0c;可以运行import pandas和print(pandas.version)来获取版本信息。 import pandas print(pandas.__vers…...

编程日记 2023/12/28 16:42:14

第一节 初始化项目

系列文章目录 第一节 初始化项目 文章目录 操作步骤 总结 操作步骤 打开cmd 输入 vue ui 在打开的网页中点击“创建”&#xff0c;复制文件夹路径并粘贴点击“在此创建新项目” 输入项目名称 点击下一步选择手动配置 选择babel、router、vuex、css pre-processors、 linter建…...

编程日记 2023/12/28 16:41:13

idea提示unable to import maven project

问题描述&#xff1a; idea导入maven依赖时提示unable to import maven project 打开log日志如下&#xff1a; 问题原因以及解决方案&#xff1a; maven版本与idea版本不兼容&#xff0c;切换maven版本即可...

编程日记 2023/12/28 16:38:10

【Spring】SpringBoot日志

文章目录 什么是日志日志的用途日志的使用如何打印日志日志级别日志框架门面模式&#xff08;外观模式&#xff09;日志级别的使用配置日志级别日志持久化配置日志的存储目录配置日志文件名配置日志文件分割 更简单的日志输出 什么是日志 在计算机领域&#xff0c;日志是一个记…...

编程日记 2023/12/28 16:36:08

HTML+CSS制作动漫绿巨人

🎀效果展示 🎀代码展示 <!DOCTYPE html> <html lang="en" > <head>...

编程日记 2023/12/28 16:34:06

AGV智能搬运机器人-替代人工工位让物流行业降本增效

在当今快速发展的世界中&#xff0c;物流业面临着巨大的挑战&#xff0c;包括提高效率、降低成本和优化工作流程。为了应对这些挑战&#xff0c;一种新型的自动化设备——智能搬运机器人正在崭露头角。本文将通过一个具体的案例来展示富唯智能转运机器人在实际应用中的价值。 案…...

编程日记 2023/12/28 16:32:04

【办公技巧】怎么批量提取文件名到excel

Excel是大家经常用来制作表格的文件&#xff0c;比如输入文件名&#xff0c;如果有大量文件需要输入&#xff0c;用张贴复制或者手动输入的方式还是很费时间的&#xff0c;今天和大家分享如何批量提取文件名。 打开需要提取文件名的文件夹&#xff0c;选中所有文件&#xff0c…...

编程日记 2023/12/28 16:29:02

uniapp实现前端银行卡隐藏中间的数字，及隐藏姓名后两位

Vue 实现前端银行卡隐藏中间的数字 主要应用了 filters过滤器 来实现效果 实现效果&#xff0c;如图&#xff1a; <template><div><div style"background-color: #f4f4f4;margin:50px 0 0 460px;width:900px;height:300px;"><p>原来&#…...

编程日记 2023/12/28 16:27:00

HPCC：高精度拥塞控制

HPCC&#xff1a;高精度拥塞控制 文章目录 HPCC&#xff1a;高精度拥塞控制摘要1 引言1.1 背景1.2 现有CC的局限性1.3 HPCC的提出 2 研究动机2.1 大型RDMA部署2.2 RDMA目标2.3 当前RDMA CC中的权衡DCQCNTIMELY 2.4 下一代高速CC 3 技术方案3.1 INT3.2 HPCC设计3.3 HPPC的参数 4…...

编程日记 2023/12/28 16:19:55

centos 配置 git 连接 github

centos 配置 git 连接 github 首先安装 git 创建 ssh key ssh-keygen -t rsa复制公钥 cat ~/.ssh/id_rsa.pub # 打印出公钥内容然后复制配置 github 登录网页 github 账号&#xff1b;进入 setting&#xff1b;点击 SSH and GPG keys&#xff0c;点击 New SSH keytitile 随便填…...

编程日记 2023/12/28 16:15:52

SpringBoot发布项目到docker

Dockerfile FROM openjdk:11 # 作者 MAINTAINER chenxiaodong<2774398338qq.com># 安装 vim # RUN yum -y install vim# 环境变量 # 进入容器后的默认工作目录 ENV WORKPATH /usr/local/webapp ENV EXECFILE Docker2Application-0.0.1-SNAPSHOT.jarRUN mkdir -p $WORKPA…...

编程日记 2023/12/28 16:11:48

sheng的学习笔记-卷积神经网络

源自吴恩达的深度学习课程&#xff0c;仅用于笔记&#xff0c;便于自行复习 导论 1&#xff09;什么是卷积神经网络 卷积神经网络&#xff0c;也就是convolutional neural networks &#xff08;简称CNN&#xff09;&#xff0c;使用卷积算法的神经网络&#xff0c;常用于计…...

编程日记 2023/12/28 16:09:46

数据库：园林题库软件（《中国古代园林史》答题卷一 ）

《中国古代园林史》答题卷一 填空题 1、中国古代园林曾被誉为“世界园林之母”。国际风景园林师联合会(IFLA)的创始人、著名风景园林师和教育家杰里柯爵士( Sir Geoffrey Alan Jellicoe)把中国古代园林和西亚园林以及古希腊园林列为世界三大园林体系之首。 2、中国古代园林是…...

编程日记 2023/12/28 16:08:45

upset 绘制

好久没有更新,今天来一个upset图的绘制 1.1 安装包 #绘制upset的包现在看来有三个 ## UpSet ### 最基本的upsetR包,使用方便,但是扩展不方便 devtools::install_github("hms-dbmi/UpSetR") ## complex-upset ### UpSet的升级款 支持ggplot2 devtools::install_git…...

编程日记 2023/12/28 16:05:42

声明 | 为打击假冒账号、恶意抄袭账号等诈骗活动，提升本账号权威，本博主特此郑重声明

声明 | 为打击假冒账号、恶意抄袭账号诈骗活动&#xff0c;提升本账号权威&#xff0c;本博主特此郑重声明 一、本账号为《机器学习之心》博主CSDN唯一官方账号&#xff0c;唯一联系方式见文章底部。 二、《机器学习之心》博主未授权任何第三方账号进行模型合作、程序设计、源…...

编程日记 2023/12/28 16:03:40

云计算：OpenStack 配置二层物理网卡为三层桥的接口

目录 一、理论 1.OpenStack 二、实验 1. Linux系统修改网卡 2.OpenStack 配置二层物理网卡为三层桥的接口 一、理论 1.OpenStack &#xff08;1&#xff09;概念 OpenStack是一个开源的云计算管理平台项目&#xff0c;是一系列软件开源项目的组合。由NASA(美国国家航空…...

编程日记 2023/12/28 16:00:38

Python sanic框架钉钉和第三方打卡机实现

同样还是需要开通钉钉应用这里就不错多说了 第一步:梳理逻辑流程 前提&#xff1a;打卡的机器是使用postgres数据库&#xff0c;由于因为某些原因&#xff0c;钉钉userId 我已经提前获取到了存放到数据库里。 1.用户打卡成功后&#xff0c;我们应该监听数据库进行查询&#xf…...

编程日记 2023/12/28 15:55:34

微信小程序性能优化

1. 代码包不包含插件大小超过 1.5 M 建议&#xff1a;小程序代码包单个包大小限制为2M。因此我们建议开发者在开发时&#xff0c;如果遇到单包体积大于1.5M的情况&#xff0c;可以采取分包的方式&#xff0c;把部分代码拆分到分包去&#xff0c;降低单个包的体积&#xff0c;提…...

编程日记 2023/12/28 15:53:32

java并发编程六 ReentrantLock，锁的活跃性

多把锁 一间大屋子有两个功能&#xff1a;睡觉、学习&#xff0c;互不相干。 现在小南要学习&#xff0c;小女要睡觉&#xff0c;但如果只用一间屋子&#xff08;一个对象锁&#xff09;的话&#xff0c;那么并发度很低 解决方法是准备多个房间&#xff08;多个对象锁&#xf…...

编程日记 2023/12/28 15:52:31

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/7/10 4:54:42

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/7/8 20:45:19

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/6/17 23:10:20

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/6/21 2:09:08

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/7/9 1:11:39

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/7/9 20:20:31

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;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/9 17:24:19

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/6/21 1:43:55

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/6/21 15:17:11