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

随机推荐

RedHat6.2系统安装ipvsadm+keepalived
一.安装IPVS 软件包下载: 链接:https://pan.baidu.com/s/1zNgPtALbdBTC1H6e0IaZPw 提取码:xm7t 1.检查内核模块,看一下ip_vs 是否被加载 ...
局域网 ARP 欺骗原理详解
局域网 ARP 欺骗原理详解 ARP 欺骗是一种以 ARP 地址解析协议为基础的一种网络攻击方式, 那么什么是 ARP 地址解析协议: 首先我们要知道, 一台电脑主机要把以太网数据帧发送到同一局域网的 ...
flink⼿手动维护kafka偏移量量
flink对接kafka,官方模式方式是自动维护偏移量但并没有考虑到flink消费kafka过程中,如果出现进程中断后的事情! 如果此时,进程中段: 1:数据可能丢失从获取了了数据,但是在执⾏行行 ...
完美解决前端跨域之 easyXDM 的使用和解析
前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景因个别网络运营商存在 HTTP ...
IntelliJ IDEA 常用快捷键整理
1. -----------自动代码-------- 常用的有fori/sout/psvm+Tab即可生成循环.System.out.main方法等boilerplate样板代码例如要输入for( ...
js创建对象的6种方式总结
1.new 操作符 + Object 创建对象 var person = new Object(); person.name = "lisi"; person.age = 21; ...
选题 Scrum立会报告+燃尽图 05
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8749 一.小组情况组长:贺敬文组员:彭思雨王志文位军营杨萍队名:胜 ...
leetcode-easy-listnode-88 Merge Sorted Array-NO
mycode 不会........... 参考思路:从后往前计算,这样不会覆盖nums1中的有效值由于 You may assume that nums1 has enough space (si ...
查看Linux基本系统信息
#! /bin/bash #The scripts will return the system infomation #return hostname and version infomation ...
track-by的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

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