jQuery页面加载开端化常用的三种方法,jquery观看

时间:2019-07-28 09:27来源:2020欧洲杯冠军竞猜官方网站
当页面展开时大家要求实施一些操作,这一年若是大家挑选使用jquery的话,需求重写她的3中艺术,自己以为没什么区 jQuery的观望者情势详解,jquery观看者详解 在jQuery中,on方法可以为成分

当页面展开时大家要求实施一些操作,这一年若是大家挑选使用jquery的话,需求重写她的3中艺术,自己以为没什么区

jQuery的观望者情势详解,jquery观看者详解

在jQuery中,on方法可以为成分绑定事件,trigger方法能够手动触发事件,围绕这2个点子,大家来体会jQuery中的阅览者情势(Observer Pattern)。

■ on方法绑定内置事件,自然触发

比如,我们给页面包车型地铁body成分绑定几个click事件,那样写。

复制代码 代码如下:

 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('body').on('click', function () {
                console.log('被点击了~~');
            });
        });     
    </script>
</head>
<body>
    <h1>hello</h1>
</body>

上述,大家只有一些击body,能力触发click事件。也正是说,当给页面成分绑定内置事件后,事件的触及是在停放事件时有发生的那刻。

■ on方法绑定内置事件,手动触发

使用trigger方法,也得以手动触发成分绑定的放到事件。

     <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('body').on('click', function () {
                console.log('被点击了~~');
            });
            $('body').trigger('click');
        });     
    </script>
以上,不要求点击body,在页面加载完结,body自动触发了click事件。

■ on方法绑定自定义事件,手动触发

咱俩领会,click是jquery内置的风云,那么,是或不是能够自定义事件,并手动触发呢?

复制代码 代码如下:

    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('body').on('someclick', function () {
                console.log('被点击了~~');
            });
            $('body').trigger('someclick');
        });     
    </script>

以上,我们自定义了三个someclick事件,得到的结果和上边一样。

于是,大家开采:我们得感觉成分绑定自定义事件,并且用trigger方法触发该事件。

自然,自定义事件的称呼能够根据"命名空间.自定义事件名称"的花样来写,比方app.someclick,那在大型项目中更加的有用,那样能够有效幸免自定义事件名称抵触。

假若从"发布订阅"那几个角度来看,on方法也就是订阅者、阅览者,trigger方法相当于公布者。

■ 从"异步获取json数据"来体验jQuery观看者形式

在根目录下,有八个data.json的公文。

2020欧洲杯冠军竞猜官方网站,{
    "one" : "Hello",
    "two" : "World"
}
今昔,通过异步的点子来收获json数据。

复制代码 代码如下:

    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.getJSON('data.json', function(data) {
                console.log(data);
            });
        });     
    </script>

2020欧洲杯冠军竞猜官方网站 1 

假设用三个全局变量来抽取异步获取的json数据。

复制代码 代码如下:

    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var data;
            $.getJSON('data.json', function(results) {
                data = results;
            });
            console.log(data);
        });     
    </script>

2020欧洲杯冠军竞猜官方网站 2

此番,大家收获的结果却是undefined,那是干吗?
--因为,当$.getJSON方法还在获取数据的时候,就已经实践console.log(data),而这时data还尚未多少。

哪些化解那几个标题啊?
--借使在$.getJSON方法之外先定义好内需实行的办法,然后在$.getJSON方法的回调函数里确实触发那几个主意,不就一蹴即至了呢?

复制代码 代码如下:

    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.getJSON('data.json', function(results) {
                $(document).trigger('app.myevent', results); //也等于发表
            });
            $(document).on('app.myevent', function(e, results) { //也就是订阅
                console.log(results);
            });
        });     
    </script>

2020欧洲杯冠军竞猜官方网站 3

如上,on方法就好像二个订阅者,它订阅了自定义事件app.myevent;而trigger方法仿佛多个发表者,它揭露事件和参数后,才真正让订阅者方法可以试行。

■ jQuery观看者方式的恢弘方法

为此,大家仍可认为jQuery观看者方式非常写三个扩充方法。

复制代码 代码如下:

    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.getJSON('data.json', function (results) {
                $.publish('app.myevent', results);
            });
            $.subscribe('app.myevent', function(e, results) {
                console.log(results);
            });
        });
        (function($) {
            var o = $({});//自定义事件指标
            $.each({
                trigger: 'publish',
                on: 'subscribe',
                off: 'unsubscribe'
            }, function(key, val) {
                jQuery[val] = function() {
                    o[key].apply(o, arguments);
                };
            });
        })(jQuery);
    </script>

2020欧洲杯冠军竞猜官方网站 4

以上,定义了全局的publish和subscribe方法,大家在其余时候都得以调用。

复制代码 代码如下:

    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.getJSON('data.json', function (results) {
                $.publish('app.myevent', results);
            });
            $.subscribe('app.myevent', function(e, results) {
                $('body').html(
                    results.one
                );
            });
        });

2020欧洲杯冠军竞猜官方网站 5

小结:jQuery的观望者情势,实际上是让on方法绑定的自定义事件先不试行,直到使用trigger方法来触发事件。使用jQuery的观看者格局的补益是:一回发表,数十次订阅。

在jQuery中,on方法可认为成分绑定事件,trigger方法能够手动触发事件,围绕那2个点子,大家来体...

别,看个人喜好了,第三种以为比较老妪能解:

第一种:

复制代码 代码如下:

<script type="text/javascript" src="./js/jquery-1.7.min.js"></script>

复制代码 代码如下:

<script type="text/javascript">
//init method one
$(document).ready(function(){
trace("初步化方法步向");
});
function trace(obj){
console.log(obj);
}
</script>

firefox 按下f12 调节和测量试验 为何不要alert 而选用console.log呢! 那个我们应该相比较清楚吧!
2020欧洲杯冠军竞猜官方网站 6 
第二种:

复制代码 代码如下:

<script type="text/javascript">
//init method one
$(function(){
trace("开始化方法步向二");
});
function trace(obj){
console.log(obj);
}
</script>

2020欧洲杯冠军竞猜官方网站 7 
第三中:

复制代码 代码如下:

<script type="text/javascript" src="./js/jquery-1.7.min.js"></script>
<script type="text/javascript">
//init method one
jQuery(function($){
trace("初步化方法步向三");
});
function trace(obj){
console.log(obj);
}
</script>

2020欧洲杯冠军竞猜官方网站 8 
ps;不用jquery,在页面起始化的艺术,

1.在body里面写onload

2.在本子里面写

复制代码 代码如下:

window.onload=function(){
//要开始化的东西
}

您恐怕感兴趣的篇章:

  • jQuery按需加载轮播图(web前端品质优化)
  • jquery使用EasyUI Tree异步加载JSON数据(生成树)
  • 怎么着缓慢解决jQuery EasyUI 已打开Tab重新加载难题
  • 有关 jQuery Easyui异步加载tree的难点浅析
  • jQuery生成假加载动画效果
  • jquery加载页面包车型客车艺术(页面加载成功就实施)
  • jquery.lazyload 完结图片延迟加载jquery插件
  • Jquery.LazyLoad.js勘误版下载,完毕图片延迟加载插件
  • jquery达成页面加载效果
  • 详解jQuery lazyload 懒加载

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:jQuery页面加载开端化常用的三种方法,jquery观看

关键词: 欧洲杯竞猜