javaScript和jQuery自动加载方法

一、JavaScript自动加载

①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下:

<body οnlοad="alert(1)"></body>                    <!-- 当有一个onload -->
<body οnlοad="alert(2);alert(3);alert(4)"></body>  <!-- 当有多个onload用分号隔开,依次弹出 2 3 4 -->

②在脚本中用window.onload: 当页面中的所有内容(包括图片)加载完后再执行window.onload,如下:

window.onload = function(){...}; //正确写法,这是匿名函数

//------------↓多个window.onload的错误写法-------------
window.onload = function(){alert("text1");}; //不执行
window.onload = function(){alert("text2");}; //执行
//------------↑---------------------------------------

//------------↓多个window.onload的正确写法---------------------------
window.attachEvent("onload",function(){alert('a')});
window.attachEvent("onload",function(){alert('b')});
window.attachEvent("onload",function(){alert('c')});
//重点提示:在IE浏览器下用 (window.attachEvent),会弹出 c b a 
//重点提示:其他浏览器下用 (window.addEventListener),会弹出 a b c
//------------↑-----------------------------------------------------


二、jQuery自动加载
①当页面中DOM结构(不包含图片)加载完后再执行(可能DOM元素关联的东西并没有加载完),有三种写法,如下:

$(document).ready(function(){...});//写法1,全称
$(function(){...});                //写法2,简写
jQuery(function($){...});          //写法3,简写

②页面中所有元素(包括图片)加载完成才执行,如下。

$(window).load(function() {...});  //等于JavaScript的写法,如window.onload = function(){...}; 

③立即执行匿名函数。 当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来,有两种写法,如下:

(function(){...})();        //写法1,不加参数
(function($){...})(jQuery); //写法2,加参数,避免与其他变量发生冲突

解释:

function(arg){...}; //定义一个匿名函数,参数为arg

调用此函数时,在函数后面写上括号和实参,由于操作符的优先级,函数本身也需要用括号,如下:

(function(arg){...})(param);//arg是形参,param是实参

相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数。 所以下面的写法总结为:只在形参使用$,是为了不与其他库冲突,所以实参用jQuery,如下。

(function($){...})(jQuery);

说白了,如下:

funtion show(s){...};       //相当于这种写法
show(jQuery);             

//-------------------------------------------

var show=function(s){...};  //或者相当于这种写法
show(jQuery);  




  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 下面是一个基于 jQuery 的下拉、瀑布流和 Mustache 模板的示例代码: HTML 部分: ```html <div id="content"></div> <div id="loading">Loading...</div> ``` CSS 部分: ```css #content { column-count: 3; column-gap: 10px; } .item { break-inside: avoid-column; margin-bottom: 10px; } img { width: 100%; } #loading { display: none; text-align: center; font-size: 20px; color: #999; margin-top: 20px; } ``` JS 部分: ```javascript $(function() { var page = 1; var isLoading = false; var isEnd = false; function loadData() { if (isLoading || isEnd) { return; } isLoading = true; $('#loading').show(); $.ajax({ url: 'data.php', type: 'get', data: { page: page }, dataType: 'json', success: function(data) { if (data.length > 0) { var template = $('#template').html(); Mustache.parse(template); var rendered = Mustache.render(template, data); $('#content').append(rendered); page++; } else { isEnd = true; } }, complete: function() { isLoading = false; $('#loading').hide(); } }); } $(window).scroll(function() { var scrollTop = $(this).scrollTop(); var windowHeight = $(this).height(); var contentHeight = $('#content').height(); if (scrollTop + windowHeight >= contentHeight && contentHeight > 0) { loadData(); } }); loadData(); }); ``` 其中,data.php 是一个返回 JSON 数据的后端接口,返回数据格式如下: ```json [ { "id": 1, "title": "item 1", "image": "image1.jpg" }, { "id": 2, "title": "item 2", "image": "image2.jpg" }, ... ] ``` Mustache 模板部分: ```html <script id="template" type="x-tmpl-mustache"> {{#items}} <div class="item"> <h2>{{title}}</h2> <img src="{{image}}" alt=""> </div> {{/items}} </script> ``` 以上代码实现了一个基本的下拉、瀑布流和 Mustache 模板的示例,你可以根据自己的需求进行修改和扩展。 ### 回答2: jQuery是一种流行的JavaScript库,用于简化HTML文档遍历、事件处理、动画效果和AJAX等操作。下拉是一种网页方式,在用户滚动到页面底部时,通过发送请求更多内容。瀑布流是一种多列布局方式,类似于瀑布的流动,每一列按照内容的高度自动调整位置。 jQuery可以很方便地实现下拉功能。通过监听窗口的滚动事件,当滚动到页面底部时,发送请求获取更多数据,然后将数据添到页面中。这样,用户就可以在滚动页面的过程中无缝地更多内容,提升用户体验。 瀑布流布局通常使用CSS和JavaScript来实现。在jQuery中,可以使用瀑布流插件如"Masonry"或"Isotope"来实现瀑布流布局。这些插件可以根据内容的大小和位置自动调整各个元素的位置,从而实现瀑布流效果。 Mustache是一种轻量级的模板引擎,可以将数据和HTML模板进行结合,生成动态的网页内容。在使用jQuery进行下拉和瀑布流布局时,Mustache可以用于将获取到的数据与指定的HTML模板进行结合,生成可展示的内容。 通过结合使用jQuery、下拉、瀑布流布局和Mustache,我们可以实现一个功能强大且用户友好的网页。用户可以通过滚动页面来更多内容,而不需要手动点击按钮。的内容可以利用瀑布流布局自动调整位置,使页面更美观。而Mustache可以将获取到的数据动态地呈现在指定的HTML模板中,实现内容的动态更新。 总之,jQuery下拉、瀑布流布局和Mustache模板引擎的结合,可以让我们更便捷地实现前端开发中对于网页和布局的需求。 ### 回答3: jQuery下拉、瀑布流和Mustache都是常用的前端技术。 jQuery是一款优秀的JavaScript库,可以简化HTML文档的遍历、事件处理、动画效果等操作。在下拉中,可以利用jQuery监听用户滚动事件,当滚动到特定位置时触发新数据的操作。通过Ajax请求获取数据,再通过jQuery插入到页面中,实现无刷新的数据。 瀑布流是一种网页布局方式,类似于瀑布流的形态,每一块内容依次排列,高度不一,但是整体效果呈现出自然的瀑布流效果。在实现瀑布流布局时,可以借助jQuery的animate()函数来设置元素的位置和动画效果,为页面元素创建瀑布流布局。 Mustache是一种轻量级的逻辑-less模板引擎,用于渲染模板数据到HTML文档。通过Mustache的语法标签,我们可以在HTML代码中插入占位符,然后再通过jQuery获取到数据,将数据和模板结合,最终生成动态内容,并插入到页面中。 综上所述,使用jQuery下拉、瀑布流和Mustache可以实现在网页中实现下拉新数据的功能,并使用瀑布流布局展示数据,最后通过Mustache模板引擎渲染数据到页面中。这样能够提升用户体验和页面的可视性,实现更流畅的数据展示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值