首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery 教程

什么是事件? 页面对不同访问者的响应叫做事件事件处理程序指的是当 HTML 中发生某些事件所调用的方法。 实例: 元素移动鼠标。...mousedown() 方法触发 mousedown 事件规定当发生 mousedown 事件运行的函数: $("#p1").mousedown(function(){ alert("鼠标该段落按下...mouseup() 方法触发 mouseup 事件规定当发生 mouseup 事件运行的函数: $("#p1").mouseup(function(){ alert("鼠标段落松开。"...当鼠标移动到元素,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素,会触发指定的第二个函数(mouseleave)。...返回指定事件哪个键盘键鼠标按钮被按下 event.metaKey 事件触发 META 键是否被按下 focus() 添加/触发 focus 事件 focusin() 添加事件处理程序到 focusin

17K20

jQuery设计思想

删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档使用。 清空元素内容(但是不删除该元素)使用.empty()。...) .mouseleave() 鼠标离开(离开子元素不触发) .mousemove() 鼠标元素内部移动 .mouseout() 鼠标离开(离开子元素也触发) .mouseover()....select() 用户选中文本框中的内容 .submit() 用户递交表单 .toggle() 根据鼠标点击的次数,依次运行多个函数 .unload() 用户离开页面 以上这些事件...(e) {     alert(e.type); // "click"   }); 这个事件对象有一些很有用的属性和方法: event.pageX 事件发生鼠标距离网页左上角的水平距离...event.pageY 事件发生鼠标距离网页左上角的垂直距离 event.type 事件的类型(比如click) event.which 按下了哪一个键 event.data 事件对象绑定数据

2.2K60
您找到你想要的搜索结果了吗?
是的
没有找到

加点JavaScript魔法

客户端将服务器端返回的响应中的html内容显示弹出窗口中。当用户移开鼠标,弹出窗口将被删除。听起来很简单,对吧?...jQuery JavaScript库作为Bootstrap的依赖项加载,因此我将利用它。当使用jQuery,你可以用$(...)封装来注册一个函数,函数将会在页面加载完毕后运行。...如果在元素集合上调用这个函数,jQuery方便地将事件附加到所有元素。这两个参数是两个函数,分别在用户将鼠标指针移入和移出目标元素时调用对应的函数。...针对弹出行为,你只想鼠标停留在元素一段时间才能激活,以防当鼠标指针短暂通过元素但不停留在元素出现弹出闪烁。由于该事件不支持延迟,因此这是我需要自己实现的另一件事情。...现在剩下的就是完善鼠标移出事件处理程序删除弹出窗口逻辑。 如果用户将鼠标移出目标元素,该处理程序已经具有中止弹出操作的逻辑。

3.9K10

jQuery 事件

keyup focus scroll mouseleave blur unload 事件绑定 文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用on()方法来对被选元素及子元素添加一个多个事件处理程序...提示:如需添加运行一次的事件然后移除,请使用one()方法。...规定当事件发生时运行的函数。 map 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个多个事件,以及当事件发生时运行的函数。...() 阻止事件的默认行为 event.relatedTarget 返回当鼠标移动哪个元素进入退出 event.result 包含由被指定事件触发的事件处理程序返回的最后一个值 event.stopImmediatePropagation...event.timeStamp 返回从 1970 年 1 月 1 日到事件被触发的毫秒数 event.type 返回哪种事件类型被触发 event.which 返回指定事件哪个键盘键鼠标按钮被按下

2.8K70

jquery 使用方法

删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档使用。 清空元素内容(但是不删除该元素)使用.empty()。...如果你懂得Javascript语言的继承原理,那么就能理解工具方法的实质。它是定义jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用。...八、事件操作 jQuery可以对网页元素绑定事件。根据不同的事件运行相应的函数。...,依次运行多个函数 26 .unload() 用户离开页面 以上这些事件jQuery内部,都是.bind()的便捷方式。...event.pageY 事件发生鼠标距离网页左上角的垂直距离 5 event.type 事件的类型(比如click) 7 event.which 按下了哪一个键 9 event.data 事件对象绑定数据

1.6K10

JQuery 入门学习(二)

web前端 Jquery     时隔几天,天气依旧炎热,不过坐在空调房里的我一点也感觉不到~(笑)。我的事也稳步进行着,这个下午继续我一篇的Jquery。    ...我列举一些Jquery中常用的事件及其绑定函数:         click 鼠标点击事件 (最常用,当鼠标点击某对象触发此函数)         change 对象被改变(如input框中写入...load 对象加载完成(如图像被加载完成触发此事件)         error 对象遇到错误 (如图像输入了一个错误的地址,没有成功加载)         mousemove 鼠标移动...(当鼠标移动触发此事件)     上次我举了几个例子,有一个就是点击按钮后“离别歌”出现在页面中,触发的就是click事件。    ...这次试试mousemove事件运行这段代码: </script

1.3K10

JQuery基础

使用大公司CDN好处: 许多用户访问其它站点,已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点,会从缓存中加载jQuery,这样可以有效减少加载时间!...(提交表单),change(元素值(适用于表单字段)发生改变),focus(元素获得焦点),blur(元素失去焦点)事件; 文档/窗口事件:load(元素已加载触发,jQuery1.8中废除。...当鼠标指针移动到元素,会触发第一个函数(mouseenter);当鼠标指针移出这个元素,会触发第二个函数(mouseleave)。...jQuery中将动作/方法链接在一起,因此,相同元素,我们可以一条语句运行多个jQuery方法。...例如:$('p').remove('.test1'); empty():从被选元素中删除子元素(被选元素没有被删除,相当于留了一个外壳) 4.获取/设置css类: addClass():向被选元素中添加一个多个类

4.6K51

JQuery选择器

/javascript”> 引用Jquery的两种方式 jQuery常用的事件: load:当文档加载时运行脚本 blur:当窗口失去焦点时运行脚本 focus:当窗口获得焦点时运行脚本...click:当单击鼠标运行脚本 dblclick:当双击鼠标运行脚本 mousedown:当按下鼠标按钮时运行脚本 mousemove:当鼠标指针移动运行脚本 mouseout:当鼠标指针移出元素时运行脚本...mouseover:当鼠标指针移至元素之上时运行脚本 mouseup:当松开鼠标按钮时运行脚本 abort:当发生中止事件运行脚本 jQuery常用的效果方法 (selector).hide(...(selector).addClass() – 向被选元素添加一个多个类 (selector).removeClass() – 从被选元素删除一个多个类 (selector).toggleClass...() – 对被选元素进行添加/删除类的切换操作 (selector).css() – 设置返回样式属性 jQuery Ajax 操作函数 .ajax() – 执行Ajax异步请求 .get() –

7.4K10

jQuery Cheat—Sheet(jQuery学习笔记)

在下面的实例中,当双击事件某个 元素触发,隐藏当前的元素: $("p").dblclick(function(){ $(this).hide(); }); 鼠标穿过事件鼠标指针穿过元素...; }); 鼠标移入并点击事件鼠标指针移动到元素上方,并按下鼠标按键,会发生 mousedown 事件。 在下面实例中,鼠标移入元素,并点击,弹出“Bye!...; }); 鼠标释放事件 当在元素松开鼠标按钮,会发生 mouseup 事件。 在下面实例中,鼠标点击元素,释放,弹出“Mouse up over p1!”...当鼠标移动到元素,会触发指定的第一个函数(mouseenter,); 当鼠标移出这个元素,会触发指定的第二个函数(mouseleave)。...**Chaining 允许我们一条语句中运行多个 jQuery 方法**(相同的元素) ### jQuery 方法链接 有一种名为链接(chaining)的技术,允许我们相同的元素运行多条 jQuery

16.2K30

JavaScript 学习-35.jQuery 基础语法与事件

> 入口函数 为了防止文档完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。...入口函数: window.onload = function () { // 执行代码 } jQuery 入口函数与 JavaScript 入口函数的区别: jQuery 的入口函数是 html...jQuery 基本语法 通过jQuery 可以对元素查询修改操作,也可以添加事件。...}) }); 鼠标事件 常用的一些鼠标事件 事件 触发时机 mouseenter() 鼠标指针穿过元素 mouseleave() 当鼠标指针离开元素 mousedown...() 当鼠标指针移动到元素上方,并按下鼠标按键 mouseup() 松开鼠标按钮 hover() 光标悬停事件 focus() 获得焦点,发生 focus 事件 blur() 失去焦点,发生 blur

1.9K10

JQuery 入门学习(完结)

f=jquery_hide 运行,可以看到,当鼠标移动到相应的行的时候,该行变色,当鼠标移走时,颜色恢复。 ?    ...td元素就是表格中的一个格子,mouseover事件指“鼠标移动到上面”。也就是说,当用户鼠标移动到每个格子,都会触发这个事件,进而执行函数中的代码。    ...因为我们可以看到,鼠标移动到某一行,只有这一行的颜色会发生变化,我们必须知道鼠标移动到哪一行上了,所以必须获得这个event对象。    ...event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生的毫秒数。 event.type 描述事件的类型。 event.which 指示按了哪个键按钮。    ...大家可以看到,我用到的就是target属性,event.target指的就是触发mouseover事件的DOM元素,在这里就是td。     所以函数中,我们得到了鼠标所在的元素。

93210

【前端】Web前端学习笔记【1】

============================================ 18. jQuery能够绑定的事件主要包括: 鼠标事件 click: 鼠标单击触发; dblclick:鼠标双击触发...; mouseenter:鼠标进入时触发; mouseleave:鼠标移出触发; mousemove:鼠标DOM内部移动触发; hover:鼠标进入和退出触发两个函数,相当于mouseenter...键盘事件 键盘事件仅作用在当前焦点的DOM,通常是和。 keydown:键盘按下触发; keyup:键盘松开触发; keypress:按一次键后触发。...由于IE只支持事件冒泡,所以通过attachEvent()添加事件处理程序都会被添加到冒泡阶段。 IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。...DOM0级事件处理程序会在其所属元素的作用域内运行使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window。

32590

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

而window.onload只能一次 2.3 事件处理和委派【掌握】 on(events,[selector],[data],fn),选择元素绑定一个多个事件事件处理函数。...off(events,[selector],[fn]),选择元素移除一个多个事件事件处理函数。 bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数。...die(type, [fn]),从元素中删除先前用.live()绑定的所有事件 die解绑 2.4 事件切换【了解】 hover([over,]out) 当鼠标移动到一个匹配的元素上面,会触发指定的第一个函数...当鼠标移出这个元素,会触发指定的第二个函数 toggle(fn,fn2,[fn3,fn4,…])用于绑定两个多个事件处理器函数,以响应被选元素的轮流的 click 事件 hover mouseover...某一台计算机计算机组的名称,用于在数据传输标识计算机的电子方位(有时也指地理位置)。

8.2K20

脚本语言知识总结.

浏览器内容运行,无需编译、解释执行动态脚本语言,是一种弱类型语言,所有变量使用var定义。...问题:HTML 元素添加事件, 与JS添加事件是否可以完全等价? 实际开发中,如果传参数,使用HTML元素绑定事件,如果不传参数,使用JS绑定事件。传参数也可以使用与JS绑定事件【使用匿名函数】。...onclick = "clicktest('次奥')"/> 2.鼠标移动事件 Mousemove: 鼠标移动触发事件 鼠标跟随效果 Mouseover: 鼠标从元素外,移动元素之上...,信息提示、字体变色 Mouseout: 鼠标从元素,移出元素范围,和mouseover一起使用 3.鼠标点击事件(左键相关事件) click 鼠标单击事件 dbclick 鼠标双击事件 mousedown...hover(mouseover,mouseout) 模拟鼠标悬停事件 toggle(fn1,fn2,fn3...) ; 鼠标点击一次 触发一个函数 练习1: ² 编写一个div元素,光标移动上去

5K130

事件

这个事件并不是DOM2级事件规范中规定的,其得到广泛应用,DOM3中将其纳入了标准; mousedown 用户按下任意鼠标按钮触发; mouseenter 鼠标光标从元素外部首次移动到元素范围内触发...;这个事件不冒泡,而且鼠标移动到后代元素不会触发;DOM3被纳入标准; mouseleave 在位于元素上方的鼠标光标移动到元素范围之外触发;这个事件不冒泡,而且鼠标移动到后代元素不会触发;DOM3...被纳入标准; mousemove 鼠标指针元素内部移动重复地触发; mouseout 鼠标指针位于一个元素上方,然后用户将其移入另一个元素触发。...优点: (1)document对象很快就可以访问,而且可以页面生命周期的任何时间点为它添加事件处理程序(无需等待DOMContentLoadLoad事件)。...移除事件处理程序 每当将事件处理程序指定给元素运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。这种链接越多,页面执行起来就越慢。

3.2K51

硬核解析,巧用案例学习jQuery框架三种事件绑定方式

jquery框架的使用中,难免会遇到按钮文本框等各种各样的要求要进行相应事件的绑定操作,进行事件的绑定能够增加页面的交互效果,相信html和js中进行事件的绑定大家都不陌生,那么今天我就来和小伙伴们分享一下利用...Jquery对象.mouseout();鼠标移出触发 表单对象.submit();//让表单提交*** 在这里需要注意:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...如下面的实例:鼠标移入时触发弹窗,移出再触发弹窗事件。 效果如下: 二、on绑定事件/off解除绑定 利用jquery的on()方法可以将的一个事件绑定到jquery对象, 语法格式如下...在这里要提醒一下大家:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。添加以下代码即可添加插件: script src="..

1.9K10
领券