jquery-事件之页面框架加载后自动执行
jQuery事件之页面框架加载后自动执行
1)概述
HTML执行是按自上而下编译,而<script>一般写在body结束之前。如果在HTML加载的过程中卡住,
比如加载图片等,没有显示出来,就会一直等图片出来,而不向下编译,而前面的HTML标签要使用script,这时候就会不生效。
如何避免这问题,可以使用$(document).ready()事件。即当页面框架加载完毕后,自动执行;而不是当页面所有元素完全加载完毕后,执行。
2)ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,
可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的 JavaScript函数都需要在那一刻执行。
有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
3)使用方法
描述: 在DOM加载完成时运行的代码,可以这样写: jQuery 代码:
$(document).ready(function(){
// 在这里写你的代码...
});
描述: 使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。 jQuery 代码:
$(function($) {
// 你可以在这里继续使用$作为别名...
});
4)例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body> <form id="f1" action="s5.html" method="POST">
<div><input name="n1" tex = "用户名" type="text" /></div>
<div><input name="n2" tex = "密码" type="password" /></div>
<div><input name="n3" tex = "邮箱" type="text" /></div>
<div><input name="n4" tex = "端口" type="text" /></div>
<div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" />
<img src="...">
</form>
<script src="jquery-1.12.4.js"></script>
<script> $(function(){
// 当页面所有元素完全加载完毕后,执行,放在$(function)()里面就是当页面框架加载完毕后,自动执行
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "必填";
$(this).after(tag);
// return false;
}
});
return flag; }); }); // $(':submit').click(function () {
// var v = $(this).prev().val();
// if(v.length > 0){
// return true;
// }else{
// alert('请输入内容');
// return false
// }
// }) </script>
</body>
</html>
jquery-事件之页面框架加载后自动执行的更多相关文章
- 页面框架加载完自动执行函数$(function(){});
页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...
- [WPF自定义控件库] 让Form在加载后自动获得焦点
原文:[WPF自定义控件库] 让Form在加载后自动获得焦点 1. 需求 加载后让第一个输入框或者焦点是个很基本的功能,典型的如"登录"对话框.一般来说"登录" ...
- Java的静态代码块是否会在类被加载时自动执行?
JAVA静态代码块会在类被加载时自动执行? 一.先看Java静态方法,静态变量 http://www.cnblogs.com/winterfells/p/7906078.html 静态代码块 在类中, ...
- [WPF 自定义控件]让Form在加载后自动获得焦点
1. 需求 加载后让第一个输入框或者焦点是个很基本的功能,典型的如"登录"对话框.一般来说"登录"对话框加载后"用户名"应该马上获得焦点,用 ...
- C#Winfrom中,窗体加载时会自动执行一次控件的textchange事件,怎么让它不执行?
http://zhidao.baidu.com/link?url=iTSyfa5_RJBSb37S8efdWoL5eDMrnxeAm-prhGSNBXqdP9r7PzNDQTc7gVzJgCNdzli ...
- Angular页面加载后自动弹窗
首先在控制器内写好一个弹窗,我用的是ionic的默认提示对话框 // 一个确认对话框 $scope.showConfirm = function() { var confirmPopup = $ion ...
- 引入jquery时,页面一直加载
注意jquery的引用位置最好放在<head>下面.
- vuejs -- 如何使一个自定义函数在加载时自动执行
- 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现
[背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...
随机推荐
- 默认css修改
input-------------------------------------------------- .input-item input{ width: 100%; height: 60px ...
- Semantic Versioning Specification & 语义化版本
Semantic Versioning Specification & 语义化版本 Semantic Versioning Specification http://semver.org 16 ...
- Java微信二次开发(二)
第二天,做微信文本消息接口请求与发送 需要导入库:dom4j-1.6.1.jar,xstream-1.3.1.jar 第一步:新建包com.wtz.message.response,新建类BaseMe ...
- Chrome Ajax 跨域设置
一.前言 web 开发中 Ajax 是十分常见的技术,但是在前后端使用接口对接的调试过程中不可避免会碰到跨域问题.今天我给大家介绍一个十分简单有效的方法. 跨域经典错误 二.Chrome 跨域设置 首 ...
- 如何使用js判断视频是否可以成功访问
日常工作中会出现各个公司网络不互通的情况,视频如果采用不互通的地址也无法播放,下面方法提供了检测视频是否可以播放的解决方案: 1.跨域 var video = document.createEleme ...
- Lua 调试库
Lua 调试库 http://blog.csdn.net/vermilliontear/article/details/50851045 http://blog.csdn.net/vermillion ...
- eclipse 安装报错
14 11:17:13] ERROR: org.eclipse.equinox.p2.transport.ecf code=1002 Unable to read repository at http ...
- 解决telnet不是内部命令
1.telnet在win7下默认是不开启的,所以需要我们自己手动开启.那么首先我们点击开始菜单,找到控制面板项,点击进入: 2.进入程序和功能模块,我们在左边需要选择“打开或关闭windows功能”, ...
- [BZOJ2957] [THU2013集训] 楼房重建
套路套路套路套路套路套路套路套路套路套路... 我只能这么说:一道裸得只剩下套路的水题... 线段树维护单调栈,显然,能够看到的楼房一定是递增的,但不是按高度递增,而是按高度和坐标的比值递增 所以我们 ...
- from表单文件上传后页面跳转解决办法
from表单上传文件,路径跳转后,又不能转发回来. 本人的一个解决办法是.返回一段html代码,浏览器解析后后退一步,回到原来的页面并刷新. return "<html>< ...