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 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
简单了解vue.js数组的常用操作
2019/06/17 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
python读取oracle函数返回值
2016/07/18 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python实现小球弹跳效果
2019/05/10 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
python语言是免费还是收费的?
2020/06/15 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
安全生产年活动总结
2014/08/29 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Java的Object类的九种方法
2022/04/13 Java/Android
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle