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

从零开始学 Web 之 jQuery(一)jQuery概念,页面加载事件

它封装JavaScript常用功能代码,提供一种简便操作,优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。...方方式绑定事件没有 on 2、className 是DOM对象方法,jQuery不能调用。...3、jQuery对象.val();表示获取该对象 value 属性值; 4、jQuery对象.val("值");表示设置该对象 value 属性值; 四、页面加载事件 1、DOM中页面加载事件...2、jQuery中页面加载事件 2.1、方式一:DOM转jQuery方式 $(window).load(function () { console.log("load:1"); }); $(window...$ 也可以换成 jQuery。 特点:不是整个页面的所有元素,而是页面中基本元素加载完后就执行,所以比使用 load 方式快一些。

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

JQuery事件

1 鼠标事件    click()               ------- 鼠标单击事件   dbclick()             -------鼠标双击事件   mouseenter()     ...-------鼠标移入事件   mouselever()      ------鼠标移出事件   hover()                ------光标悬停事件 2 键盘事件  keydown(...注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符按键时keypress事件才会触发。若一直按着某按键则会不断触发。  ...二.两种常用用法举例 案例1:获取按键代码或字符ASCII码 $(window).keydown( function(event){ // 通过event.which可以拿到按键代码....: 通过event.data传递给事件处理函数任意数据;  handler: 指定事件处理函数; 举例: // 只允许按下字母键生效, 65~90是所有小写字母键盘代码范围. var validKeys

2.1K40

jQuery 事件

jQuery 是为事件处理特别设计。 ---- 什么是事件? 页面对不同访问者响应叫做事件事件处理程序指的是当 HTML 中发生某些事件时所调用方法。 实例: 在元素上移动鼠标。...常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter...keyup focus scroll mouseleave blur unload hover jQuery 事件方法语法 在 jQuery 中,大多数 DOM 事件都有一个等效 jQuery...}); ---- 常用 jQuery 事件方法 $(document).ready() $(document).ready() 方法允许我们在文档完全加载完后执行函数。...该事件方法在 jQuery 语法 章节中已经提到过。 click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。

2.2K50

jQuery 事件

常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter...jQuery凭借简洁语法和跨平台兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。...该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。 注意:如需移除指定事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递参数。...DOM 元素 event.data 包含当前执行处理程序被绑定时传递到事件方法可选数据 event.delegateTarget 返回当前调用 jQuery 事件处理程序所添加元素 event.isDefaultPrevented...常用jQuery事件范例代码 <!

2.8K70

jQuery事件模型

前几天自己着重读了jQuery1.11.1源码,又结合了之前对DE事件模型分析,最后也实现一个简陋事件模型。 jQuery事件系统离不开jQuery缓存系统。...jQuery第一代缓存是直接将数据存储在 缓存体 这个数据结构中,但是需要在元素上添加一个uuid来作为标示, 标记在缓存体中位置。...所以jQuery第二代缓存系统应运而生,这次不对元素进行添加属性,而是判断元素valueOf()方法返回值,如果没有返回值是 对象,则说明缓存体中并没有该元素缓存数据,进而使用ECMA5Object.defineProperty...简单讲述了缓存系统,现在着重讲解下jQuery事件系统: 主要使用了几个数据结构,即元素缓存体,Event构造函数,和Handler构造函数。   ...其次就是对fn封装,在库中,fn包装函数 实现了新事件对象创建,以及对新创建事件对象修补,并调整了在回调中this指向。

92180

jquery事件&动画

一、事件 在1.7之前版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一使用on/off方法 1、.on( events...click", "click.name1", 或者 ".myname" 参数2selector:一个选择器字符串,用于过滤和选中能触发事件后代元素 参数3data:当一个事件被触发时,要传递给事件处理函数...,所谓命名空间就相当于给这个事件命名,我删除事件时候就只删除对应这个,不会误伤这个事件类型其他事件 $('.box li').on('click.hello', function(){ var...jQuery提供"linear(线性)" 和 "swing(旋转)" 参数3:完成后执行函数 $('.target').hide(); $('#book').hide(300, 'linear',...,jquery提供了自定义动画行为方法 1、.animate( properties [, duration ] [, easing ] [, complete ] ) 官方文档 参数一:properties

1.7K20

jQuery:详解jQuery事件(一)

jQuery不仅提供了更加优雅事件处理语法,而且极大增强了事件处理能力。   ...一、jQuery事件   1、加载DOM:   执行时机:在常规JavaScript中,通常使用window.onload方法,而在jQuery中,使用是$(document).ready()方法...要解决这个问题,可以使用jQuery另一个关于页面加载方法——load()方法。load()方法会在元素onload事件中绑定一个处理函数。...如果处理函数绑定给window对象,则会在所有的内容(包括窗口、框架、对象和图像等)加载完毕后触发,出国处理函数绑定在元素上,则会在元素内容加载完毕后触发。   ...明天继续完成jQuery事件下半部分,包括内容有合成事件事件冒泡、移除事件等内容。

1.6K20

jQuery:详解jQuery事件(二)

上一篇讲到jQuery事件,深入学习了加载DOM和事件绑定相关知识,这篇主要深入讨论jQuery事件合成事件事件冒泡和事件移除等内容。   ...接上篇jQuery:详解jQuery事件(一)   3、合成事件   jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义方法...*这里要注意一点是,jQueryhover()方法准确来说是替代jQUerybind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover"...就上面的简单描述,已经可以看出问题所在了,那就是会出现意想不到click事件,所以需要对事件作用范围进行限制。   jQuery有三种办法可以解决事件冒泡导致问题。...在jQuery中提供了stopPropagation()方法来停止事件冒泡。

2.2K30

jQuery 事件注册、事件处理

1. jQuery 事件注册 ​ jQuery 为我们提供了方便事件注册机制,是开发人员抑郁操作优缺点如下: 优点: 操作简单,且不用担心事件覆盖等问题。...事件处理 ​ 因为普通注册事件方法不足,jQuery又开发了多个处理方法,重点讲解如下: on(): 用于事件绑定,目前最好用事件绑定方法 off(): 事件解绑 trigger().../ triggerHandler(): 事件触发 2.1 事件处理 on() 绑定事件 ​ 因为普通注册事件方法不足,jQuery又创建了多个新事件绑定方法bind() / live() /...jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次事件绑定方法 one(),在这里我们重点讲解一下 off() ; 语法 off...由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ; 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。

3.8K20

jQuery事件委托

jQuery中,事件委托是一种优化事件处理技术,它利用事件冒泡机制,将事件处理程序绑定到一个父级元素上,从而减少事件处理函数数量,并实现对动态添加子元素事件处理。什么是事件委托?...事件委托是一种将事件处理程序绑定到父级元素上技术,它利用事件冒泡机制,当子元素触发事件时,事件会冒泡到父级元素,从而触发绑定在父级元素上事件处理程序。...提高性能:由于事件委托将事件处理程序绑定到父级元素上,避免了为每个子元素都绑定事件处理程序开销,从而提高了性能。如何使用事件委托?在jQuery中,我们可以使用on()方法结合选择器来实现事件委托。...通过事件委托,无论是已存在元素还是后续动态添加元素,都会共享同一个事件处理程序,实现了统一事件管理。...事件委托优点和适用场景事件委托有以下优点:减少事件处理函数数量,提高代码可维护性和性能。可以处理动态添加元素,无需手动重新绑定事件处理程序。可以统一管理事件处理程序,使代码更加简洁和易于维护。

1.1K10
领券