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 ...

随机推荐

JS如何设置和获取盒模型对应的宽和高
㈠方式一:通过DOM节点的 style 样式获取 dom.style.width/height 只能获取使用内联样式的元素的宽和高. <!DOCTYPE html> <html ...
Angular 主从组件
此刻,HeroesComponent 同时显示了英雄列表和所选英雄的详情. 把所有特性都放在同一个组件中,将会使应用“长大”后变得不可维护. 你要把大型组件拆分成小一点的子组件,每个子组件都要集中精力 ...
JDK_API剖析之java.io包
Java的核心库java.io提供了全面的IO接口.包括:文件读写.标准设备输出等.Java中IO是以流为基础进行输入输出的,所有数据被串行化写入输出流,或者从输入流读入. 一.接口 1.Closea ...
redhat6.5 安装oracle11G
一.安装依赖包下面是Oracle数据库需要依赖的软件,依次执行下面命令,不存在则安装. yum install binutils yum install elfutils-libelf yum in ...
(转载)java高并发：CAS无锁原理及广泛应用
java高并发:CAS无锁原理及广泛应用版权声明:本文为博主原创文章,未经博主允许不得转载,转载请注明出处. 博主博客地址是 http://blog.csdn.net/liubenlong007 ...
AcWing：139. 回文子串的最大长度（字符串Hash + 前缀和 + 后缀和 + 二分）
如果一个字符串正着读和倒着读是一样的,则称它是回文的. 给定一个长度为N的字符串S,求他的最长回文子串的长度是多少. 输入格式输入将包含最多30个测试用例,每个测试用例占一行,以最多1000000个 ...
Android_(服务)Vibrator振动器
Vibrator振动器是Android给我们提供的用于机身震动的一个服务,例如当收到推送消息的时候我们可以设置震动提醒,也可以运用到游戏当中增强玩家互动性运行截图: 程序结构 <?xml ve ...
应对高并发场景的redis加锁技巧
// 获取锁getLock() { // 是否有正在执行的线程 boolean hasLock = false; try { hasLock = redisClient ...
python3笔记十八：python列表元组字典集合文件操作
一:学习内容列表元组字典集合文件操作二:列表元组字典集合文件操作代码: import pickle #数据持久性模块 #封装的方法def OptionData(data,path): # ...
ES6 正则的扩展（待细读）
1.RegExp构造函数在 ES5 中,RegExp构造函数的参数有两种情况. a.参数是字符串,这时第二个参数表示正则表达式的修饰符(flag) var regex = new RegExp('x ...

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