初步学习jQuery之事件
事件
页面加载
在DOM中提供了load事件用于页面加载完毕之后执行机制，jQuery提供了ready（）方法实现相似的功能，但是存在以下的区别。
1.DOM中的load事件没有任何的简写形式，但是在jQuery的ready（）方法中提供了简写形式。
2.在HTML页面加载完成以后，load事件才会被触发；而在DOM节点树加载完毕以后，ready（）方法就会被调用。
3.一个HTML页面中只能存在一个load事件，但是可以存在多个ready（）方法。
ready（）方法的语法结构：
1.$(document).ready(function(){});
2.$().ready(function(){});//简写
3.$(function(){});//简写事件绑定
单事件绑定与单事件解绑
单事件绑定
jQuery中提供了bind（）方法完成绑定事件，语法如下
$element.bind(type,data,callback);
type:表示绑定事件的名称，是字符串类型，没有‘on’。
data：作为element.data属性值传递给事件对象的额外数据对象(可选项)。
callback：表示绑定事件的处理函数。
示例代码如下：
<body>
<button id='btn'>按钮</button>
<script>
function click1(){
console .log('this is button,');
}
$('#btn').bind('click',click1);单事件解绑
jQuery中提供了unbind（）方法来解绑事件。具体方法如下：
$element.unbind(type[,data，callback])；
$('#btn').unbind('click');//只传递事件名称，解绑定该事件的所有处理函数。
$('#btn').undind('click'click1);//传递时间名称和指定的处理函数，解绑定该事件的指定处理函数。多事件绑定与解绑
<style>
#title {
width: 100px;
height: 20px;
border: 1px solid black;
}
ul {
list-style: none;
padding: 0;
display: none;
}
li {
width: 100px;
height: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="title">菜单</div>
<ul>
<li>北京</li>
<li>南京</li>
<li>天津</li>
</ul>
<script>
// mouseover表示鼠标悬停在指定元素之上 mouseout表示鼠标从指定元素上移开
//jQuery支持链式操作，多事件绑定时，事件名称之间使用空格分离。
$('#title').bind('mouseover mouseout', function(){
if ($('ul').is(':hidden')) {
$('ul').css('display','block');
} else {
$('ul').css('display','none');
}
});
/*
unbind()方法
1.没有指定任何事件时 - 将指定元素的所有事件全部解绑定
2.指定一个事件名称时 - 将指定元素的指定当个事件解绑定
3.指定多个事件名称时 - 将指定元素的指定多个事件解绑定
*/
$('#title').unbind('mouseover mouseout');事件绑定方法的对比
jQuery中提供多组事件绑定与解绑定的方法
1.bind()与unbind() - jQuery 3.0版本后删除方法
2.on()与off()方法 - jQuery 1.7版本后新增方法
其实bind()与unbind()的底层方法就是on()和off()
3.live()与die() - jQuery 1.7版本后删除方法
作用 - 实现事件委托
4.delegate()与undelegate() - jQuery 1.6版本后新增方法，jQuery
3.0版本后删除方法
作用 - 实现事件委托
5.one() - 为事件绑定一次性的函数
事件切换
hover（）方法
jQuery中提供了hover()方法模拟鼠标悬停事件效果。
$element.hover(over,out);
示例代码如下：
<style>
#title {
width: 100px;
height: 20px;
border: 1px solid black;
}
ul {
list-style: none;
padding: 0;
display: none;
}
li {
width: 100px;
height: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="title">菜单</div>
<ul>
<li>北京</li>
<li>南京</li>
<li>天津</li>
</ul>
<script>
$('#title').hover(function(){
$('ul').css('display','block');
},function(){
$('ul').css('display','none');
});
</script>
</body>事件模拟
jQuery中提供了trigger()方法用于模拟除法匹配元素绑定的事件
$element.trigger(type[,dat]);
<body>
<button id="btn">按钮</button>
<script>
// 绑定事件 - 由用户行为进行触发，调用处理函数
$('#btn').bind('click',function(){
console.log('this is button.');
});
// 模拟用户触发事件
$('#btn').trigger('click');
</script>
</body>初步学习jQuery之事件的更多相关文章
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- 学习jQuery的事件dblclick
Insus.NET一直以来都是asp.net的开发的,少使用javascript.现在学习asp.net mvc了,jQuery是一个必须掌握的客户端语言. 不用急,慢慢来.一步一步.这篇练习jQue ...
- 深入学习jQuery鼠标事件
× 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...
- 初步学习jquery学习笔记（二）
jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...
- 初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- Jquery学习—jquery的事件
1.Jquery事件1:one 1)one() 方法是为所选的元素绑定一个仅出发一次的处理函数,调用格式 one(type,[data],fn) 2)其中参数type是事件类型,即需要触发什么类型的事 ...
- 初步学习jquery学习笔记（一）
什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...
- 初步学习jquery学习笔记（六）
jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...
- 初步学习jquery学习笔记（五）
jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...
随机推荐
- 观察者模式(jdk实现)
1.定义 在对象中定义一对多的依赖,当一个对象改变状态,依赖它的对象会收到通知并更新. 2.实现 (主要通过jdk自己定义的观察者实现) 以气象站通知展示板为例子,当气象站收到的各种参数改变的时候 ...
- 基于3ds Max的游戏建模方案
前言 需求 由于本游戏的设计,需求使用到角色以及场景建模.具体模型的搭建与贴图的设计根据原画进行. 工具 一般在游戏研发中,模型的搭建主要使用以下工具和概念来渲染建模. 3ds Max 3ds Max ...
- 应用安全 - 代码审计 - Python
flask客户端session导致敏感信息泄露 flask验证码绕过漏洞 CodeIgniter 2.1.4 session伪造及对象注入漏洞 沙箱逃逸
- 前端 CSS的选择器 基本选择器 类选择器
类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: & ...
- [Web 前端] 001 html 常用块级标签
目录 1. html "总体框架" 2. 常用的 HTML 块级标签(块元素) 2.1 知识点 2.2 以下 code 均写在 body 体中 2.2.1 标题标签,只有 h1-h ...
- A + B Problem II（1002）
Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...
- WOJ#3836 Sightseeing Trip
描述 给定一张无向图,求图中一个至少包含 3 个点的环,环上的节点不重复,并且环上的边的长度之和最小.该问题称为无向图的最小环问题.在本题中,你需要输出最小环的方案,若最小环不唯一,输出任意一个均可. ...
- python里的排序
本篇文章主要讲: 自定义规则排序 多字段排序 开讲之前,先讲一些简单sorted()或者sort(),两者返回值不同!大家自行学习,不是本文的重点! sorted([5, 2, 3, 1, 4]) # ...
- HDU-1181 变形课(多种方式，好题)
首先想到的是并查集,然后WA...原因在这,我第一次敲的是Find(1) == Find(12)来作为可以成功的条件,实际上这样是不行的,比方说 bell 和 mail实际上是不满足条件的,可以理 ...
- 从安装linux(centos7.6)系统到部署springboot java程序到k8s（大纲）
本文说明从安装linux系统开始,一直到在k8s运行springboot程序全过程 本文假设在自己电脑操作,因此linux系统使用vmware虚拟机,linux发行版使用centos 7.6.1810 ...