jQuery_05 事件的绑定

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

jQuery如何绑定事件呢?

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

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

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

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

注意 :因为html文件的执行顺序是从上到下的,所以,如果script标签写body元素上面,直接获取元素绑定是不行的,因为那时候dom还没有加载完成,无法获得元素,不过可以使用$(function{})在其中写入绑定事件,就可以顺利执行,因为$(function{})是页面加载完成以后调用的,相当于onload操作。 

<!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">
      //不生效  因为dom对象还没有加载完成 所以找不到dom对象
      // $("#btn").click(function () {
      //   alert("我单机了按钮");
      // });
      $(function () {
        //页面加载完成之后执行 相当于onload事件
        $("#btn").click(function () {
          alert("我单机了按钮");
        });
      });
    </script>
    <style type="text/css">
      div {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <div id="one">我是div0</div>
    <div id="two">我是div1</div>
    <div id="">
      我是div2
      <div>我是div3</div>
      <div>我是div4</div>
    </div>
    <div>我是div5</div>
    <br />
    <br />
    <span>我是span</span>

    <br />
    <br />
    <input type="button" id="btn" value="绑定事件" /><br />
  </body>
  <script type="text/javascript">
    /* 
    jQuery可以给dom对象添加事件 在程序执行期间动态的处理事件 
    1.  $("选择器").事件名称(事件处理函数)
    $("选择器") : 选择0或者多个dom对象 给他们添加事件
    事件名称:就是js中事件名称去掉on的部分  比如单击事件onclick 在jQuery就是click
    事件处理函数:就是js中的事件处理函数
    */
    //绑定事件
    // $("#btn").click(function () {
    //   alert("我单机了按钮");
    // });
  </script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/188721.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux 命令vim(编辑器)

(一)vim编辑器的介绍 vim是文件编辑器&#xff0c;是vi的升级版本&#xff0c;兼容vi的所有指令&#xff0c;同时做了优化和延伸。vim有多种模式&#xff0c;其中常用的模式有命令模式、插入模式、末行模式&#xff1a;。 (二)vim编辑器基本操作 1 进入vim编辑文件 1 vim …

河南省第五届“金盾信安杯”网络与数据安全大赛实操技能赛 部分wp(自己的一些思路和解析 )(主misc crypto )

芜湖 不评价 以下仅是自己的一些思路和解析 有什么问题或者建议随时都可以联系我 目录 题目一 来都来了 操作内容&#xff1a; flag值&#xff1a; 题目二 Honor 操作内容&#xff1a; flag值&#xff1a; 题目三 我看看谁还不会RSA 操作内容&#xff1a; flag值&a…

3. 内存单元

1位的内存单元 对于一个内存单元需要有:1个锁存器,数据输入,可写控制,是否读取(也是是否输出), 行和列(内存地址), 数据输出这几部分组成写入: 当行和列, 数据输入,可写全为1时则写入,(行 & 列 & 输入 & 可写)读出(输出): 当 行,列, 是否读取(也是是否输出) ( 行 …

c语言练习12周(6~10)

以下程序调用递归函数fun实现求n!&#xff0c;请补充代码。 题干以下程序调用递归函数fun实现求n!&#xff0c;请补充代码。 int fun(int n) { int c; /****************/ /****************/ else cn*fun(n-1); …

【云备份】文件操作实用工具类设计

文章目录 为什么要单独设计文件工具类&#xff1f;整体实现Filesize ——文件大小stat接口 LastMTime ——最后一次修改时间LastATime —— 最后一次访问时间FileName —— 文件名称GetPostLen ——获取文件指定位置 指定长度的数据GetContnet —— 读取文件数据SetContent ——…

在 Linux 中重命名文件和目录

目录 前言 使用 mv 命令重命名文件和目录 通过组合 mv、find 和 exec 命令重命名与某个模式匹配的多个文件 使用 rename 命令轻松重命名多个文件 总结 前言 在这篇基本命令行教程中&#xff0c;你将学习在 Linux 终端重命名文件和目录的各种方法。 如何在 Linux 终端中重命…

Sublime Text 3 安装离线插件 anaconda

1 下载 Sublime Text 3 免安装版 Download - Sublime Text 2 下载 Package Control&#xff0c;放到 Sublime Text Build 3211\Data\Installed Packages 目录下。 Installation - Package Control 3 页面搜索 anaconda anaconda - Search - Package Control Anaconda - Pac…

彩纸屋在线少儿编程源码/scratch在线编程系统/培训管理系统源码/在线培训系统源码PHP

源码简介&#xff1a; 彩纸屋在线少儿编程源码&#xff0c;它是scratch在线编程系统&#xff0c;作为培训管理系统源码/在线培训系统源码&#xff0c;采用PHP源码。 彩纸屋是全国首家提供scratch开源定制和少儿编程培训管理系统源代码的服务商&#xff0c;彩纸屋提供的scratc…

WebGL/threeJS面试题扫描与总结

什么是 WebGL&#xff1f;什么是 Three.js&#xff1f;请解释three.js中的WebGL和Canvas的区别&#xff1f; WebGL(全写Web Graphics Library)是一种3D绘图协议&#xff0c;这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起&#xff0c;通过增加OpenGL ES 2.0的一个…

WordPress安装AWS插件实现文本转语音功能

适用于 WordPress 的 AWS 插件示例演示了内容创建者如何轻松地为所有书面内容添加文本转语音功能。随着语音搜索的不断增加&#xff0c;以音频格式提供更多网站内容变得至关重要。通过添加语音功能&#xff0c;网站访客可以通过在线音频播放器和播客应用程序等新渠道使用您的内…

单调栈 模板

class Solution { public: //从后往前的方法 vector<int> dailyTemperatures(vector<int>& temperatures) {int n temperatures.size();vector<int> ans(n);//创建一个大小为n的数组stack<int> st;//这个时候栈中没有任何元素for(int i n-1;i &g…

4面试题--数据库(mysql)

执⾏⼀条 select / update 语句&#xff0c;在 MySQL 中发⽣了什么&#xff1f; Server 层负责建⽴连接、分析和执⾏ SQL。MySQL ⼤多数的核⼼功能模块都在这实现&#xff0c;主要包括 连接器&#xff0c;查询缓存&#xff08;8.0版本去除&#xff0c;因为每次更新将会清空该…

使用 STM32 读取和解析 NTC 热敏电阻的数值

本文介绍了如何利用 STM32 微控制器读取和解析 NTC&#xff08;Negative Temperature Coefficient&#xff09;热敏电阻的数值。首先&#xff0c;我们将简要介绍 NTC 热敏电阻的原理和特性。接下来&#xff0c;我们将详细讨论如何设计电路连接和采用合适的 STM32 外设进行数值读…

如何在GO中写出准确的基准测试

一般来说&#xff0c;我们不应该对性能进行猜测。在编写优化时&#xff0c;会有许多因素可能起作用&#xff0c;即使我们对结果有很强的看法&#xff0c;测试它们很少是一个坏主意。然而&#xff0c;编写基准测试并不简单。很容易编写不准确的基准测试&#xff0c;并且基于这些…

从0到0.01入门 Webpack| 008.精选 Webpack面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

机器学习算法——主成分分析(PCA)

目录 1. 主体思想2. 算法流程3. 代码实践 1. 主体思想 主成分分析&#xff08;Principal Component Analysis&#xff09;常用于实现数据降维&#xff0c;它通过线性变换将高维数据映射到低维空间&#xff0c;使得映射后的数据具有最大的方差。主成分可以理解成数据集中的特征…

JDK源码系列:StringBuffer与StringBuilder对比

一、源码分析StringBuffer与StringBuilder的区别 1、StringBuffer是多线程安全的&#xff0c;StringBuilder是多线程不安全的 多线程安全指的是 多个线程同时对一个对象进行append 等操作&#xff0c;不会出现覆盖、丢失的情况。 看下StringBuffer是如何做到多线程安全的&#…

思维模型 波纹效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。小变化&#xff0c;大影响。 1 波纹效应的应用 1.1 波纹效应在市场中的应用 2008 年&#xff0c;美国金融危机爆发&#xff0c;导致全球经济陷入衰退。这场危机的起因是美国房地产市场的崩…

一篇文章完成Hbase入门

文章目录 一、简介1、数据模型结构2、物理存储结构3、数据模型4、基本架构 二、安装1、下载解压安装包2、修改配置文件3、启动服务(单机、集群)4、配置高可用(HA) 三、命令行操作1、建表2、新增/更新数据3、查看表数据4、删除数据5、修改默认保存的数据版本 四、架构1、RegionS…

在 STM32 上实现温度补偿和校正

本文介绍了如何在 STM32 微控制器上实现温度补偿和校正&#xff0c;以提高温度传感器的测量精度。首先&#xff0c;我们将简要介绍温度补偿和校正的原理和目的。然后&#xff0c;我们将详细讨论在 STM32 上实现温度补偿和校正的步骤和方法。同时&#xff0c;提供了一个简单的示…