详解jQuery的核心函数和事件处理


Posted in jQuery onFebruary 18, 2022

事件

页面载入 

1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

$(document).ready(function(){
  // 在这里写你的代码...
});
// 下面是简写
$(function($) {
  // 你可以在这里继续使用$作为别名...
});

2.事件处理 on(events,fn)在选择元素上绑定一个或多个事件的事件处理函数

// 给p标签添加点击事件监听
$("p").on("click", function(){
	alert( $(this).text() );
});
// 第二种写法 等效于上面
$("p").click(function(){
	alert( $(this).text() );
});

3.off(events,[fn])在选择元素上移除一个或多个事件的事件处理函数

// 移除p标签绑定的所有事件监听
$("p").off()
// 移除p标签绑定的click事件监听
$("p").off( "click")

4.bind(events,fn)为每个匹配元素的特定事件绑定事件处理函数

// 移除p标签绑定的所有事件监听
$("p").bind("click", function(){
  alert( $(this).text() );
});
// 同时绑定多个事件类型
$('#foo').bind('mouseenter mouseleave', function() {
  alert();
});

5.unbind(type,fn]])bind()的反向操作,从每一个匹配的元素中删除绑定的事件

// 把所有段落的所有事件取消绑定
$("p").unbind()
// 将段落的click事件取消绑定
$("p").unbind( "click" )

6.one(type,[data],fn)为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数

// 当所有段落被第一次点击的时候,显示所有其文本
$("p").one("click", function(){
  alert( $(this).text() );
});

事件委派 

1.delegate(selector,[type],[data],fn)指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

<div style="background-color:red">
      <p>这是一个段落。</p>
      <button>请点击这里</button>
  </div>
// 当点击button时,隐藏或显示 p 元素
  $("div").delegate("button", "click", function () {
      $("p").slideToggle();
  });

详解jQuery的核心函数和事件处理

2.undelegate([selector,[type],fn])删除由 delegate() 方法添加的一个或多个事件处理程序

// 从p元素删除由 delegate() 方法添加的所有事件处理器
$("p").undelegate();
// 从p元素删除由 delegate() 方法添加的所有click事件处理器
$("p").undelegate( "click" )

事件切换 

1.hover([over,]out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

// 鼠标悬停的表格加上特定的类
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

事件 

1.blur([[data],fn])当元素失去焦点时触发 blur 事件

// 鼠标悬停的表格加上特定的类
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

2.change([[data],fn])当元素的值发生改变时,会发生 change 事件

// 触发被选元素的 change 事件
$(selector).change();

3.click([[data],fn])触发每一个匹配元素的click事件

// 触发页面内所有段落的点击事件
$("p").click();

4.dblclick([[data],fn])当双击元素时,会发生 dblclick 事件

// 给页面上每个段落的双击事件绑上 "Hello World!" 警告框
$("p").dblclick( function () { alert("Hello World!"); });

5.error([[data],fn])当元素遇到错误(没有正确载入)时,发生 error 事件

// 在服务器端记录JavaScript错误日志:
$(window).error(function(msg, url, line){
  jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});

6.focus([[data],fn])当元素获得焦点时,触发 focus 事件

// 当页面加载后将 id 为 'login' 的元素设置焦点:
$(document).ready(function(){
  $("#login").focus();
});

7.focusin([data],fn)当元素获得焦点时,触发 focusin 事件

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>
// 获得焦点后会触发动画
$("p").focusin(function() {
	$(this).find("span").css('display','inline').fadeOut(1000);
});

8.focusout([data],fn)当元素失去焦点时触发 focusout 事件

// 获得焦点后会触发动画
$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

9.keydown([[data],fn])当键盘或按钮被按下时,发生 keydown 事件

// 在页面内对键盘按键做出回应,可以使用如下代码
$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // ...
  }
});

10.keypress([[data],fn])当键盘或按钮被按下时,发生 keypress 事件

// 计算在输入域中的按键次数
$("input").keydown(function(){
  $("span").text(i+=1);
});

11.keyup([[data],fn])当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上

// 当按下按键时,改变文本域的颜色
$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

12.mousedown([[data],fn])当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件

// 当按下鼠标按钮时,隐藏或显示元素
$("button").mousedown(function(){
  $("p").slideToggle();
});

13.mouseenter([[data],fn])当鼠标指针穿过元素时,会发生 mouseenter 事件

// 当鼠标指针进入(穿过)元素时,改变元素的背景色
$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

14.mouseleave([[data],fn])当鼠标指针离开元素时,会发生 mouseleave 事件

// 当鼠标指针离开元素时,改变元素的背景色$("p").mouseleave(function(){  $("p").css("background-color","#E9E9E4");});// 当鼠标指针离开元素时,改变元素的背景色
$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

15.mousemove([[data],fn])当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件

事件坐标

  • event.clientX, event.clientY相对于视口的左上角
  • event.pageX,event.pageY 相对于页面的左上角
  • event.offsetX,event.offsetY 相对于事件元素的左上角
// 获得鼠标指针在页面中的位置
$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

16.mouseout([[data],fn])当鼠标指针从元素上移开时,发生 mouseout 事件

// 当鼠标从元素上移开时,改变元素的背景色:
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

17.mouseover([[data],fn])当鼠标指针位于元素上方时,会发生 mouseover 事件

// 当鼠标指针位于元素上方时时,改变元素的背景色
$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

18.mouseup([[data],fn])当在元素上放松鼠标按钮时,会发生 mouseup 事件

// 当松开鼠标按钮时,隐藏或显示元素
$("button").mouseup(function(){
  $("p").slideToggle();
});

19.resize([[data],fn])当调整浏览器窗口的大小时,发生 resize 事件

// 改变页面窗口的大小时弹出警告窗
$(window).resize(function(){
  alert("Stop it!");
});

20.scroll([[data],fn])当用户滚动指定的元素时,会发生 scroll 事件

// 当页面滚动条变化时,执行的函数:
$(window).scroll( function() { 
 	 alert("Stop it!");
});

21.select([[data],fn])当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件

// 触发所有input元素的select事件:
$("input").select();

22.submit([[data],fn])当提交表单时,会发生 submit 事件

// 提交本页的第一个表单:
$("form:first").submit();
// 阻止表单提交:
$("form").submit( function () {
  return false;
} );

23.unload([[data],fn])在当用户离开页面时,会发生 unload 事件

点击某个离开页面的链接

在地址栏中键入了新的 URL

使用前进或后退按钮

关闭浏览器

重新加载页面

// 页面卸载的时候弹出一个警告框:
$(window).unload( function () { alert("Bye now!"); } );

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

jQuery 相关文章推荐
Jquery获取radio选中的值
May 05 jQuery
jquery replace方法去空格
May 08 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现广告显示和隐藏动画
jQuery ajax - getScript() 方法和getJSON方法
May 14 #jQuery
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
jquery插件实现搜索历史
Apr 24 #jQuery
jquery插件实现图片悬浮
jQuery实现影院选座订座效果
You might like
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
PHP多进程编程实例详解
2017/07/19 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
python使用KNN算法手写体识别
2018/02/01 Python
python随机数分布random均匀分布实例
2019/11/27 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Python 解析xml文件的示例
2020/09/29 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
药品营销策划方案
2014/06/15 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers