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. 实体字符转换,同样变量密码加盐MD5后生成的加密字符串不同解决办法 (原)

    我是首次登录系统自动生成一个密码,格式大概是:   abcd1234&  这种格式 , 比如加密规则就是一个 MD5() 然后,首次账号密码登录,输入密码 abcd1234&,一直提示 ...

  2. Android_(游戏)打飞机01：前言

    (游戏)打飞机01:前言 传送门 (游戏)打飞机02:游戏背景滚动 传送门 (游戏)打飞机03:控制玩家飞机 传送门 (游戏)打飞机04:绘画敌机.添加子弹   传送门 (游戏)打飞机05:处理子弹, ...

  3. [CSP-S模拟测试]:小盆友的游戏（数学 or 找规律）

    题目传送门(内部题110) 输入格式 第一行一个整数$N$,表示小盆友的个数. 第二行$N$个整数$A_i$,如果$A_i=-1$表示$i$目前是自由身,否则$i$是$A_i$的跟班. 输出格式 一个 ...

  4. 「WC 2007」剪刀石头布

    题目链接 戳我 \(Solution\) 直接求很明显不太好求,于是考虑不构成剪刀石头布的情况. 我们现在假设一个人\(i\)赢了\(x\)场,那么就会有\(\frac{x*(x-1)}{2}\) 我 ...

  5. C++入门经典-例6.1-一维数组元素

    1:代码如下: // 6.1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...

  6. IDEA设置注释模板

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  7. 套接字之sendto系统调用

    sendto系统调用用于向指定的目的地址发送数据,其系统调用的流程比较容易理解,如下面所示,其主要完成 (1)将用户数据组织成msghdr,(2)而后调用socket操作的sendmsg:ipv4对应 ...

  8. python dict字典添加元素

    已存在的字典进行赋值操作 可为该字典添加新元素例子:a = {‘age’: 23, ‘name’: ‘lala}a[school] = ‘nanhaizhongxue’print a>>& ...

  9. MySQL5.7忘记root密码-手动修改密码教程

    https://blog.csdn.net/greywolf0824/article/details/80215199

  10. 验证TXT解析的正确性

    需要用到TXT解析,不同于CNAME和A解析,可以用PING命令验证,要验证TXT解析需要用到如下命令 nslookup -q=TXT txtdemo.lei.cool 8.8.8.8 输出内容如下 ...