jQuery与JS加载事件用法分析


Posted in Javascript onSeptember 04, 2016

本文实例分析了jQuery与JS加载事件用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加载事件</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
</head>
<body onload="alert('js');">
<style type="text/css">
#bbb{ background-color:#039;}
</style>
<div class="aaa" id="bbb">
  无标题文档1
</div>
<div class="aaa" id="bbb">
  无标题文档2
</div>
<div class="aaa" id="bbb">
  无标题文档3
</div>
<script type="text/javascript">
//jQ 也是js来的,不同的是使用js封装是一个库,所以也叫 js 库
//jQ 把文档结构加载完后,就开始加载 jQ
//$(document).ready(function(){})可以简写成$(function(){});
$(function(){
  alert('jq');
});
$(function(){
  alert('jq2');
});
$(function(){
  alert('jq3');
});
$(function(){
  alert('jq4');
});
$(document).ready(function(){ // == $(function(){
  alert('jq5');
});
//js onload 事件会在页面或图像加载完成后立即发生。
//onload 不能同时出现两次
window.onload = function(){
  alert('js2')
}
//$(function(){});这个是在页面DOM文档加载完成后加载执行的,等效于$(document).ready(function(){...});
//优于window.onload,后者必须等到页面内包括图片的所有元素加载完毕后才能执行。
</script>
</body>
</html>

效果图:

jQuery与JS加载事件用法分析

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Jquery ui css framework
Jun 28 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
Javascript的比较汇总
Jul 25 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
jQuery轮播图效果精简版完整示例
Sep 04 #Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 #Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 #Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 #Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 #Javascript
JS简单测试循环运行时间的方法
Sep 04 #Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
JAVA/JSP学习系列之四
2006/10/09 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
python中黄金分割法实现方法
2015/05/06 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
中科创达面试题
2016/12/28 面试题
父亲生日宴会答谢词
2014/01/10 职场文书
社区庆八一活动方案
2014/02/02 职场文书
电气自动化求职信
2014/06/24 职场文书
党委班子对照检查材料
2014/08/19 职场文书
小学班主任研修日志
2015/11/13 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis