CSS的display小记-jquery学习(三)： JQuery中阻止事...-码农干货系列【6】--javascript异步编程之:世界上最短的Promise库

当前位置: 编程技术>WEB前端

本页文章导读:

▪CSS的display小记最近开始了解一些CSS的基本用法，巩固下自己的前端知识积累。我们经常在样式中做类似如下的定义：display:inlinedisplay:blockdisplay:none 这.........

▪jquery学习(三)： JQuery中阻止事件冒泡方式及其区别 JQuery 提供了两种方式来阻止事件冒泡。方式一：event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropa.........

▪码农干货系列【6】--javascript异步编程之:世界上最短的Promise库类库源码 var Promise = function () { this.thens = []; }; Promise.prototype = { resolve: function () { var t = this.thens.shift(), n; t && (n = t.apply(null, arguments), n instanceof Promise &am.........

[1]CSS的display小记

来源: 发布时间: 2013-11-06

最近开始了解一些CSS的基本用法，巩固下自己的前端知识积累。
我们经常在样式中做类似如下的定义：

display:inline
display:block
display:none

这里的 display:inline 可以让块级元素，变为行内元素，且元素前后没有换行符；比如：

默认情况下，这2个div各占一行，也就是显示为上下两行，当加上样式后：

这样2个div就能显示在同一行了。说实话，我以前都是用浮动来控制的，嘿嘿嘿。

和 display:inline 对应的是 display:block。block 将元素显示为块级元素，且元素前后会带有换行符。比如，span就是行内元素，如果加了display:block 样式之后，这2个span就会分两行显示了：

display:inline经常用在将多个div像span一样显示在一行，或者在 <ul> 中多个<li>显示为一行，因为ul也是块级元素，一个li占一行。

本文链接

[2]jquery学习(三)： JQuery中阻止事件冒泡方式及其区别

来源: 互联网发布时间: 2013-11-06

JQuery 提供了两种方式来阻止事件冒泡。

方式一：event.stopPropagation();

        $("#div1").mousedown(function(event){
            event.stopPropagation();
        });

方式二：return false;

        $("#div1").mousedown(function(event){
            return false;
        });

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

一般使用方式一

场景应用： Google 和百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。

示例测试代码：当文本输入框获取焦点后，在div1的mousedown事件中采用 event.stopPropagation(); 代码，我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" /> 

<title></title>
<script language="JavaScript" type="text/javascript" src=/blog_article/"jquery-1.3.2.min.js"></script>/index.html
<script>
    $(document).ready(function(){
        $("#div1").mousedown(function(event){
            //event.stopPropagation();
            return false;
        });
        $("#div2").mousedown(function(event){
            alert("trigger mousedown event of rootDiv");
        });
    });
</script>
</head>
<body>
    <div id="rootDiv" style="position:relative;left:400px;top:200px;">
        <div>1.单击输入框，使输入框获取焦点：</div>
        <input id="input1" style="width:250px;" type="text"></input>
        <div id="div2">
            <div id="div1" style="width:200px;height:200px;background-color:red;"><br><br>2.然后再单击这里</div>
        </div>
    </div>
</body>
</html>

作者：allenzhangfan 发表于2013-2-23 16:20:56 原文链接

阅读：13 评论：0 查看评论

[3]码农干货系列【6】--javascript异步编程之:世界上最短的Promise库

来源: 发布时间: 2013-11-06

类库源码

使用方式

类库思路

主要的思路就是将主Promise下的任务列表(thens)挂靠到子Promise下。当然该库可以封装至ajax、domready等耗时的场景当中，使其可以”thenable"，如：

$$.ajax("assets/xxx.php", {
method: "GET",
data: "q=1&rand=" + Math.random()
}).then(function (msg) {
alert(msg.responseText)
});.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }have fun! = =!

本文链接