jQuery事件

jquery是为事件处理而设计的

什么是事件?

页面对不同访问者的相应叫做事件。

事件处理程序指的是html中发生某些事件所调用的方法

实例:

```
在元素上移动鼠标
```
```
选取单选按钮
```
```
点击元素
```

触发:产生事件的过程，比如点击按钮

常见的dom事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

jQuery中事件以及语法

在jquery中，大多数dom事件都有一个等效的方法

页面中指定一个点击事件

$("p").click();//指定一个点击事件

//定义触发后的事件

$("p").click(

    function(){

        //动作触发后执行的代码

    }

)

常见jQuery中事件以及方法

$(document).ready()

$(doucument).ready()方法允许我们在文档完全加载后执行函数)

click()

click()方法是当按钮点击事件被触发会调用的一个函数，该函数在用户点击html元素的时候执行

$("p").click(function(){

    $(this).hide();

})

dbclick()

当双击元素时候，会发生dbclick()事件。

dbclick()方法触发dbclick事件，或者规定发生dbclick事件运行时的函数

$("p").dbclick(function(){

    $(this).hide();)

})

mouseenter()

当鼠标穿过元素时候会触发mouseenter事件

mouseeneter()方法触发mouseenter事件

$("#p1").mouseenter(function()

{

    alert("鼠标移动到id="p1"上了")；

})

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){ alert("鼠标在该段落上按下！"); });

hover()

hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(

    function(){

        alert("你进入了 p1!");

    }

    ,

    function()

    {

        alert("拜拜! 现在你离开了 p1!");

    } );

注意传入两个函数，移入会触发第一个函数，移出会触发第二个函数

focus()

当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){ $(this).css("background-color","#cccccc"); });

blur()

当元素失去焦点时，发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){ $(this).css("background-color","#ffffff"); });

Jquery 隐藏/显示



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function () {

$(".ex .hide").click(function () {

$(this).parents(".ex").hide("slow");

});

});

</script>

<style>

div.ex {

background-color: aquamarine;

padding: 7px;

border: solid 1px #c3c3c3;

}

</style>

</head>

<body>

<h3>模块1</h3>

<div class="ex">

<button class="hide">点我隐藏</button>

<p>姓名:小明</p><br>

学校:希望小学

</div>

<h3>模块2</h3>

<div class="ex">

<button class="hide">点我隐藏</button>

<p>姓名:小李</p><br>

学校:皮皮小学

</div>

</body>

</html>

jquery的hide()和show()



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

});

</script>

</head>

<body>

<p>如果点击消失我就消失，如果点击出现我就出现</p>

<button id="hide">隐藏</button>

<button id="show">出现</button>

</body>

</html>

语法

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed参数隐藏/显示的速度，可以取"slow"或者"fast"或者毫秒

callback参数是隐藏或者显示完成后指向的函数名称

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide(1000);

  });

});

</script>

</head>

<body>

<button>隐藏</button>

<p>这是个段落，内容比较少。</p>

<p>这是另外一个小段落</p>

</body>

</html>

关于回调函数callback()



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$(".hidebtn").click(function(){

$("div").hide(1000,function(){

alert("Hide 函数已经完成了!");

})

});

});

</script>

<style>

div{

width: 130px;

height:50px;

padding: 15px;

margin: 15px;

background-color: green;

}

</style>

</head>

<body>

<div>

隐藏回调函数

</div>

<button class="hidebtn">

隐藏

</button>

</body>

</html>

jquery toggle()

通过jquery，您可以使用toggle()方法来切换hide()和show()方法。显示被隐藏的元素，并隐藏已经显示元素。



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").toggle();

})

});

</script>

</head>

<body>

<button>隐藏/显示</button>

<p>这是一个文本段落。</p>

<p>这是另外一个文本段落。</p>

</body>

</html>

调用方法$(selector).toggle(speed,callback)

speed规定了隐藏/或者出现的速度

callback规定了隐藏/出现后调用的函数

淡入淡出方法

fadein()方法

用于淡入已经隐藏的元素

语法$(selector).fadein(speed,callback)
speed规定淡入的时长
callback()为淡入完成之后已经隐藏的元素

<!-- 淡入效果 -->

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

});

</script>

</head>

<body>

<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>

<button>点击淡入 div 元素。</button>

<br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>

<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>

<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>

</html>

fadeout方法

用于隐藏淡出可见的元素

语法

初步学习jquery学习笔记（二）的更多相关文章

初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
初步学习jquery学习笔记（六）
jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...
初步学习jquery学习笔记（五）
jquery学习笔记五 jquery遍历什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止标签树 <div> <ul> <li> <sp ...
初步学习jquery学习笔记（一）
什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...
初步学习jquery学习笔记（四）
Jquery HTML Jquery 捕获内容什么是dom? DOM = Document Object Model(文档对象模型) 获取内容 text()获取所选元素的文本内容 html()获取所 ...
STM32学习及应用笔记二：一次运算符优先级造成的错误
本人在最近一个项目的开发中,出现一个应为疏忽运算符优先级造成的问题,检查了很久才发现问题,所以觉得运算符的优先级问题还是有必要再研究一下.具体的问题是这样的,我采集了传感器的原始数据,然后会对数据进行 ...
Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
jquery基础笔记二
动态创建元素关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...
【jquery mobile笔记二】jquery mobile调用豆瓣api示例
页面主要代码如下 <div data-role="page" id="page1"> <div data-role="hea ...

随机推荐

head first 设计模式笔记7-适配器模式与外观模式
适配器模式:将一个类的接口,转换成客户期望的另一个接口.适配器让原本接口不兼容的类可以合作无间. 这个模式可以通过创建适配器进行接口转换,让不兼容的接口变成兼容.这可以让客户从实现的接口解耦.如果在一 ...
HGOI20190812 省常中互测5
Task 1 辩论有N 个参加辩论的候选人,每个人对这两个议题都有明确的态度,支持或反对.作为组织者,小D 认真研究了每个候选人,并给每个人评估了一个非负的活跃度,他想让活跃度之和尽可能大.选出的候 ...
（Java多线程系列一）快速入门
Java多线程快速入门 1.线程和进程的区别进程是所有线程的集合,每一个线程是进程的一条执行路径. 2.多线程的应用场景多线程主要体现在提高程序的效率,比如迅雷多线程下载,多线程分批发送短信等. ...
JavaWeb-SpringBoot_使用H2数据库实现用户注册登录
使用Gradle编译项目传送门前端资源同:使用MySQL数据库实现用户管理_demo 传送门 H2:SpringBoot内置持久化数据库使用H2数据库实现用户注册登录用户可以在index.h ...
sqli-labs(41) and 两php函数的讲解
0X01 构造闭合发现不需要闭合直接构造 id=- union ,database(), 成功注入 0X02 堆叠注入同道理一样的这里我们来了解一下这个函数 mysqli_multi_qu ...
Xcode 4.1实用小工具：模拟网络连接和带宽
暂无评论适用于Mac OS X Lion的开发套件Xcode 4.1中,有个新鲜的小工具叫做Network Link Conditioner(网络连接调节器),是一款具有高度可定制性的辅助工具,让用 ...
MYSQL中唯一约束和唯一索引的区别
1.唯一约束和唯一索引,都可以实现列数据的唯一,列值可以有null.2.创建唯一约束,会自动创建一个同名的唯一索引,该索引不能单独删除,删除约束会自动删除索引.唯一约束是通过唯一索引来实现数据的唯一. ...
将文件夹上传到FTP服务器，遍历上传，，，文件夹不能直接上传到FTP服务器上。。。
<? $ftp_ip = "FTP"; $ftp_user = "user"; $ftp_pwd = "password"; $con ...
一、基础篇--1.1Java基础-MVC设计思想
MVC简介: MVC(Model View Controller) 是模型(model)-视图(view)-控制器(controller)的缩写.一种软件设计典范,用一种业务逻辑.数据.界面显示分离的 ...
vue组件化初体验全局组件和局部组件
vue组件化初体验全局组件和局部组件 vue组件化全局组件局部组件关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

初步学习jquery学习笔记（二）