jquery事件与绑定事件详细说明-js教程-PHP中文网

首页

web前端

js教程

jquery事件与绑定事件详细说明

小云云

Jan 22, 2018 pm 01:39 PM

jquery 事件详细

jquery事件与绑定事件都是很重要的知识，本文主要介绍了jquery事件与绑定事件的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助到大家。

1.首先,我们来看一下经常使用的添加事件的方式:

<input type="button" id="btn" value="click me!" onclick="shao();" />
<script type="text/javascript">
 function shao() {
  alert("msg is showing!");
 }
</script>

登录后复制

我们最常用的是为元素添加onclick元素属性的方式来添加事件

这种方法的弊端是：

只能为一个事件处理函数，在事件处理函数方法中，获取事件对象的方式不同.

jQuery中的事件

ready事件：

当页面加载完成后，来执行function：

<script>
 $(document).ready(function(e){
  alert(document.getElementById("aa").innerHTML);
  //若是要写function方法，不可以在里面写
 })
 //要在外面写
</script>

登录后复制

这样写在哪里都可以调用到这个方法；

鼠标事件：

<script>
$("#aa").click(function(){
 alert("点击事件");
})
$("#aa").dblclick(function(){
 alert("双击事件");
})
$("#aa").mouseover(function(){
 alert("鼠标移上")
});
$("#aa").mouseout(function(){
 alert("鼠标离开");
})
$("#aa").mousemove(function(){
 alert("鼠标移动");
})
$("#aa").mouseup(function(){
 alert("鼠标抬起");
})
$("#aa").mousedown(function(){
 alert("鼠标按下");
})
键盘按键按下:给id加没有作用,需要给整个页面加所以用$(document)
$(document).KeyEvent(function(){
 alert("鼠标离开");
})
</script>

登录后复制

表单元素事件：

<script>
$("#shao").focus(function(){
 alert("获得焦点");
})
$("#shao").blur(function(){
 alert("失去焦点");
})
$("#shao").change(function(){
 alert("值发生变化，change事件");
})
$("#shao").keydown(function(){
 alert("键盘按下");
})
</script>

登录后复制

2.绑定事件（挂事件）：

可以动态的改变按钮的事件；

什么是动态绑定？

动态绑定是指动态添加的DOM节点或者html元素，他们最开始时运行的时候是不存在的。如果要给这些动态加入的节点增加事件，就必须要用jquery的on方法来绑定事件。

bind()向匹配元素添加一个或多个事件处理器。

使用方式：

$(selector).bind(event,data,function)

注：bind()函数只能针对已经存在的元素进行事件的设置

代码：首先写两个按钮：

<body>
  <p id="aa" style="width: 100px; height: 100px; background-color: blueviolet;">hello</p>
  <!--<input type="text" id="shao" />-->
<input type="button" id="btn1" value="挂事件" />
<input type="button" id="btn2" value="移除事件" />
 </body>

登录后复制

首先操作点击挂上事件：

<script>
//挂事件，
$("#btn1").click(function(){
 //点击挂事件，给p绑定一个事件：
 $("#aa").bind("click",function(){
 //bind绑定事件
  alert("点击");
 });
 //括号里两个参数，第一个是事件类型（事件名称），第二个参数是要执行的代码
})
</script>

登录后复制

这样的话点击挂事件：

移除事件的按钮：

<script>
//移除事件；
$("#aa").click(function(){
 //点击移除事件；把p里面的事件移除掉
 $("#aa").unbind("click");
 //unbind移除绑定，填一个参数，要移除哪个事件
})
</script>

登录后复制

点击移除，取消aa得点击事件

3.事件数据

一般的事件包含事件源跟时间数据：

事件数据：出发这个时间，会传过来那些数据

js简化，可以不写事件源，因为可以取到

4.JSON语法：

JSON的结构：

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。

（1）对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。

（2）数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。

经过对象、数组2种结构就可以组合成复杂的数据结构了。

json是一种轻量级的数据交换格式

全拼：

JavaScript Object Notation

定义语法：

var j = {
"one":"111111",
"two":"22222"
};

登录后复制

取值方式：

取索引：

//数组的取值方式：
alert(j["one"]);//直接取索引的方法

登录后复制

点语法：

//点语法：
alert(j.one);

登录后复制

JSON也可以寸二维数组：

var j = {
"one":"111111",
"two":"22222",
"three":{"aa":"33333"},
};
//数组的取值方式：
//alert(j["one"]);//直接取索引的方法
//点语法：
alert(j.one);
alert(j.three.aa);

登录后复制

遍历JSON数据：

//遍历
for(var v in j)
{
 //定义一个变量v，把j拿到v里面，关键字不是”as“了，是”in“，
 alert(v);
// 这样便利的是索引
 alert(j[v]);
// 这样是根据索引来取值
}

登录后复制

json不具有长度的属性，所以for循环不适应于json

但是for-in同样适应于数组

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7549

CakePHP 教程

1382

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

jQuery引用方法详解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法详解：快速上手指南jQuery是一个流行的JavaScript库，被广泛用于网站开发中，它简化了JavaScript编程，并为开发者提供了丰富的功能和特性。本文将详细介绍jQuery的引用方法，并提供具体的代码示例，帮助读者快速上手。引入jQuery首先，我们需要在HTML文件中引入jQuery库。可以通过CDN链接的方式引入，也可以下载

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

jQuery如何移除元素的height属性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

如何判断jQuery元素是否具有特定属性？ Feb 29, 2024 am 09:03 AM

如何判断jQuery元素是否具有特定属性？在使用jQuery操作DOM元素时，经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下，我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性，并附上具体的代码示例。方法一：使用attr()方法和typeof操作符//判断元素是否具有特定属

了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s

如何使用 PHP 构建基于事件的应用程序 May 04, 2024 pm 02:24 PM

在PHP中构建基于事件的应用程序的方法包括：使用EventSourceAPI创建事件源，并在客户端使用EventSource对象监听事件。使用服务器发送的事件(SSE)发送事件，并在客户端使用XMLHttpRequest对象监听事件。一个实用的例子是在电子商务网站中使用EventSource实时更新库存计数，在服务器端通过随机更改库存并发送更新来实现，客户端则通过EventSource监听库存更新并实时显示。

See all articles

jquery事件与绑定事件详细说明

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题