javascript事件传播（三） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event</title>
    <style>
        #big {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }

         #small {
            width: 50px;
            height: 50px;
            background-color: #ccc;
        }


    </style>
</head>
<body>
    <div id="big">
        <div id="small"></div>
    </div>

    <script>
        var big = document.getElementById('big');
        var small = document.getElementById('small');
        big.addEventListener('click', function() {
            alert('big');
        }, false);


       small.addEventListener('click', function(event) {
            event.stopPropagation(); //停止冒泡
            alert('small');
        }, false);

    </script>
</body>
</html>

javascript操作DOM节点（一）

  • 点击按钮后，对文本进行排序后重新显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sort list</title>
</head>
<body>
    <ul id="list">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>

    <button id="sort-btn">sort</button>

    <script>
       var btn = document.getElementById('sort-btn') ;

       btn.addEventListener('click',sortList, false);


       function sortList() {
         sortKids('list');
       }

       function sortKids(e) {
          if (typeof e === 'string') e = document.getElementById(e);

          var kids = [];
          for (var x = e.firstChild; x != null; x = x.nextSibling) {
            if (x.nodeType == 1) { 
              kids.push(x);
            }
          }

          kids.sort(function(n, m) {
              var nv = n.firstChild;
              var mv = m.firstChild;
              if (nv > mv) return -1;
              return 1;
          });

          for (var i = 0; i < kids.length; i++) {
                e.appendChild(kids[i]);
          }

       }
    </script>
</body>
</html>

Javascript面向对象编程（二） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript面向对象编程</title>
</head>
<body>
   <script>

     //函数的闭包
    (function(win) {
        var Person = function(name) {
            var _name = name; //局部变量外部不可访问,模拟私有变量

            if (!Person.prototype.setName) { //保证只执行一次
                Person.prototype.setName = function(name) {
                    _name = name;
                }

                Person.prototype.getName = function(name) {
                    return _name;
                }

                //字面量定义不能用在函数体内
                /*Person.prototype = {
                    constructor: Person, 
                    setName: function(name) {
                        _name = name;
                    },
                    getName: function() {
                        return _name;
                    }
                }*/

            }

        }


        win['Person']= Person;
     })(window)


     var p = new Person('hello');
     p.setName('world');
     alert(p.getName());

   </script> 
</body>
</html>

LESS语法学习（二）

1. 变量

styles.less

@charset "utf-8";
@test-width:100px;
@test-height:100px;

//变量以@开头，例如@变量:值
#box {
    width:@test-width;
    height:@test-height;
    background-color:red;
}

Alt text

2. 混合

@charset "utf-8";
@test-width:100px;
@test-height:100px;

//变量以@开头，例如@变量
#box {
    width:@test-width;
    height:@test-height;
    background-color:red;

    .border;
    .text(25px); //如果用默认值，必须带括号,如.text();
}

//混合
.border {
    border:5px solid blue;
}

//混合-可带参数,默认15px
.text(@font-size) {
    font-size:@font-size;
    color:yellow;
}

Alt text

3. 匹配模式

.triangle {
    .triangle(bottom,red);
}


//匹配模式
//公共的，@_是固定格式
.triangle(@_, @color:blue,@width:20px) {
    width:0;
    border-style:solid;
}

//上三角
.triangle(top, @color:blue,@width:20px) {
    border-width:@width;
    border-color:transparent transparent @color transparent;
}
//下三角
.triangle(bottom, @color:blue,@width:20px) {
    border-width:@width;
    border-color:@color transparent transparent transparent;
}

Alt text

4. 运算

@test-width:100px;
@test-height:100px;


#box {
    width:@test-width + 10*2; //运算操作
    height:@test-height;
    background-color:red;
}

5. 嵌套操作

html

 <ul class="list">
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
 </ul>

less

.list {
    width:600px;
    list-style:none;
    li {
        margin:5px;
        padding:5px;
        background-color:#ccc;
    }

    a {
      //&表示上一层元素
       &:hover {
        color:red;
       } 
    }

    span {
        float:right;
    }
}

Alt text

6. 更多用法http://lesscss.org/

LESS初体验（一）

less是什么

LESS是一种由Alexis Sellier设计的动态层叠样式表语言，受Sass所影响，同时也影响了Sass的新语法：SCSS。

LESS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。

在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制

Less之于Css相当于Jquery至于JavaScript

编译工具

  • koala
  • Nodejs库
  • 浏览器端使用

使用koala

下载地址：http://koala-app.com/index-zh.html
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Less demo01</title>
    <link rel="stylesheet" href="style/styles.css">
</head>
<body>
 hello less!!   
</body>
</html>

styles.less

@charset "utf-8";
@title-size:40px;

body {
    background-color:red;
    font-size:@title-size;
}

koala自动编译styles.css