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

jQuery进阶前言

前言: 《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。...(function() { alert("鼠标弹起来了"); }); 当鼠标“点击触发按下去的时候,会弹出mousedown的内容,松手的时候会弹出mouseup的内容。...,就会触发change()事件,输入中改变后的内容就会输出到“输出结果”这个div种中。...3、select()事件: 当 textarea 或文本类型的 input 元素中的文本被选择,会发生 select 事件。..." ,function(){ }); }) 这段代码就表示当点击了加载按钮后,就会异步请求fruit.html这个页面,然后会把fruit这个页面的内容填充到本页的

2.4K20

JavaScript 事件基础补充

JavaScript事件处理函数及其使用列表 事件处理函数 影响的元素 何时发生 onabort 图像 当图像加载被中断 onblur 窗口、框架、所有表单对象 当焦点对象移开 onchange...输入选择和文本区域 当改变一个元素的值且失去焦点 onclick 链接、按钮、表单对象、图像映射区域 当用户单击对象 ondblclick 链接、按钮、表单对象 当用户双击对象 ondragdrop...onkeyup = function () { alert('Lee'); }; 3.HTML事件 load:当页面完全加载window上面触发,或当框架集加载完毕后框架集触发。...window.onload = function () { alert('Lee'); }; unload:当页面完全卸载后window上面触发,或当框架集卸载后框架集触发。...input.onfocus = function () { alert('Lee'); }; blur:当页面或元素失去焦点window及相关元素触发

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

保存用户信息到本地存储

当然了,你在下次评论时会自动填充信息表单,效率是不是很快? 简介:页面加载本地存储中恢复数据,并将已保存的数据显示在对应的输入中。...监听输入输入事件:通过addEventListener方法,将saveData函数绑定到name、email和weburl输入的input事件,当输入中输入信息自动保存数据。...页面加载恢复数据:使用window.onload事件,页面加载完成后检查本地存储中是否存在之前保存的数据,如果存在则将数据填充到相应的输入中。...("input", saveData); weburlInput.addEventListener("input", saveData); // 页面加载本地存储中恢复数据 window.onload...当输入内容,saveData() 函数会被触发,并将输入的值保存到本地存储中。同时,通过代码中添加console.log()语句,将保存成功的消息输出到控制台。

7710

【数据可视化】Echarts的高级功能

由于建立了多图表联动,所以当鼠标滑过2019年或2020年的人工智能专业柱体,系统会同时2019年、2020年的人工智能专业上自动弹出相应的详情提示(tooltip)。...使用主题之前需要下载主题.js文件(ECharts官网上下载官方提供的主题,如macarons.js,或自定义主题)。 (2)引用主题文件。将下载的主题.js文件引用到HTML页面中。...单击主题构建工具页面左上角的“下载”按钮,弹出“主题下载”对话中,如图所示,单击左边的“JS版本”选项卡,将其中的代码复制到所命名的“.js”格式的文件中保存。...ECharts提供了“.js”“.json”两种格式的文件,主题下载应该选择“.js”版本的配置文件。下载好“.js”格式的文件后,对“.js”格式的文件的使用与动态切换主题的方法相同。...当异步加载数据,需要配置Google浏览器以支持AJAX请求,具体操作如下。 (1)右键单击“Google Chrome”快捷方式图标,弹出的快捷菜单中选择最下面的“属性”菜单项。

24810

Web页面组成

很多前端页面的数据后台服务请求的。后台服务收到请求后去向我们的数据库进行交互操作,读到结果后再返回给前端页面。也就是接口。 html是套通用的描述页面的标准。...这个地方就变成了205,实时动态变化,当然并没有把这个操作提交给后台,是百度服务器获取这个页面内容的,只是客户端做了个小小的调整。...这就是你的某个点击操作,触发了某一个事情的执行\某一个效果的展示。你的各种触发都叫做事件。 数据库中的触发器。就是某个一动作可以去触发某些sql语句的执行。这些都叫做事件。...因为所谓的加载就是等它将整个html页面从头到尾,第一行到最后一行,整个文档加载之后,才去做的事情。 所以将它放在后面,页面加载完毕了,加载完毕自然就弹出弹。...js收到它的返回结果后,就知道这个注册有没有成功,如果成功了,自然给页面做一些跳转并给你适当的提示“恭喜你,注册成功!!!”。 数据库的操作,js是不直接参与的。js用接口和后端服务进行交互的。

1.9K20

使用Servlet+AJAX+AWT实现网站登录的图片验证码功能

效果如下图所示,鼠标输入失去焦点触发校验函数进行验证: ----  哈哈哈,这个√和×有点丑啊,凑合看,反正没问题。...一.编写登录页login.jsp 本步主要完成以下的功能: 1.编写登录界面基本的元素 2.编写js程序,监听blur事件,输入失去焦点触发函数 3.在校验函数中用ajax将用户输入的验证码传递给负责比对验证码的..."> $(function (){ //通过验证码输入的blur事件来触发函数 $("#checkCodeId...开发者可以通过jsp中page指令的contentType属性设置页面的MIME类型。例如:contentType="image/jpeg"表示页面会被JPEG等图片格式。...:(0,0)开始填充填充宽度为80px,填充高度为30px graphics.fillRect(0,0,80,30); /* *验证码图片随机生成60条干扰线段

91240

保存用户信息到本地存储

简介:页面加载本地存储中恢复数据,并将已保存的数据显示在对应的输入中。...监听输入输入事件:通过addEventListener方法,将saveData函数绑定到name、email和weburl输入的input事件,当输入中输入信息自动保存数据。...页面加载恢复数据:使用window.onload事件,页面加载完成后检查本地存储中是否存在之前保存的数据,如果存在则将数据填充到相应的输入中。...("input", saveData); weburlInput.addEventListener("input", saveData); // 页面加载本地存储中恢复数据 window.onload...当输入内容,saveData() 函数会被触发,并将输入的值保存到本地存储中。同时,通过代码中添加console.log()语句,将保存成功的消息输出到控制台。

21240

一个合格的初级前端工程师需要掌握的模块笔记

ltr或rtl两种 lang属性:用于指定元素内容的语言 事件属性 window窗口事件,onload,在网页加载结束之后触发,onunload,在用户网页离开发生(点击跳转,页面重载,关闭浏览器窗口等...) form表单事件,onblur,当元素失去焦点触发,onchange,元素的值被改变触发,onfocus,当元素获得焦点触发,onreset,当表单中的重置按钮被点击触发,onselect...,元素中文本被选中后触发,onsubmit,提交表单触发 keyboard键盘事件,onkeydown,在用户按下按键触发,onkeypress,在用户按下按键后,按着按键触发。...,当元素按下鼠标按钮触发,onmousemove,当鼠标指针移动到元素触发,onmouseout,当元素指针移出元素触发,onmouseup,当元素释放鼠标按钮触发。...input输入 onchange 内容改变触发

3.6K10

微信小程序开发笔记

小程序初始化完成后,页面首次加载触发onLoad,只会触发一次。 当小程序进入到后台,先执行页面onHide方法再执行应用onHide方法。...data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载,首次进入会执行此方法进行数据加载,一个页面只会加载一次 onReady Function 生命周期函数...bindfocus: 指当我们的输入获得焦点触发,也就是鼠标或者手指点击到输入。...bindblur: 指输入失去焦点是触发,也就是当我们敲击回车或手机上的完成又或者是点击屏幕的空白处触发。...bindchange: 这个事件官方文档中没有写,它的效果和bindblur一样,至于看名字我们可能觉得bindchange输入中的内容不改变不会触发,但是亲测即使内容不改变,bindchange

2K30

浏览器渲染原理及流程

但为了避免因为引入了锁而带来更大的复杂性,JS最初就选择了单线程执行。...事件触发线程 当一个事件被触发该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。...异步http请求线程 XMLHttpRequest连接后是通过浏览器新开一个线程请求,将检测到状态变更,如果设置有回调函数,异步线程就产生状态变更事件放到JS引擎的处理队列中等待处理。 2....一些高性能的电脑也许还没什么,但是如果 Reflow 发生在手机上,那么这个过程是延慢加载和耗电的。可以csstrigger查找某个css属性会触发什么事件。...使用Chrome DevTools来了解页面的渲染层情况 开启 Timeline>Paint选项,然后录制一段时间的操作,选择单独的帧,看到每个帧的渲染细节,ESC弹出有个Layers选项,可以看到渲染层的细节

4.5K32

最新jquery+easyui_api培训文档

date 当选择一个日期触发 2.4 方法 方法名 参数 描述 destroy none 销毁组件 disable none 禁用输入....3.3 事件 事件名 参数 描述 onLoadSuccess none 当远程数据成功加载触发 onLoadError none 当远程数据加载失败触发 onSelect record 当用户选择了一个列表项触发...输入组件后显示的标签 Of  {pages} displayMsg 字符串 显示一个页面的信息。...成功返回的回调函数相同 onSelect title 当用户选择一个标签面板触发 onClose title 当用户关闭一个标签面板触发 11.4 方法 方法名 参数 描述 resize none...字符串 指定哪些字段标识字段 null url 字符串 远程请求数据的地址 null loadMsg 字符串 当远程加载数据,现实的等待信息提示 Processing, please wait

3.2K40

第四章-使用本机文件对话和帮助进程间沟通 | Electron实战

本章中,我们将添加触发本机文件对话的功能,并从文件系统的任何位置选择文本文件并将其加载到应用程序中。在这章的最后,渲染进程的浏览器窗口中的“打开文件”按钮将从主进程触发“打开文件”对话。...图4.1 我们的应用程序将在启动触发“打开文件”对话。到本章结束,此功能将被UI触发对话的功能所取代。 您可以使用Electron dialog模块创建本机对话。...mainWindow = null; }); }); 当我们的应用程序启动并完全加载窗口,用户将立即看到一个文件对话,这将允许他们选择一个文件(参见图4.2)。...正如我们第一章中讨论的,我们不能读取数据库或文件系统。服务端代码我们的计算机上运行,它可以访问数据库,它可以写入我们系统的日志文件。.../main.js'); 现在,我们可以渲染器进程中调用主进程导出getFileFromUser()函数。让我们替换事件监听器中的功能,以触发Open File对话,而不是触发警报。

1.9K20

页面性能优化的利器 — Timeline

绘制,本质就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等,也就是一个DOM元素所有的可视效果。一般来说,这个绘制过程是多个层完成的。 * 渲染层合并。...由一步可知,对页面中DOM元素的绘制是多个层上进行的。每个层完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,然后显示屏幕。...首个红色位置,记录了首次加载页面,所经历的Loading -> Scripting -> Rendering -> Painting流程。...比如,点击Evaluate Script事件后,可以查看总共的耗时,并且可以链接到具体的JS源代码: 而在网页加载完毕后,对图片进行了点击操作,触发了标签的onclick事件,开发者能够...如下图中的操作,勾选了Paint Flashing后,还是Demo页面中,点击图片触发JS事件,进而会span标签的内容以及颜色,而在页面预览区域中,可以观察到该行文本刷新内容过程中,有绿色的方框进行高亮包围

6.7K30

微信小程序+PHP实现登录注册(手把手教程)

语句 新建的数据库右键 -> 选择新建查询 将如下 SQL 复制粘贴到新建查询页面: /* Navicat Premium Data Transfer Source Server : phpstudy.../utils/util.js');:为了获取 util.js 内声明的变量,比如我这里将 url 的公共前缀部分声明了 util.js 里面,每次要发起请求访问后台,都需获取这个公共前缀,然后进行拼接.../login/login' }) } } }) } } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数..., passwordAck:"", email:"", phoneNumber:"", role:"" }, signin:function(e){ //关闭当前页面,返回页面或多级页面。.../** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function

2.2K30

JQuery 入门学习(二)

ready事件在对象加载完成后触发,我们前面选择的是document对象,所以这个ready就是指整个文档加载完成后触发的事件。    ...我列举一些Jquery中常用的事件及其绑定函数:         click 鼠标点击事件 (最常用,当鼠标点击某对象触发函数)         change 对象被改变(如input中写入...、修改、删除文字触发此事件)         focus 对象获得焦点(如光标进入textarea触发此事件)         blur 对象失去焦点(与focus事件相对)        ...load 对象加载完成(如图像被加载完成触发此事件)         error 对象遇到错误 (如图像输入了一个错误的地址,没有成功加载)         mousemove 鼠标移动...(当鼠标移动触发此事件)     上次我举了几个例子,有一个就是点击按钮后“离别歌”出现在页面中,触发的就是click事件。

1.3K10

前端三大框架之Vue-day01

指令 本质就是自定义属性 Vue中指定都是以 v- 开头 v-cloak 防止页面加载出现闪烁问题 /* 1、通过属性选择选择到...但是他可以将HTML片段填充到标签中 可能有安全问题, 一般只可信任内容使用 v-html,永不用在用户提交的内容 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html...-- 只当在 event.target 是当前元素自身触发处理函数 --> ......按键修饰符 在做项目中有时会用到键盘事件,监听键盘事件,我们经常需要检查详细的按键。Vue 允许为 v-on 监听键盘事件添加按键修饰符 <!...中可以通过config.keyCodes自定义按键修饰符别名 预先定义了keycode 116(即F5)的别名为f5,因此文字输入中按下F5,会触发prompt

1.7K10

傲游浏览器漏洞系列()- 任意文件写入,UXSS

新的设备,我们必须探索与 JS 接口相关的每个暴露的方法,来寻找可能被利用的有趣功能。 这个应用程序的 JS 接口攻击面很大,这使我们的工作变得更简单或者更难,就取决于你如何看待这个问题了。...译者注: 我们逆向 Android 程序的时候,比如此例是浏览器应用,我们可以先在逆向工具中搜索一些敏感的方法/函数,像 jsCall这种会涉及到与 js 交互断点方法,getContent 这种与文件内容有交互的方法等...—— 我们的 JavaScript Google 的登录页面得以执行 任意文件写入二 —— 覆盖数据库以便不需要用户交互即可触发 UXSS 通常利用登录页面进行 UXSS 需要一些用户交互,因为受害者需要对...此时,受害者的 SQLite 数据库将替换为我们制作的数据库。 4) 下一次受害者访问其中一个域名的登录页面,我们的 JavaScript 代码将会注入到页面中。...,那么他们的本地 SQLite 数据库将被我们制作的数据库覆盖,当当受害者访问 Yahoo ,Twitter 或者 Google 登录页面,我们的 JavaScript 代码将执行。

1.3K40
领券