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 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
vue实现倒计时功能
Mar 24 Vue.js
JS Canvas接口和动画效果大全
Apr 29 Javascript
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
关于php循环跳出的问题
2013/07/01 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
PDO::inTransaction讲解
2019/01/28 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
PHP实现递归的三种方法
2020/07/04 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python代码太长换行的实现
2019/07/05 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
毕业自荐书
2013/12/09 职场文书
政治思想表现评语
2014/05/04 职场文书
体育教师求职信
2014/05/24 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
教师个人自我评价
2015/03/04 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
python获取对象信息的实例详解
2021/07/07 Python
深入理解pytorch库的dockerfile
2022/06/10 Python