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

jQuery_09 事件的绑定与使用(on)

news 2026/4/7 12:32:30

jQuery使用on绑定事件

   

jQuery可以给dom对象添加事件 在程序执行期间动态的处理事件

1.  $("选择器").事件名称(事件处理函数)

$("选择器") ： 选择0或者多个dom对象 给他们添加事件

事件名称：就是js中事件名称去掉on的部分  比如单击事件onclick 在jQuery就是click

事件处理函数：就是js中的事件处理函数

2. $("选择器").on("事件名称",事件处理函数)

事件名称：就是事件中去掉on的部分

事件处理函数 就是当事件触发的时候的回调函数 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script type="text/javascript" src="../js/jquery.js"></script><script type="text/javascript">$(function () {$("#btn1").on("click",function(){// alert("button click");// 在div中 新增一个按钮 使用append函数$("div").append("<button id='newBtn'>我是新加的按钮</button>")$("#newBtn").on("click",function(){alert("我是新加的按钮");})})});</script><style type="text/css">div {background-color: gray;}</style></head><body><div id="mydiv" style="background-color: aquamarine;">我是mydiv</div><br /><br /><button id="btn1">新增dom对象绑定事件</button></body><script>/* jQuery可以给dom对象添加事件 在程序执行期间动态的处理事件 1.  $("选择器").事件名称(事件处理函数)$("选择器") ： 选择0或者多个dom对象 给他们添加事件事件名称：就是js中事件名称去掉on的部分  比如单击事件onclick 在jQuery就是click事件处理函数：就是js中的事件处理函数2. $("选择器").on("事件名称",事件处理函数)事件名称：就是事件中去掉on的部分事件处理函数 就是当事件触发的时候的回调函数*/</script>
</html>

注意：在JavaScript脚本中使用  $("div").append("<button id='newBtn'>我是新加的按钮</button>")类似的语句的时候 双引号中应该使用单引号，使用双引号会出现错误。 

相关文章：

jQuery_09 事件的绑定与使用(on)

jQuery使用on绑定事件 jQuery可以给dom对象添加事件 在程序执行期间动态的处理事件 1. $("选择器").事件名称(事件处理函数) $("选择器") &#xff1a; 选择0或者多个dom对象 给他们添加事件 事件名称&#xff1a;就是js中事件名称去掉on的部分 比如单击…...

编程日记 2023/11/28 1:36:21

详解Java中的泛型（泛型的语法，擦除机制，泛型的上界）

目录 一.什么是泛型 二.Java中为什么要使用泛型 三.泛型的语法 四.泛型类的使用 五.泛型的编译机制&#xff08;擦除机制&#xff09; 六.泛型的上界 一.什么是泛型 泛型&#xff08;Generics&#xff09;是Java SE 5中引入的一个新特性&#xff0c;可以使Java中的类和方…...

编程日记 2023/11/28 1:35:19

数据结构算法-贪心算法

引言 贪心&#xff1a;人只要有 “需求“ &#xff0c;都会有有点“贪“&#xff0c; 这种“贪“是一种选择&#xff0c;或者“”取舍“ RTS&#xff08;即时战略&#xff09;游戏&#xff1a; 帝国时代里 首先确保拥有足够的人口 足够的粮食&#xff0c;足够的战略资源 足够的…...

编程日记 2023/11/28 1:34:18

【云备份】数据管理模块

文章目录 1. 数据管理模块要管理什么数据&#xff1f;2. 数据管理模块如何管理数据&#xff1f;3. 数据管理模块的具体实现BackupInfo 数据信息类NewBackupInfo —— 获取各项属性信息 DataManager 数据管理类构造函数析构函数insert —— 新增update —— 修改GetOneByURL——…...

编程日记 2023/11/28 1:32:16

C++ :const修饰成员函数

常函数&#xff1a; 常函数&#xff1a; 成员函数后加const后我们称为这个函数为常函数 常函数内不可以修改成员属性 成员属性声明时加关键字mutable后&#xff0c;在常函数中依然可以修改 属性可修改&#xff1a; class Person { public: void showPerson() …...

编程日记 2023/11/28 1:31:16

论文阅读：“Model-based teeth reconstruction”

文章目录 AbstractIntroductionTeeth Prior ModelData PreparationParametric Teeth Model Teeth FittingTeeth Boundary Extraction Reference Abstract 近年来&#xff0c;基于图像的人脸重建方法日趋成熟。这些方法可以捕捉整个面部或面部特定区域&#xff08;如头发、眼睛…...

编程日记 2023/11/28 1:30:14

Web 安全之证书透明（Certificate Transparency）详解

目录 证书透明性的概念 数字证书和颁发机构 证书透明的起源 证书透明的工作原理 证书透明的实现方法 证书透明的优点 浏览器和客户端对证书透明的支持情况 小结 证书透明&#xff08;Certificate Transparency, CT&#xff09;是网络安全领域中的一个重要概念&#xff…...

编程日记 2023/11/28 1:28:13

智能优化算法应用：基于蜻蜓算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蜻蜓算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蜻蜓算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蜻蜓算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…...

编程日记 2023/11/28 1:27:12

【古诗生成AI实战】之二——项目架构设计

[1] 项目架构 在我们深入古诗生成AI项目的具体实践之前&#xff0c;让我们首先理解整个项目的架构。本项目的代码流程主要分为三个关键阶段&#xff1a; 1、数据处理阶段&#xff1b;   2、模型训练阶段&#xff1b;   3、文本生成阶段。 第一步&#xff1a;在数据处理阶段…...

编程日记 2023/11/28 1:26:11

动态网页从数据库取信息，然后展示。

把数据库的驱动放在bin目录下。 通过servlet 读取数据库的内容&#xff0c;生成session,然后跨页面传给展示页。 package src;import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSe…...

编程日记 2023/11/28 1:24:08

单片机学习3——数码管

数码管&#xff0c;根据内部结构&#xff0c;可分为共阴极数码管和共阳极数码管。七段发光管加上一个小数点&#xff0c;共计8段。因此&#xff0c;我们对它编程的时候&#xff0c;刚好是用一个字节。 数码管的显示方式&#xff1a; 1&#xff09;静态显示&#xff1b; 2&…...

编程日记 2023/11/28 1:23:08

数据库表结构导出成Excel或Word格式

前言 该工具主要用于导出excel、word&#xff0c;方便快速编写《数据库设计文档》&#xff0c;同时可以快速查看表的结构和相关信息。 本博客仅作记录&#xff0c;最新源码已经支持多种数据库多种格式导出&#xff0c;有兴趣的可移步源码作者地址&#xff1a;https://gitee.co…...

编程日记 2023/11/28 1:22:05

School training competition ( Second )

A. Medium Number 链接 : Problem - 1760A - Codeforces 就是求三个数的中位数 : #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); #define endl \nusing namespace std; typedef long long LL; const int N 2e510;inline void …...

编程日记 2023/11/28 1:21:04

深度解析 Docker Registry：构建安全高效的私有镜像仓库

文章目录 什么是Docker Registry&#xff1f;Docker Hub vs. 私有RegistryDocker Hub&#xff1a;私有Registry&#xff1a; 如何构建私有Docker Registry&#xff1f;步骤一&#xff1a;安装Docker Registry步骤二&#xff1a;配置TLS&#xff08;可选&#xff09;步骤三&…...

编程日记 2023/11/28 1:20:03

leetcode 不同的二叉搜索树

给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;5 示例 2&#xff1a; 输入&#xff1a;n 1 输出&#xff1a;…...

编程日记 2023/11/28 1:19:02

通俗易懂的spring Cloud；业务场景介绍 二、Spring Cloud核心组件：Eureka 、Feign、Ribbon、Hystrix、zuul

文章目录 通俗易懂的spring Cloud一、业务场景介绍二、Spring Cloud核心组件&#xff1a;Eureka三、Spring Cloud核心组件&#xff1a;Feign四、Spring Cloud核心组件&#xff1a;Ribbon五、Spring Cloud核心组件&#xff1a;Hystrix六、Spring Cloud核心组件&#xff1a;Zuul七…...

编程日记 2023/11/28 1:18:01

大数据预处理技术

文章目录 前言 大数据技术成为前沿专业 也是现在甚至未来的朝阳产业&#xff0c;大数据有分别是 数据预处理 数据存储 大数据处理和分析 数据可视化 部分组成 &#xff0c;大数据行业有数据则称王&#xff0c;大数据的核心是数据本身 怎么获取有价值的数据呢&#xff1f;本章讲…...

编程日记 2023/11/28 1:15:58

跳表的学习记录

跳表&#xff08;Skip List&#xff09;是一种数据结构&#xff0c;它通过在多个层次上添加额外的前向指针来提高有序数据的搜索效率。跳表与其他常见的有序数据结构&#xff08;如二叉搜索树、平衡树如AVL树和红黑树、B树等&#xff09;相比&#xff0c;具有其独特的优缺点&am…...

编程日记 2023/11/28 1:13:57

电子学会C/C++编程等级考试2022年09月（二级）真题解析

C/C++等级考试（1~8级）全部真题・点这里 第1题：统计误差范围内的数 统计一个整数序列中与指定数字m误差范围小于等于X的数的个数。 时间限制：5000 内存限制：65536输入 输入包含三行： 第一行为N，表示整数序列的长度(N <= 100); 第二行为N个整数，整数之间以一个空格分…...

编程日记 2023/11/28 1:12:55

如何使用nginx部署静态资源

Nginx可以作为静态web服务器来部署静态资源&#xff0c;这个静态资源是指在服务端真实存在&#xff0c;并且能够直接展示的一些文件数据&#xff0c;比如常见的静态资源有html页面、css文件、js文件、图片、视频、音频等资源相对于Tomcat服务器来说&#xff0c;Nginx处理静态资…...

编程日记 2023/11/28 1:11:54

网络设备唯一身份证：MAC地址原理与作用全网最详解析

网络设备唯一身份证&#xff1a;MAC地址原理与作用全网最详解析 前言一、MAC地址&#xff1a;核心定义1.1 标准定义1.2 通俗理解1.3 核心特性 二、MAC地址&#xff1a;表示格式2.1 标准格式2.2 组成结构&#xff08;两大部分&#xff09;2.3 结构流程图 三、MAC地址&#xff1a…...

编程新知 2026/4/7 12:22:00

Open UI5 源代码解析之878：ObjectAttribute.js

源代码仓库： https://github.com/SAP/openui5 源代码位置：src\sap.m\src\sap\m\ObjectAttribute.js ObjectAttribute.js 深度分析与项目作用说明 文件定位与整体结论 ObjectAttribute.js 位于 sap.m 库内部，是 sap.m.ObjectAttribute 控件的核心实现文件。它的职责并不…...

编程新知 2026/4/7 12:17:59

新手避坑指南：当npm报错128时，如何用快马AI轻松完成第一个项目

最近在帮朋友入门Node.js开发时&#xff0c;发现很多新手卡在环境配置这一步就放弃了。特别是遇到npm error code 128这种报错时&#xff0c;往往连错误说明都看不懂。今天分享一个用InsCode(快马)平台快速搭建第一个Node.js项目的避坑指南&#xff0c;特别适合零基础开发者。 …...

编程新知 2026/4/7 11:15:06

Phi-4-mini-reasoning集成Visual Studio Code：智能代码补全与调试插件开发

Phi-4-mini-reasoning集成Visual Studio Code&#xff1a;智能代码补全与调试插件开发 1. 为什么开发者需要AI驱动的IDE插件 现代软件开发正变得越来越复杂&#xff0c;开发者每天要面对海量代码库、频繁的上下文切换和层出不穷的新技术。传统IDE虽然提供了基础补全功能&…...

编程新知 2026/4/7 7:40:23

Rails API应用数据一致性终极指南：乐观锁与悲观锁对比详解

Rails API应用数据一致性终极指南&#xff1a;乐观锁与悲观锁对比详解 【免费下载链接】rails-api Rails for API only applications 项目地址: https://gitcode.com/gh_mirrors/ra/rails-api 在现代Web应用开发中&#xff0c;数据一致性是API设计的核心挑战之一。Rails…...

编程新知 2026/4/7 7:11:38

Python爬虫实战：用Qwen2.5-VL智能解析网页图片内容

Python爬虫实战&#xff1a;用Qwen2.5-VL智能解析网页图片内容 1. 引言 你有没有遇到过这样的情况&#xff1a;爬取了大量网页图片&#xff0c;却要人工一张张查看内容&#xff1f;或者需要从海量图片中筛选出特定类型的商品、识别图中的文字信息&#xff1f;传统爬虫只能获取…...

编程新知 2026/4/7 6:48:58

[GROMACS]氢键分析工具的版本迭代：“-life”等参数的消失

引言&#xff1a;一次意外的发现 “为什么我的GROMACS没有gmx hbond中的-life参数&#xff1f;” 当我在Windows终端中输入gmx hbond -h&#xff0c;仔细翻看帮助文档中每一个参数&#xff0c;却始终找不到期待已久的-life选项时&#xff0c;一种困惑油然而生。氢键寿命分析&…...

编程新知 2026/4/7 6:44:45

AI绘画小白入门：基于Z-Image Turbo的二次元/火影风格图片生成全流程

AI绘画小白入门&#xff1a;基于Z-Image Turbo的二次元/火影风格图片生成全流程 1. 为什么选择Z-Image Turbo 如果你是一个动漫爱好者&#xff0c;想要尝试AI绘画但又被复杂的参数设置劝退&#xff0c;Z-Image Turbo可能是最适合你的入门选择。这个专门针对二次元和火影忍者风…...

编程新知 2026/4/7 5:25:36

手机版Termux中Firefox浏览器的安装与网络配置指南

一、问题定位与核心原理在Termux环境中使用Firefox浏览器时&#xff0c;常见的网络问题多源于软件源配置、DNS解析、网络环境适配三大核心环节。本文将基于Linux系统原理&#xff0c;提供纯本地环境下的合规配置方案&#xff0c;帮助解决访问异常、安装失败等问题。二、基础配置…...

编程新知 2026/4/7 5:21:31

如何检查SEO文件是否设置正确

如何检查SEO文件是否设置正确 在当今互联网时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为网站运营中不可忽视的一环。SEO文件的设置直接影响网站在搜索引擎上的排名和流量。因此&#xff0c;如何检查SEO文件是否设置正确&#xff0c;是每一个网站运营者必…...

编程新知 2026/4/7 4:54:41