首页 > 其他分享 >Jquery事件的使用与介绍。

Jquery事件的使用与介绍。

时间:2022-08-29 10:13:24浏览次数:96  
标签:Jquery 触发 函数 元素 介绍 HTML 事件 方法

jQuery 是为响应 HTML 页面中的事件而定制的。

1.什么是事件?

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例:

  • 在元素上移动鼠标
  • 选取单选按钮
  • 点击元素

在事件中经常使用术语"触发"(或"激发")例如:"当您按下按键时触发 keypress 事件"。

常见 DOM 事件:

鼠标事件键盘事件表单事件文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件: $("p").click();

下一步是定义触发事件时应该发生什么,必须向事件传递函数:

$("p").click(function(){
  // 动作触发后执行的代码!!
});

2.常用的 jQuery 事件方法:

$(document).ready( ) ——该方法允许我们在文档完全加载完后执行函数。

例如:当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素      注意:理解加色代码的结构层次

<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(  function(){

$("p").click(function(){
$(this).hide();
});
} );
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

 

鼠标事件:

1)click( ) 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户单击 HTML 元素时执行。

2)dblclick() 方法将事件处理程序函数附加到HTML元素。

该函数在用户双击HTML元素时执行。

3)mouseenter() 方法将事件处理程序函数附加到HTML元素。

当鼠标指针进入 HTML 元素时,将执行该函数。

4)mouseleave() 方法将事件处理程序函数附加到HTML元素。

当鼠标指针离开HTML元素时,将执行该函数。

5)hover() 方法包含两个函数,是 mouseenter() 和 mouseleave() 方法的组合。

第一个函数在鼠标进入 HTML 元素时执行,第二个函数在鼠标离开 HTML 元素时执行

.........

 

键盘事件:

  1. keydown - 键按下的过程:

    当键盘键被按下时发生 keydown 事件。(例子:jquery 代码测试 - W3schools 在线编辑器

    keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。

  2. keypress - 键被按下:  (例子:jquery 代码测试 - W3schools 在线编辑器

    keypress() 方法触发 keypress 事件,或规定当发生 keypress 事件时运行的函数。

    keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。

    然而,keypress 事件不会触发所有的键(比如 ALT、CTRL、SHIFT、ESC)。

  3. keyup - 键被松开:  (例子:jquery 代码测试 - W3schools 在线编辑器

    当键盘键被松开时发生 keyup 事件。

    keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。

 .........

表单事件

1.blur:当元素失去焦点时发生 blur 事件。

blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。

提示: 该方法常与 focus() 方法一起使用。

2.focus:当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。

focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。

提示: 该方法通常与 blur() 方法一起使用。

3.submit:当提交表单时,会发生 submit 事件。

该事件只适用于 <form> 元素。

submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。

4.change:当元素的值改变时发生 change 事件(仅适用于表单字段)。

change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。

注释: 当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发生。

 ...........  

 

标签:Jquery,触发,函数,元素,介绍,HTML,事件,方法
From: https://www.cnblogs.com/zfj0318/p/16627814.html

相关文章

  • Bootstrap基础介绍一
    前端框架Bootstrap该框架已经帮你写好了很多页面样式,你如果需要使用,只需要下载它对应文件,之后直接cv拷贝即可在使用Bootstrap的时候所有的页面样式都只需要你通过class来......
  • vue属性、监听、事件、绑定、渲染(二)
    一、计算属性和监听器1、计算属性data中的属性可以通过声明获得,也可以通过在computed通过计算获得特性:计算属性所依赖的属性值发生变化会影响计算属性的值同时发生变......
  • 操作系统启动流程和BIOS介绍
    1.BIOS介绍我们刚刚买回来的电脑裸机是可以直接启动的,这是由于生产厂商在电脑出厂的时候就在电脑里编写了一个只可读的系统功能BIOS,该系统被写入了ROM(只读内存中)BIOS是一......
  • Python3项目初始化10-->JS基础、dom、jquery、database
    29、JS基础var定义变量数字字符串和Python一样布尔值true和false首字母不大写逻辑判断if(){}elseif(){}else{}借助浏览器console执行操作,见截图。   ......
  • jQuery基础介绍二
    jQuery练习题js$('#i1')r.fn.init [div#i1.container]$('h2')r.fn.init [h2,prevObject:r.fn.init(1)]$('input')r.fn.init(9) [input#exampleInputEmail1.f......
  • 数据结构和算法的介绍
    声明:此系列以尚硅谷数据结构与算法(Java数据结构与算法)视频为主,包括其他大佬的文章(相关文中有引用注明来源)在此声明一次,后续文档中不再声明。目录数据结构和算法的关系算......
  • jQuery实现下滚不显示,上滚出现的粘性导航
    代码/粘性导航varbasic=80;$(window).scroll(function(){vartop=$(window).scrollTop();if(top>basic){$('header......
  • php解析html类库simple_html_dom(详细介绍)
    php解析html类库simple_html_dom(详细介绍)_php技巧_脚本之家 https://www.jb51.net/article/39526.htm下载地址:https://github.com/samacs/simple_html_dom解析器不仅......
  • jQuery实现textarea高度自适应
    js代码$.fn.autoHeight=function(){functionautoHeight(elem){elem.style.height='auto';elem.scrollTop=0;//防抖动......
  • JavaScript基础介绍三(事件)
    原生js事件绑定我们直接写几个案例,看懂即可开关灯案例变色<script>letbtnEle=document.getElementById('d2')letdivEle=document.getElementById('......