`
bo_hai
  • 浏览: 564208 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

$(document).ready()使用讨论

阅读更多

一、先为说说 $(document).ready() 的功能:

    1. JQuery API对 $(document).ready() 的解释是:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

    2. 我的理解:$(document).ready() 用于当前页面加载完成后,就执行其定义的方法,用于异步加载,提交页面响影的速度,用于在一个页面中包含多个页面的情况(一个页面中使用多个iframe)。

 

二、使用方法如下:

    1. 将页面中使用iframe的地方使用div代替;并定义div的ID属性。代码示例如下:

<div id="MyNoticesDiv" width="100%" height="195px">
			 		
</div>

 

    2. 在js定义$(document).ready(),代码示例如下:

<script language="JavaScript" type="text/javascript">

	$(document).ready(function(){ 

		$.ajax({
			url : '${base}/merchantHome/findMyNotices.action?merchantNoticeDto.limit=3',
			type : 'post',
			dataType : "text",
			success : function(text) {
				isPro = false;
				if(null != text && "" != text){
					$('#MyNoticesDiv').html(text);
				}
			}
		});		

	})

</script>

 

    3. 就这么简单,页面完成后,通过js再加载div中要显示的内容。

 

1
0
分享到:
评论

相关推荐

    JQuery下关于$.Ready()的分析

    本文主要讨论的是jQuery中的`$.ready()`方法及其与`onload`事件、`$(window).load()`方法的区别与应用。 首先,`$.ready()`方法,通常写作`$(document).ready()`,它的主要作用是在DOM(文档对象模型)完全加载完毕...

    jquery文字滚动效果

    在讨论具体文字滚动效果之前,我们需要了解jQuery的基本使用。jQuery通过简化JavaScript的DOM操作、事件处理和动画等功能,让开发者能够更加高效地创建动态网页。引入jQuery库后,可以通过`$`符号来调用其方法。例如...

    基于jquery的照片伸缩效果.zip

    $(document).ready(function() { var $image = $('.image-to-resize'); }); ``` 这里的`$('.image-to-resize')`选择类名为`image-to-resize`的所有图片元素。 接下来,我们可以利用jQuery的`.on()`方法绑定一个...

    $(document)

    前端jQuery代码可以这样使用 "$(document).ready()" 来发起Ajax请求并处理返回的数据: ```javascript $(document).ready(function() { $.ajax({ url: '@Url.Action("GetData", "Controller")', type: 'GET', ...

    用javascript实现jquery的document.ready功能的实现代码

    在使用jQuery时,我们通常使用`$(document).ready()`方法来确保在文档完全加载到浏览器后执行代码。这是一个非常有用的功能,因为它允许开发者确保在操作DOM元素之前,这些元素已经完全可用。 然而,了解如何用纯...

    基于jQuery制作简单的响应式幻灯片特效代码.zip

    【标题】中的“基于jQuery制作简单的响应式幻灯片特效代码”表明了我们要讨论的是一个使用JavaScript库jQuery实现的响应式幻灯片效果。在网页设计中,幻灯片是一种常见的展示多张图片或内容的方式,它能以动态、交互...

    JQuery笔记

    在JQuery中,可以通过`$.ajax()`或`$.get()`方法来动态加载图片。例如: ```javascript $.get('path/to/image.jpg', function(data) { // 处理图片数据 }); ``` **2. 图片预加载** 为了优化用户体验,通常会在...

    纸片点击出现涟漪效果

    $(document).ready(function() { $('.ripple').on('mousedown', function(e) { var $this = $(this); var ripple = $this.find('.ripple-effect'); if (ripple.length === 0) { ripple = $('...

    jQuery权威指南(完整版)

    书中会讲解如何使用$.fn.click()、$.fn.hover()等方法绑定事件,以及$.fn.delegate()和$.fn.on()用于动态元素的事件处理。此外,还会介绍事件冒泡和事件委托的概念。 4. **动画与效果**:jQuery的动画功能强大,如$...

    漂浮滚动-jQuery网页右下角固定层快捷导航点击展开收起

    $(document).ready(function() { var $floatingNav = $('#floatingNav'); $floatingNav.data('isOpen', false); $floatingNav.click(function() { var isOpen = $floatingNav.data('isOpen'); if (isOpen) { ...

    Jquery Tab标签例子,js代码有备注

    - `$(document).ready()`:当整个页面加载完成时,执行包裹在其中的函数。 - `$tabLinks` 和 `$contentAreas` 分别保存Tab链接和内容区域的jQuery对象,方便后续操作。 - `.eq(0)` 选择索引为0的元素(即第一个...

    带增减按钮的输入框

    $(document).ready(function() { var $quantityInput = $('#quantity'); $('.decrease').on('click', function() { var currentValue = parseInt($quantityInput.val()); if (currentValue &gt; 0) { $...

    jquery模拟select效果实现

    本文将详细讨论如何使用jQuery来实现这一功能,同时提供一个自编的简单实用的模拟select效果的代码示例。 首先,让我们理解原生HTML `select` 元素的基本功能。`&lt;select&gt;` 元素用于创建一个下拉列表,用户可以从中...

    如何解决谷歌浏览器下jquery无法获取图片的尺寸

    在本文中,主要讨论了在谷歌浏览器中使用jQuery获取图片尺寸时遇到的问题及其解决方案。通常情况下,使用以下jQuery代码在页面加载完成后尝试获取图片的高度和宽度: ```javascript $(document).ready(function(){ ...

    把jQuery的类、插件封装成seajs的模块的方法

    // 注意:为了防止命名冲突,使用$.noConflict()返回jQuery实例 return $.noConflict(); }); ``` 这样定义后,你可以通过`require`来引入这个模块,就像下面这样: ```javascript define(function (require, ...

    jquery 图片左右切换

    $(document).ready(function() { var $slider = $('.slider'); var $images = $slider.find('img'); var currentIndex = 0; function switchImage(direction) { if (direction === 'left') { currentIndex--;...

    通过jquery的$.getJSON做一个跨域ajax请求试验

    在本文中,我们将探讨如何使用jQuery的`$.getJSON`方法进行跨域Ajax请求,并通过一个简单的预约登记接口的示例来展示其实现过程。首先,理解`$.getJSON`是jQuery库提供的一个便捷方法,用于异步获取JSON格式的数据,...

    课程大纲1

    $.fn.myPlugin = function() { return this.each(function() { // 插件逻辑 }); }; // 使用插件 $('div').myPlugin(); ``` 编写自己的插件则需要理解jQuery对象、原型和作用域,但一旦掌握,就能大大提高开发效率...

    jquery 实现上下移动元素排序无刷新

    例如,可以使用`$.ajax()`或`$.post()`方法: ```javascript $.ajax({ type: "POST", url: "updateOrder.php", // 更新排序的服务器端接口 data: { oldIndex: oldIndex, // 当前元素在数据库中的位置 newIndex...

Global site tag (gtag.js) - Google Analytics