`

JQ DOM准备

 
阅读更多

demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
document.getElementById("panel").onclick=function(){
    alert( "元素已经加载完毕 !");
}
/*执行错误*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

效果图:

 

demo2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick=function(){
	alert( "元素已经加载完毕 !");
}
/*正确执行*/
</script>
</body>
</html>

效果图:

 

demo3.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<script type="text/javascript">
window.onload = function(){
	document.getElementById("panel").onclick=function(){
		alert( "元素已经加载完毕 !");
	}
}
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

效果图:

 

demo4.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	document.getElementById("panel").onclick=function(){
		alert( "元素已经加载完毕 !");
	}
})
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

效果图:

 

demo5.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function one(){
	alert("one");
}
function two(){
	alert("two");
} 
window.onload = one ;
window.onload = two ;
</script>
</head>
<body>
</body>
</html>

效果图:

 

demo6.html

<!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 src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function one(){
	alert("one");
}
function two(){
	alert("two");
} 
$(document).ready(function(){
	one();
})
$(document).ready(function(){
	two();
})
</script>
</head>
<body>
</body>
</html>

效果图:

 

 

 

 

 

  • 大小: 33.5 KB
  • 大小: 43.1 KB
  • 大小: 42.4 KB
  • 大小: 42.4 KB
  • 大小: 42 KB
  • 大小: 41.5 KB
分享到:
评论

相关推荐

    jQuery 实现DOM元素拖拽交换位置的实例代码

    监听面板的 `mousedown` 事件,获取并记录当前拖拽面板的初始位置信息,并对拖拽元素应用透明度变化,以此给用户视觉反馈,表明该元素已被选中准备拖拽。 - **2.2 mousemove 事件** 在面板的 `mousemove` 事件中,...

    jq图表插件

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,而jq图表插件则在此基础上扩展了数据可视化功能。 在网页设计和开发中,数据可视化是至关重要的,它可以将复杂的数据以清晰、直观的...

    JQ 统计图 柱状图

    接下来,需要准备一个容器元素来放置图表,并初始化图表数据。例如: ```html ; height: 400px; margin: 0 auto"&gt; ``` 然后,编写JavaScript代码来设置和绘制柱状图。以下是一个简单的例子: ```javascript $...

    jq css3照片堆栈效果.zip

    在JavaScript领域,jQuery(jq)是一个广泛使用的库,它简化了DOM操作、事件处理和动画制作等任务。在这个特效中,jQuery用于监听用户交互,例如鼠标事件,然后触发CSS3动画。jQuery的语法简洁易懂,使得开发者可以...

    JQ插件库jquery-1.8.3.min.js

    - **利用文档准备事件**:使用`$(document).ready()`确保在DOM加载完成后执行代码,提高页面加载速度。 - **选择器优化**:尽可能使用高效的选择器,避免使用过于复杂的表达式。 - **模块化与压缩**:将jQuery...

    超简单的jq表单验证

    `jq`通常指的是jQuery,一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果。本主题将深入探讨如何使用jQuery(简称jq)实现超简单的表单验证。 ### 1. jQuery简介 jQuery是由John Resig于2006年...

    jq期末.rar

    这个“jq期末.rar”压缩包文件很可能是针对学习jQuery的学生或者开发者准备的期末复习资料,旨在帮助他们巩固和深化对jQuery的理解与运用。 一、jQuery基础 1. 选择器:jQuery的核心在于其强大的选择器功能,如ID...

    JQ 省市区的三级联动

    在实现省市区的三级联动时,jQuery的便利性体现在可以快速选中DOM元素,轻松操作DOM树,以及方便地绑定事件监听器。 描述中的"博文链接:https://onestopweb.iteye.com/blog/2409108"可能提供了一个具体的实现示例...

    关于jquery append() html时的小问题的解决方法

    这里就涉及到一个关于append()函数和其他DOM操作需要注意的细节:当直接使用append()函数来插入带有标签和属性的复杂字符串时,浏览器并不会对这些字符串进行解析,而是将其当作纯文本进行追加。这就意味着,如果...

    jQ资料.rar

    1. **$(document).ready(fn)**:页面加载完成后执行指定函数,确保DOM已准备就绪。 2. **$.ajax()**:进行异步数据请求,支持GET和POST等HTTP方法,广泛应用于AJAX操作。 3. **$.each()**:遍历数组或对象,对每个...

    jq 三级联动

    在网页开发中,"jq 三级联动"通常指的是使用jQuery库实现的三个层次的数据关联和交互效果。这种联动常用于下拉菜单、地区选择、商品分类等场景,使得用户在一个选项选择后,其他关联的选项能够自动更新。下面将详细...

    jq 实现圆角插件

    5. **加载时机**:在DOM加载完成后(如`$(document).ready()`)再执行圆角设置,以确保元素已准备好被操作。 此外,我们还需要关注性能问题。在大量元素上应用圆角插件可能会增加页面渲染的负担,因此在大型项目中...

    jq实现 随机显示几张不重复的图片 兼容IE

    这个需求在jQuery(通常简称为jq)库的帮助下可以轻松实现。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果,使得开发变得更加高效。下面我们将详细探讨如何利用jQuery来完成这个任务。 ...

    jq 双日历时间选择控件

    2. **DOM元素准备**:在HTML结构中,创建两个输入框或者其他容器元素,用于显示日历控件。这些元素可以通过类名或ID来标识,以便于jQuery插件识别并绑定。 3. **初始化插件**:使用jQuery选择器找到对应的DOM元素,...

    jq城市联动

    1. **数据准备**:首先,你需要有一套完整的城市数据,包括省份、城市和区县三个级别的信息。这些数据可以存储在JSON格式的文件中,或者直接写入JavaScript代码中。 2. **HTML结构**:创建三个select元素,分别代表...

    jQ学习第二季(2).rar

    "jQ学习第二季(2).rar"这个压缩包很可能是为那些希望深入理解jQuery的开发者准备的,包含了进一步的学习资料或者实战项目。 在jQuery的核心特性中,我们首先会接触到选择器,它是jQuery的精髓之一。jQuery的选择器...

    jQ导出PDF自动分页打印代码

    首先,jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理和Ajax交互。在这个项目中,jQuery用于选择和操作页面中的元素,以便准备它们被转换为PDF格式。例如,可能使用jQuery选择器获取需要导出的所有...

    jQuery获取iframe的document对象的方法

    因为如果`iframe`内容尚未完全加载,`contentWindow`可能还没有准备好。可以使用`load`事件来确保`iframe`已经加载完毕: ```javascript $('#myframe').on('load', function() { var iframeDoc = $(this).prop('...

    学习jquery有利的工具

    本资源“学习jQuery有利的工具”显然是一个专为jQuery初学者和开发者准备的资料包,它包含了一个名为“jq ztree”的组件,这是一个基于jQuery的树形插件,适用于构建动态和交互式的树状数据结构。 首先,jQuery的...

Global site tag (gtag.js) - Google Analytics