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学习笔记（二）的更多相关文章

  1. 初步学习jquery学习笔记（三）

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. 初步学习jquery学习笔记（六）

    jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...

  3. 初步学习jquery学习笔记（五）

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

  4. 初步学习jquery学习笔记（一）

    什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...

  5. 初步学习jquery学习笔记（四）

    Jquery HTML Jquery 捕获内容 什么是dom? DOM = Document Object Model(文档对象模型) 获取内容 text()获取所选元素的文本内容 html()获取所 ...

  6. STM32学习及应用笔记二：一次运算符优先级造成的错误

    本人在最近一个项目的开发中,出现一个应为疏忽运算符优先级造成的问题,检查了很久才发现问题,所以觉得运算符的优先级问题还是有必要再研究一下.具体的问题是这样的,我采集了传感器的原始数据,然后会对数据进行 ...

  7. Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器

    模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...

  8. jquery基础 笔记二

    动态创建元素 关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...

  9. 【jquery mobile笔记二】jquery mobile调用豆瓣api示例

    页面主要代码如下 <div data-role="page" id="page1">     <div data-role="hea ...

随机推荐

  1. Linux iptables 防火墙设置

    1.查看防火墙iptables -L -niptablesb -L -n --line-number  显示规则行号看到 INPUT ACCEPT, FORWARD ACCEPT , OUTPUT A ...

  2. POJ3233 [C - Matrix Power Series] 矩阵乘法

    解题思路 题目里要求\(\sum_{i=1}^kA^i\),我们不妨再加上一个单位矩阵,求\(\sum_{i=0}^kA^i\).然后我们发现这个式子可以写成这样的形式:\(A(A(A...)+E)+ ...

  3. HDU 6155 Subsequence Count (DP、线性代数、线段树)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=6155 题解 DP+线代好题.(考场上过多时间刚前两题,没怎么想这题--) 首先列出一个DP式: 设\( ...

  4. 【转】稳定婚姻问题(Stable Marriage Problem)

    转自http://www.cnblogs.com/drizzlecrj/archive/2008/09/12/1290176.html 稳定婚姻是组合数学里面的一个问题. 问题大概是这样:有一个社团里 ...

  5. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  6. ionic1使用imagepicker在安卓手机上闪退问题

    在上一篇文章中,提到了如何在ionic1中使用imagepicker插件,并且实现该插件显示中文(汉化)问题有兴趣可以看看:ionic1使用ImagePicker插件并且显示中文(汉化) 1.这次要解 ...

  7. hibernate entitymanager的理解

    hibernate EntityManager是围绕提供JPA编程接口的Hibernate Core的一个包装,支持JPA实体实例的生命周期,并允许你用标准的JavaPersistence查询语言编写 ...

  8. 有关sublime的一些使用

    习惯了vs的快捷键,用sublime的时候始终感觉不太跟手. 点击 “首选项”→“按键绑定-默认” 在新的界面中就可以更改你想要的快捷键了. 1.自动格式化对齐: 查找 "command&q ...

  9. openssl生成秘钥对

    openssl genrsa -out pri.pem openssl rsa -in pri.pem -out pub.pem -pubout 这样就生成秘钥对了,其中pri.pem是私钥,pub. ...

  10. RF-创建一个自定义关键字库

    仓库自定义库 这里以Selenium2Library库进行举例说明: 编写一个自定义仓库类(与库文件夹名一致),继承关键字类,指定范围和版本即可. 需要声明__init__. import os fr ...