日记整理---->2016-11-22

  这里记录一些关于jquery的一些知识。这里面主要是$().method方法的书写框架以及jquery中each函数的使用。等待太久得来的东西,多半已经不是当初想要的样子了。

一、基于$().method方法的书写

一、框架的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../jquery-3.1.0.js"></script>
    <script type="text/javascript" src="js/app2.js"></script>
    <script type="text/javascript">
        function pageTest() {
            $("#page").paginate({
                alert: "hello world",
                onchange: function(str) {
                    alert(str);
                }
            });
        }
        function eachTest() {
            $("ul li").each(function( index ) {
            console.log( index + ": " + $(this).text() );
            });
        }
    </script>
</head>
<body>
    <div id="page">Hello World</div>
    <button onclick="pageTest()">click me page</button>
    <button onclick="eachTest()">click me each</button>
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
</body>
</html>

二、app2.js的代码:

(function($) {
    $.fn.paginate = function(options) {
        var opts = options;
        return this.each(function() {
            $this = $(this);
            $.fn.draw(opts, $this);
        });
    };
    $.fn.draw = function(data, obj) {
        data.onchange(data.alert);
    };
})(jQuery);

三、运行的效果如下:

  • 点击click me page按钮,弹出hello world的alert框。
  • 点击click me each按钮,控制台打印0: foo 1: bar字样。

二、简单路由的实现

一、主页面的代码huhx3.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../jquery-3.1.0.js"></script>
    <script type="text/javascript" src="js/app3.js"></script>
</head>
<body>
    <ul>
    <li><a href="#/">首页</a></li>
    <li><a href="#/product">产品</a></li>
    <li><a href="#/server">服务</a></li>
</ul>
<div id="content"></div>
</body>
</html>

其中测试中包含的两个碎片页如下:

  • page.html:
<div style="color: red">Hello World</div>
  • product.html:
<div style="background-color: #CCCCCC; text-shadow: 2px 2px 4px red">I love you.</div>

关于js的代码如下:app3.js

function load() {
    var url = window.location.href;
    // get the router
    var index = url.indexOf("#");
    var routeUrl = url.substring(index, url.length);
    alert("routeUrl: " + routeUrl);
    // 比较Router对象,加载页面
    if (routeUrl == "#/server") {
        $("#content").load("page.html");
    } else if (routeUrl == "#/product") {
        $("#content").load("product.html");
    } else {
        $("#content").load("<span>胡红翔</span>");
    }
}

window.addEventListener(‘hashchange‘, function() {
    load();
}, false);

二、运行效果如下:注意到url点击两次,并没有触发hashchange事件。下面我们说一下这个事件,了解这样实现的缺点。

关于,请参考博客:https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

三、回到顶部的js代码

document.documentElement.scrollTop = document.body.scrollTop =0; // 页面回到顶部

四、js中动态添加脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function huhxTest() {
            var script = document.createElement( "script" );
            script.text = "function test() {alert(‘helelo world‘)}";
            document.head.appendChild(script).parentNode.removeChild(script);
        }
    </script>
</head>
<body>
    <button onclick="huhxTest()">click me 1</button>
    <button onclick="test()">click me 2</button>
</body>
</html>

运行效果:点击click me 1之后点击click me 2,会alert出hello world的字样。如果此时刷新,再点击click me 2,没有任何的反应。

alert出hello world的代码并没有包含在页面中,而是出现在以下中。至于原因,不明。

五、js中函数为另一个函数的参数

function funTest(fn, name) {
    return fn(name);
}
var normalFun = function(name) {
    console.log("I love you, " + name);
    return "I love you, " + name;
}
alert(funTest(normalFun, "huhx"));

运行效果:先console出"I love you, huhx"的字样,再alert出此字样。

六、$().load()方法

一、使用方法如下:

$("#content").load("product.html", "", function() {
    alert("hello world");
});

具体的load函数的代码如下:

jQuery.fn.load = function( url, params, callback ) {
    var selector, type, response,
        self = this,
        off = url.indexOf( " " );
    if ( off > -1 ) {
        selector = jQuery.trim( url.slice( off ) );
        url = url.slice( 0, off );
    }
    if ( jQuery.isFunction( params ) ) {
        callback = params;
        params = undefined;
    } else if ( params && typeof params === "object" ) {
        type = "POST";
    }
    if ( self.length > 0 ) {
        jQuery.ajax( {
            url: url,
            type: type || "GET",
            dataType: "html",
            data: params
        } ).done( function( responseText ) {
            response = arguments;
            self.html( selector ?
                jQuery( "<div>" ).append( jQuery.parseHTML( responseText ) ).find( selector ) :
                responseText );
        } ).always( callback && function( jqXHR, status ) {
            self.each( function() {
                callback.apply( this, response || [ jqXHR.responseText, status, jqXHR ] );
            } );
        } );
    }
    return this;
};

可以看到,load有三个参数。第三个callback函数不管成功与否,都会执行。第二个参数是发送请求时的数据。实质上就是根据url,发送ajax的请求,将文件返回的内容通过$().html()添加到相应的元素当中。

友情链接

时间: 07-28

日记整理---->2016-11-22的相关文章

一个运维小白的成长日记(M20-1 2016.7.22)

screen命令: 打开新的screen:         screen -S [SESSION] 加入会话:                screen -x [SESSION] 退出并关闭screen:          exit 剥离当前screen:            Ctrl+a,d 显示所有已经打开的screen:       screen ls 恢复某screen:             screen -r [SESSION] 重点: (1)当使用系统时只有一个screen请

2016.11.22经验积累(1.item长按与单机,2调用联系人.3.LayoutInflater获取方式)

很早之前就想建立一个微博,记录一下每天工作遇到的问题,第一是为了加深印象,第二是为了给遇见类似问题的同志提供思路.现在微博审批通过了,非常高兴. 1.listView长按事件返回值,之前一直以为是鸡肋,没啥用.昨天项目经理让加一个长按删除功能,结果长按同时触发单机进详情页的动作,断点跑了半天,最后百度,结果让我 吐了一口老血. 如何破:修改长按监听返回值.list长按返回值:false同时触发点击与双击,true只触发双击. 2.调用系统联系人,开始找了系统里封装的代码贴过来,结果测试提bug说

【2016.11.22】css实现几个效果

1.阴影box-shadow 语法:box-shadow: h-shadow v-shadow blur spread color inset; h-shadow必需.水平阴影的位置.允许负值. v-shadow必需.垂直阴影的位置.允许负值. blur可选.模糊距离.但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊: spread可选.阴影的尺寸. color可选.阴影的颜色.请参阅 CSS 颜色值.如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致

[官方软件] Easy Sysprep v4.3.29.602 【系统封装部署利器】(2016.01.22)--skyfree大神

[官方软件] Easy Sysprep v4.3.29.602 [系统封装部署利器](2016.01.22) Skyfree 发表于 2016-1-22 13:55:55 https://www.itsk.com/forum.php?mod=viewthread&tid=362766&highlight=Easy%2BSysprep [官方软件] Easy Sysprep v4.3.29.602 [系统封装部署利器](2016.01.22) [Easy Sysprep]概述:Easy Sy

每周进度及工作量统计——2016.11.24-2016.11.30

项目:连连看游戏 项目类型:四人小组项目 小组名称:天天向上 小组成员:王森.张政,张金生,栾骄阳 项目改进:final版本研发和维护 项目预期时间:2016.9.10-2016.12.8 2016.11.26-2016.11.27 C类别 C内容 S开始时间 E结束时间 I间隔 T净时间 P预计时间 分析 讨论  13:24  13:43  0  19  20   设计  13:43  14:04  0  21  30 编码 功能优化  14:46  16:51  26  99  120 文档

informatica 学习日记整理

1. INFORMATICA CLIENT的使用 1.1 Repository Manager 的使用 1.1.1 创建Repository. 前提: a. 在ODBC数据源管理器中新建一个数据源连接至你要创建Repository的数据库(例:jzjxdev) b. 要在你要连接的数据库中新建一个用户(例:name: ETL password: ETL) 现在你可以创建一个Repository了.选择Repository – Create Repository,输入Repository Name

“耐撕”团队 2016.3.22 站立会议

时间:2016.03.22 ① :18:00--18:25   ②18:40--19:00   总计45分钟. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:http://www.cnblogs.com/charliePU/), Q 齐嘉亮(博客:http://www.cnblogs.com/dendroaspis-polylepis/), L  刘伟硕(博客:http://www.cnblogs.com/We

2016/11/30 (内置函数)

---------------------------------------------------------分割线---------------------------------- 随机验证码 1 生成一个随机的验证码,65-90 2 #数字转化为字母:chr(数字) 3 import random 4 5 temp = "" 6 for i in range(4): 7 num = random.randrange(0, 4) 8 if num == 3 or num ==

#有如下值集合[11,22,33,44,55,66,77,88,99,90...],将所有大于66值保存至字典的一个key中,将小于66的值保存至大二个key的值

1 #!/usr/bin/env python 2 #有如下值集合[11,22,33,44,55,66,77,88,99,90...],将所有大于66值保存至字典的一个key中,将小于66的值保存至大二个key的值 3 4 li = [11,22,33,44,55,66,77,88,99,90] 5 person = {">66":[],"<=66":[]} 6 for i,j in enumerate(li,0) : 7 8 if int(j) >

lambd的使用ret = filter(lambda x : x &gt; 22 ,[11,22,33,44])

1 #!/usr/bin/env python 2 #def f1(x) : 3 # return x > 22 4 ret = filter(lambda x : x > 22 ,[11,22,33,44]) 5 print(ret) 6 for i in ret : 7 print(i)