<div></div>
<script>
  $(document).ready(function () {
    $("div").html("hello world");
  })
</script>

第一种方式
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

第二种方式
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

//找到第二个input，通过attr获取属性value的值
$("input:eq(1)").attr('value')

//找到第一个input，通过attr设置属性value的值
$("input:first").attr('value', '.attr( attributeName, value )')

//找到第三个input，通过使用一个函数来设置属性
//可以根据该元素上的其它属性值返回最终所需的属性值
//例如，我们可以把新的值与现有的值联系在一起：
$("input:eq(2)").attr('value', function (i, val) {
  return '通过function设置' + val
})

//找到第四个input，通过使用removeAttr删除属性
$("input:eq(3)").removeAttr('value')

<div class="left first-div">
  <div class="box">
    <a>:first-child</a>
    <a>第二个元素</a>
    <a>:last-child</a>
  </div>
</div>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
	$(document).ready(function(){
		$(".box a:first").html("替换元素");
	})
</script>

//多种写法设置颜色
$('.fourth').css("background-color","red");
$('.fifth').css("backgroundColor","yellow");

//获取到指定元素的宽度，在回调返回宽度值
//通过处理这个value，重新设置新的宽度
$('.sixth').css("width",function(index,value){
  value = value.split('px');
  return (Number(value[0])+50)+value[1];
})

//合并设置,通过对象传设置多个样式
$('.seventh').css({
  "font-size":"15px",
  "border":"1px solid red"
})

var $body = $('body');
$body.on('click', function () {
  //通过jQuery生成div元素节点
  var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
  $body.append(div)
})

$("#bt1").on('click', function () {
  //在匹配test1元素集合中的每个元素前面插入p元素
  $(".test1").before('<p>before,在匹配元素之前增加</p>', '<p>多参数</p>')
})
$("#bt2").on('click', function () {
  //在匹配test1元素集合中的每个元素后面插入p元素
  $(".test2").after('<p>after,在匹配元素之后增加</p>', '<p>多参数</p>')
})

<div class="hello"><p>慕课网</p></div>
//通过empty处理
$('.hello').empty()

//结果：<p>慕课网</p>被移除
<div class="hello"></div>

<div class="hello"><p>慕课网</p></div>

//通过remove处理
$('.hello').remove()
//结果：
<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//执行操作})

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>
$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

<p>p元素</p>
$('p').wrap('<div></div>')
//最后结果
<div>
    <p>p元素</p>
</div>

$('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样
})

<p>p元素</p>
<p>p元素</p>
$('p').wrapAll('<div></div>')
//最后结果
<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

<p>p元素</p>
<p>p元素</p>
$('p').wrapAll(function() {
    return '<div><div/>'; 
})
//最后结果
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

<div>p元素</div>
<div>p元素</div>
$('div').wrapInner('<p></p>')
//最后结果
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

<div>p元素</div>
<div>p元素</div>
$('div').wrapInner(function() {
    return '<p></p>'; 
})
//最后结果
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

$("#bt1").click(function() {
  //找到所有class=div的元素节点，然后找到其对应的子元素，并且加上一个红色边框
  $('.div').children().css('border','3px solid red')
})

$("#bt2").click(function() {
  //找到所有class=div的元素
 //找到其对应的子元素，然后筛选出最后一个，给边宽加上颜色
 $('.div').children(':last').css('border', '3px solid blue')
})

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
查找ul的父元素div, $(ul).parent()，就是这样简单的表达

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
在li节点上找到祖 辈元素div， 这里可以用$("li").parents()方法

$("button:first").click(function() {
   $('.item-2').next().css('border','2px solid red')
})

//找到class=item-2的所有兄弟节点然后给每个li加上红色的边
$("button:first").click(function() {
   $('.item-2').siblings().css('border', '2px solid red')
})

$("button:last").click(function() {
    //找到class=item-2的所有兄弟节点
    //然后筛选出最后一个，加上蓝色的边
   $('.item-2').siblings(':last').css('border', '2px solid blue')
})

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>

$("button:first").click(function () {
  //遍历所有的li
  //修改每个li内的字体颜色
  $("li").each(function (index, element) {
    $(this).css('color', 'red')
  })
})

$("button:last").click(function () {
  //遍历所有的li
  //修改偶数li内的字体颜色
  $("li").each(function (index, element) {
    if (index % 2) {
      $(this).css('color', 'blue')
    }
  })
})

备注：index 索引；element是对应的li节点 li；this 指向的是li。

<div id="test">点击触发<div>
$("ele").click(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").click()  //手动指定触发事件 
});

$(ele).mouseenter(function(){
     $(this).css("background", '#bbffaa');
 })
$(ele).mouseleave(function(){
    $(this).css("background", 'red');
})

// hover()方法是同时绑定 mouseenter和 mouseleave事件。
// 我们可以用它来简单地应用在 鼠标在元素上行为
$("p").hover(
   function() {
       $(this).css("background", 'red');
      },
     function() {
         $(this).css("background", '#bbffaa');
     }
);

//input聚焦
//给input元素增加一个边框
  $("input:first").focusin(function() {
       $(this).css('border','2px solid red')
})

//不同函数传递数据
function fn(e) {
   $(this).val(e.data)
}
function a() {
   $("input:last").focusin('慕课网', fn)
}
a();

//input失去焦点
//给input元素增加一个边框
  $("input:first").focusout(function() {
       $(this).css('border','2px solid red')
})

//不同函数传递数据
function fn(e) {
   $(this).val(e.data)
}
function a() {
   $("input:last").focusout('慕课网', fn)
}
a();

$(".aaron").focus(function() {
    $(this).css('border', '2px solid red')
})
$(".aaron1").focusin(function() {
   $(this).find('input').val('冒泡捕获了focusin事件')
})

$(".aaron3").blur(function() {
   $(this).css('border', '2px solid red')
})
$(".aaron4").focusout(function() {
   $(this).find('input').val('冒泡捕获了focusout事件')
})

//监听input值的改变
$('.target1').change(function (e) {
  $("#result").html(e.target.value)
});

//监听select：
$(".target2").change(function (e) {
  $("#result").html(e.target.value)
})

//监听textarea：
$(".target3").change(function (e) {
  $("#result").html(e.target.value)
})

//监听input元素中value的选中
//触发元素的select事件
$("input").select(function (e) {
  alert(e.target.value)
})
$("#bt1").click(function () {
  $("input").select();
})

//监听textarea元素中value的选中
$('textarea').select(function (e) {
  alert(e.target.value);
});

//回车键或者点击提交表单
$('#target1').submit(function (e) {
  alert('捕获提交表达动作,不阻止页面跳转')
});

//回车键或者点击提交表单,禁止浏览器默认跳转：
$('#target2').submit(function () {
  alert('捕获提交表达动作,阻止页面跳转')
  return false;
});

//监听键盘按键
//获取输入的值
$('.target1').keydown(function (e) {
  $("em:first").text(e.target.value)
});

//监听键盘按键
//获取输入的值
$('.target2').keyup(function (e) {
  $("em:last").text(e.target.value)
});

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

<h2>on事件委托</h2>
<div class="left">
  <div class="aaron">
    <a>点击这里</a>
  </div>
</div>
<script type="text/javascript">
  //给body绑定一个click事件
  //没有直接a元素绑定点击事件
  //通过委托机制，点击a元素的时候，事件触发
  $('body').on('click', 'a', function (e) {
    alert(e.target.textContent)
  })
</script>

var n = 0;
//绑定事件
$(".aaron:first").on('mousedown mouseup', function (e) {
  $(this).text('触发类型:' + (e.type) + ",次数" + ++n)
    ++n;
})
//删除事件
$("button:first").click(function () {
  $(".aaron:first").off('mousedown')
})

var n = 0;
//绑定事件
$(".aaron:last").on('mousedown mouseup', function (e) {
  $(this).text('触发类型:' + (e.type) + ",次数" + ++n)
    ++n;
})
//删除事件
$("button:last").click(function () {
  $(".aaron:last").off()
})

<h3>事件委托，通过事件对象区别触发元素</h3>
<div class="left">
  <div class="aaron">
    <ul>
      <li>点击：触发一</li>
      <li>点击：触发二</li>
      <li>点击：触发三</li>
      <li>点击：触发四</li>
    </ul>
  </div>
</div>

<script type="text/javascript">
  //多事件绑定一
  $("ul").on('click', function (e) {
    alert('触发的元素是内容是: ' + e.target.textContent)
  })
</script>

$("a").click(function(event) {
  alert(event.type); // "click"事件
});

<h2>自定义事件trigger</h2>
<div class="left">
  <div><span></span><span>0</span>点击次数</div>
  <button>直接点击</button>
  <button>通过自定义点击</button>
</div>
<script type="text/javascript">
  //点击更新次数
  $("button:first").click(function (event, bottonName) {
    bottonName = bottonName || 'first';
    update($("span:first"), $("span:last"), bottonName);
  });

  //通过自定义事件调用，更新次数
  $("button:last").click(function () {
    $("button:first").trigger('click', 'last');
  });

  function update(first, last, bottonName) {
    first.text(bottonName);
    var n = parseInt(last.text(), 10);
    last.text(n + 1);
  }
</script>

<h4>测试一</h4>
<div id="a1">hide操作</div>
<button>直接hide</button>
<script type="text/javascript">
  //点击buttom1 直接隐藏
  $("button:first").click(function () {
    $("#a1").hide()
  });
</script>

<h4>测试一</h4>
<div id="a2">hide动画操作</div>
<button>hide带动画</button>
<script type="text/javascript">
  //点击buttom2 执行动画隐藏
  $("button:last").click(function () {
    $("#a2").hide({
      duration: 3000,
      complete: function () {
        alert('执行3000ms动画完毕')
      }
    })
  });
</script>

//点击button
//执行3秒隐藏
//执行3秒显示
$("button").click(function () {
  $("#a1").hide(3000).show(3000)
});

<h2>通过toggle切换显示与隐藏</h2>
<div class="left">显示到隐藏</div>
<div class="right">隐藏到显示</div>
<button>直接show-hide动画</button>
<button>直接hide-show动画</button>
<script type="text/javascript">
  $("button:first").click(function () {
    $(".left").toggle(3000)
  });
</script>

<script type="text/javascript">
  $("button:last").click(function () {
    $(".right").toggle(3000)
  });
</script>

<h2>slideDown</h2>
<div class="left">
  <h4>测试一</h4>
  <div id="a1">hide-show</div>
  <button>点击slideDown显示动画</button>
</div>
<script type="text/javascript">
  //点击button
  //执行3秒隐藏
  //执行3秒显示
  $("button:first").click(function () {
    $("#a1").slideDown(3000)
  });
</script>

<div class="right">
  <h4>测试二</h4>
  <div id="a2">hide-show</div>
  <button>点击slideDown执行回调</button>
</div>
<script type="text/javascript">
  //点击button
  //执行3秒隐藏
  //执行3秒显示
  $("button:last").click(function () {
    $("#a2").slideDown(3000, function () {
      alert('动画执行结束')
    })
  });
</script>

<h2>slideUp</h2>
<div class="left">
  <h4>测试一</h4>
  <div id="a1"></div>
  <button>点击slideUp隐藏动画</button>
</div>
<script type="text/javascript">
  //点击button
  //执行3秒隐藏
  //执行3秒显示
  $("button:first").click(function () {
    $("#a1").slideUp(3000)
  });
</script>

<div class="right">
  <h4>测试二</h4>
  <div id="a2"></div>
  <button>点击slideUp执行回调</button>
</div>
<script type="text/javascript">
  //点击button
  //执行3秒隐藏
  //执行3秒显示
  $("button:last").click(function () {
    $("#a2").slideUp(3000, function () {
      alert('动画执行结束')
    })
  });
</script>

<h2>slideToggle</h2>
<div class="left">
  <div id="a1"></div>
  <button>点击slideToggle上下卷滚切换</button>
</div>
<script type="text/javascript">
  $("button").click(function () {
    $("#a1").slideToggle(3000)
  });
</script>

<h2>fadeOut</h2>
<p>测试文字淡入效果</p>
<p>慕课网,专注分享</p>
淡出的隐藏效果：
<select id="animation">
  <option value="1">fadeOut( )</option>
  <option value="2">fadeOut( "slow" )</option>
  <option value="3">fadeOut( 3000 )</option>
  <option value="4">fadeOut( 1000, complete )</option>
  <option value="5">fadeOut( 1000, "linear" )</option>
  <option value="6">fadeOut( options )</option>
</select>
<input id="btnFadeOut" type="button" value="点击淡出隐藏" />
<input id="btnShow" type="button" value="显示" />

<script type="text/javascript">
  //【显示】按钮
  $("#btnShow").click(function () {
    $("p").show();
  });

  //【隐藏】按钮
  $("#btnFadeOut").click(function () {
    var v = $("#animation").val();
    if (v == "1") {
      $("p").fadeOut();
    } else if (v == "2") {
      $("p").fadeOut("slow");
    } else if (v == "3") {
      $("p").fadeOut(3000);
    } else if (v == "4") {
      $("p").fadeOut(2000, function () {
        alert("隐藏完毕!");
      });
    } else if (v == "5") {
      $("p").fadeOut(1000, "linear");
    } else if (v == "6") {
      $("p").fadeOut({
        duration: 1000
      });
    }
  });
</script>

<h2>fadeTo</h2>
<p>测试文字透明度效果</p>
<p>慕课网,专注分享</p>
透明度的设置效果：
<select id="animation">
  <option value="1">fadeTo( "slow" ,0.5 )</option>
  <option value="2">fadeTo( 1000 ,0.2 )</option>
  <option value="3">fadeTo( 1000 ,0.9 ,complete)</option>
</select>
<input id="btnFadeSwitch" type="button" value="点击切换显示/隐藏">
<script type="text/javascript">
  //【切换显示/隐藏】按钮
  $("#btnFadeSwitch").click(function () {
    var v = $("#animation").val();
    if (v == "1") {
      $("p").fadeTo("slow", 0.5);
    } else if (v == "2") {
      $("p").fadeTo(1000, 0.2);
    } else if (v == "3") {
      $("p").fadeTo(1000, 0.9, function () {
        alert('完成')
      });
    }
  });
</script>

$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

<h2>animate(上)</h2>
<p>慕课网,专注分享</p>
<div id="aaron">内部动画</div>
点击观察动画效果：
<select id="animation">
  <option value="1">动画1</option>
  <option value="2">动画2</option>
  <option value="3">动画3</option>
  <option value="4">动画4</option>
</select>
<input id="exec" type="button" value="执行动画">

<script type="text/javascript">
  $("#exec").click(function () {
    var v = $("#animation").val();
    var $aaron = $("#aaron");
    if (v == "1") {
      // 数值的单位默认是px
      $aaron.animate({
        width: 300,
        height: 300
      });
    } else if (v == "2") {
      // 在现有高度的基础上增加100px
      $aaron.animate({
        width: "+=100px",
        height: "+=100px"
      });
    } else if (v == "3") {
      $aaron.animate({
        fontSize: "5em"
      }, 2000, function () {
        alert("动画 fontSize执行完毕!");
      });
    } else if (v == "4") {
      //通过toggle参数切换高度
      $aaron.animate({
        width: "toggle"
      });
    }
  });
</script>

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

<h2>stop</h2>
<p>慕课网,专注分享</p>
<div id="aaron">内部动画</div>
<input id="exec" type="button" value="执行动画"><br /><br /> 点击观察动画效果：
<select id="animation">
  <option value="1">stop()</option>
  <option value="2">stop(true)</option>
  <option value="3">stop(true,true)</option>
</select>
<a></a>
<input id="stop" type="button" value="停止动画">
<script type="text/javascript">
  //点击执行动画
  $("#exec").click(function () {
    $("#aaron").animate({
      height: 300
    }, 5000)
    $("#aaron").animate({
      width: 300
    }, 5000)
    $("#aaron").animate({
      opacity: 0.6
    }, 2000)
  })
	
	//点击停止动画
  $("#stop").click(function () {
    var v = $("#animation").val();
    var $aaron = $("#aaron");
    if (v == "1") {
      //当前当前动画
      $aaron.stop()
    } else if (v == "2") {
      //停止所以队列
      $aaron.stop(true)
    } else if (v == "3") {
      //停止动画，直接跳到当前动画的结束
      $aaron.stop(true, true)
    }
  });
</script>

<h2>each方法</h2>
<p>慕课网,专注分享</p>
<div id="aaron"></div>
点击观察结果：
<select id="animation">
  <option value="1">each数组</option>
  <option value="2">each对象</option>
</select>
<input id="exec" type="button" value="执行动画">
<script type="text/javascript">
  $("#exec").click(function () {
    var v = $("#animation").val();
    var $aaron = $("#aaron");
    $aaron.empty();
    if (v == "1") {
      // 遍历数组元素
      $.each(['Aaron', '慕课网'], function (i, item) {
        $aaron.append("索引=" + i + "; 元素=" + item);
      });
    } else if (v == "2") {
      // 遍历对象属性
      $.each({
        name: "张三",
        age: 18
      }, function (property, value) {
        $aaron.append("属性名=" + property + "; 属性值=" + value);
      });
    }
  });
</script>

$("#exec1").click(function () {
  alert("值的长度：" + $("#results1").val().length)
});

$("#exec2").click(function () {
  alert("值的长度：" + $.trim($("#results2").val()).length)
});

<h2>index方法</h2>
<ul>
  <a></a>
  <a></a>
  <li id="test1">1</li>
  <li id="test2">2</li>
  <li id="test3">3</li>
</ul>
<ul>
  <li id="test4">4</li>
  <li id="test5">5</li>
  <li id="test6">6</li>
</ul>
<select id="animation">
  <option value="1">index无参数</option>
  <option value="2">index传递dom</option>
  <option value="3">index传递jQuery对象</option>
</select>
<input id="exec" type="button" value="点击执行">
索引结果：
<span></span>
<script type="text/javascript">
  $("#exec").click(function () {
    var v = $("#animation").val();
    var $span = $("span");
    $span.empty();
    if (v == "1") {
      //找到第一个li的同辈节点中的索引位置
      $span.text($("li").index())
    } else if (v == "2") {
      //通过传递dom查找
      $span.text($("li").index(document.getElementById("test5")))
    } else if (v == "3") {
      //通过传递jQuery对象查找
      $span.text($("li").index($("#test6")))
    }
  });
</script>

$(function () {
  $("#btnShow").bind("click", function () {
    var $this = $(this);
    $("ul")
      .html("<img src='PSD/img/demo1.png' alt=''/>")
      .load("http://www.imooc.com/data/fruit_part.html", function () {
        $this.attr("disabled", "true");
      });
  })
});

<div id="divtest">
  <div class="title">
    <span class="fl">我最喜欢的一项运动</span>
    <span class="fr">
      <input id="btnShow" type="button" value="加载" />
    </span>
  </div>
  <ul></ul>
</div>

<script type="text/javascript">
  $(function () {
    $("#btnShow").bind("click", function () {
      var $this = $(this);
      $.getJSON("demo.json", function (data) {
        $this.attr("disabled", "true");
        $.each(data, function (index, sport) {
          if (index == 3)
            $("ul").append("<li>" + sport["name"] + "</li>");
        });

      });
    });
  });
</script>

[
  {
    "name": "足球"
  },
  {
    "name": "散步"
  },
  {
    "name": "篮球"
  },
  {
    "name": "乒乓球"
  },
  {
    "name": "骑自行车"
  }
]

$(function () {
  $("#btnShow").bind("click", function () {
    var $this = $(this);
    $.getScript('http://www.imooc.com/data/sport_f.js', function () {
      $this.attr("disabled", "true");
    });
  })
});

$(function () {
  $("#btnShow").bind("click", function () {
    var $this = $(this);
    $.get("demo.json", function (data) {
      $this.attr("disabled", "true");
      $("ul").append("<li>我的名字叫：" + data.name + "</li>");
      $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
    }, "json");
  })
});

$(function () {
  $("#btnCheck").bind("click", function () {
    $.post("demo.php", {
        num: $("#txtNumber").val()
      },
      function (data) {
        $("ul").append("<li>你输入的<b>  " +
          $("#txtNumber").val() + " </b>是<b> " +
          data + " </b></li>");
      });
  })
});

<div id="divtest">
  <div class="title">
    <span class="fl">我的个人资料</span>
    <span class="fr">
      <input id="btnAction" type="button" value="序列化" />
    </span>
  </div>
  <form action="">
    <ul>
      <li>姓名：<input name="Text1" type="text" size="12" /></li>
      <li>
        <select name="Select1">
          <option value="0">男</option>
          <option value="1">女</option>
        </select>
      </li>
      <li><input name="Checkbox1" type="checkbox" />资料是否可见 </li>
      <li id="litest"></li>
    </ul>
  </form>
</div>

<script type="text/javascript">
  $(function () {
    $("#btnAction").bind("click", function () {
      $("#litest").html($("form").serialize());
    })
  })
</script>

<div id="divtest">
  <div class="title">
    <span class="fl">加载一段文字</span>
    <span class="fr">
			<input type="button" id="btnShow" value="加载" />
		</span>
  </div>
  <ul></ul>
</div>

<script>
  $(function () {
    $("#btnShow").bind("click", function () {
      var that = $(this);
      $.ajax({
        type: "get",
        url: "demo.txt",
        dataType: "text",
        success: function (data) {
          that.attr("disabled", "true");
          $("ul").append(data);
        }
      });
    })
  })
</script>

<div id="divtest">
  <div class="title">
    <span class="fl">加载一段文字</span>
    <span class="fr">
			<input type="button" id="btnShow01" value="加载1" />
			<input type="button" id="btnShow02" value="加载2" />
		</span>
  </div>
  <ul></ul>
</div>

<script>
  $(function () {
    $.ajaxSetup({
      dataType: "text",
      success: function (data) {
        $("ul").empty().append(data);
      }
    });
    $("#btnShow01").bind("click", function () {
      $.ajax({
        type: "get",
        url: "demo.txt",
        async: true
      });
    });
    $("#btnShow02").bind("click", function () {
      $.ajax({
        type: "get",
        url: "demo1.txt",
        async: true
      });
    })
  })
</script>

<div id="divtest">
  <div class="title">
    <span class="fl">加载一段文字</span>
    <span class="fr">
      <input id="btnShow" type="button" value="加载" />
    </span>
  </div>
  <ul>
    <li id="divload"></li>
  </ul>
</div>

<script type="text/javascript">
  $(function () {
    $('#divload').ajaxStart(function () {
      $(this).html("正在请求数据...");
    });
    $('#divload').ajaxStop(function () {
      $(this).html("数据请求完成！");
    });
    $("#btnShow").bind("click", function () {
      var $this = $(this);
      $.ajax({
        url: "demo.json",
        dataType: "json",
        success: function (data) {
          $this.attr("disabled", "true");
          $("ul").append("<li>我的名字叫：" + data.name + "</li>");
          $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
        }
      });
    })
  });
</script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
      #app {
        width: 640px;
        height: 1136px;
        background-color: green;
        color: #fff;
        font-size: 150px;
        text-align: center;
        font-family: "微软雅黑";
      }
    </style>
  </head>
  <body>
    <div id="app">
      hello Mobile
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=320" />
    <title>Test</title>
    <style>
      body {
        margin: 0;
      }
      #app {
        width: 320px;
        height: 568px;
        background-color: green;
        color: #fff;
        text-align: center;
        font-family: "微软雅黑";
      }
    </style>
  </head>
  <body>
    <div id="app">
      hello Mobile
    </div>
  </body>
</html>

.folder li {
  position: relative;
  padding: 8px 0 8px 15px;
  color: #FFFFFF;
  cursor: pointer;
}
.folder li + li:before {
  position: absolute;
  top: -1px;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  border-top: 1px solid #ddd;
  transform: scaleY(0.5);
}

/*单行文本溢出*/
.inaline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*多行文本溢出*/
.intwoline {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

var regs = /\s.+/
var str = "this is dog stil here"
// thishaha
 console.log(str.replace(regs,"haha"))

var  reg=/^\s*$/;
if(reg.test(value)){
  alert('请输入有效值');
  return false;
}

var reg = /\w+/;
var str='fengxiong';
alert(reg.exec(str));

var reg = /\w+/;
var str='.className';
alert(reg.exec(str));

var reg = /\w+/;
var str='正则教程';
alert(reg.exec(str));

var reg = /\W+/;
var str='正则教程';
alert(reg.exec(str));

function tele(tel) {
  if (tel.search(/^1[34578]\d{9}$/g) > -1) {
    console.log("1");
  } else {
    console.log("0");
  }
}
tele("13456799014");

function tele(tel) {
  return /^1[34578]\d{9}$/g.test(tel);
}
console.log(tele("13456799014"));

function contain(str) {
  var reg = /\d/g;
  return reg.test(str);
}
console.log(contain("fds3af"));

function contain(str) {
   return /([a-zA-Z])\1/.test(str);
}
console.log(contain("fdsaaf"));

function contain(str) {
  return /[a,e,i,o,u]$/i.test(str);
}
console.log(contain("fdsaaa"));

function contain(str) {
  return str.match(/\d{3}/g);
}
console.log(contain("1g556777"));

function contain(str) {
  return /^(\d{3}-){2}\d{4}$/g.test(str);
}
console.log(contain("235-894-5623"));

let str = '<OPTION  value="待处理">待处理</OPTION>';
let regExp = /^<.*?>/g;
console.log(regExp.exec(str)[0]); 

let str = 'dgfhfgh254bhku289fgdhdy675gfh';
let regExp = /\d+/g;
console.log(str.match(regExp));

let str = '我草**哈哈背景天胡景涛哪肉涯剪短发欲望';
let regExp = /草|肉|欲|胡景涛/g;
let result = str.replace(regExp,"*");
console.log(result);

let str = '我草**哈哈背景天胡景涛哪肉涯剪短发欲望';
let regExp = /草|肉|欲|胡景涛/g;
let result = str.replace(regExp, function (match) {
  let len = match.length;
  let str;
  switch (len) {
    case 1:
      str = '*';
      break;
    case 2:
      str = "**";
      break;
    case 3:
      str = "***";
      break;
    default:
      str = '****';
  }
  return str;
});
console.log(result); //我***哈哈背景天***哪*涯剪短发*望

let str = '2013-6-7';
let regExp = /-/g;
console.log(str.replace(regExp, '.')); //2013-6-7

var s1 = "get-element-by-id";
function camelCased(str) {
  let regExp = /-(\w)/g;
  str.replace(regExp, function(match, p) {
      return p.toUpperCase();
   })
}
camelCased(s1);

let str1 = 'abc9efh';
let str2 = 'abcefg';
let regExp = /\d/;
console.log(regExp.test(str1)); // true
console.log(regExp.test(str2)); // false

let str1 = 'abc3d4e5';
let str2 = 'aab2c3';
let regExp = /([a-zA-Z])\1/;
console.log(regExp.test(str1));//false
console.log(regExp.test(str2));//true

let str1 = 'abc123efg';
function captureThreeNumbers(str) {
    let res;
    if (res = str.match(/\d{3}/)) {
        return res[0];
    } else {
        return false;
    }
}
console.log(captureThreeNumbers(str1)); //123

let regExp = /^\$\d{1,3}(,\d{3})*(\.\d{2})?$/;
console.log(regExp.test('$1.23')); //true
console.log(regExp.test('$111.23')); //true 
console.log(regExp.test('$1111.23')); //false
console.log(regExp.test('$1,123.23')); //true

function numberWithCommas(x) {
    //对右侧人口数字的格式化处理，三位数字用一个','(逗号)隔开
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
console.log(numberWithCommas(12345678))//12,345,678

let str = 'English poetry is one of their great heritages';
console.log(str.replace(/\bis\b/,'IS'));
// English poetry IS one of their great heritages

var reg = /\d{1,3}(?=(\d{3})+$)/g;
var str = "1234556789";
console.log(str.replace(reg,"$&,"));

var reg = /\d{1,3}(?=(\d{3})+$)/g;
var str = 1234556789;
console.log(str.toString().replace(reg,"$&,"));

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script>
      function BinaryTree() {
        //创建一个节点
        var Node = function (key) {
          this.key = key;
          this.left = null;
          this.right = null;
        };
        //创建一个根节点
        var root = null;
        var insertNode = function (node, newNode) {
          if (newNode.key < node.key) {
            if (node.left === null) {
              node.left = newNode;
            } else {
              insertNode(node.left, newNode);
            }
          } else {
            if (node.right === null) {
              node.right = newNode;
            } else {
              insertNode(node.right, newNode);
            }
          }
        }
        //创建一个函数用来插入节点
        this.insert = function (key) {
          var newNode = new Node(key);
          if (root === null) {
            root = newNode;
          } else {
            insertNode(root, newNode);
          }
        };
      }
      var nodes = [8, 3, 10, 1, 6, 14, 4, 7, 13];
      var binaryTree = new BinaryTree();
      nodes.forEach(function (key) {
        binaryTree.insert(key);
      });
    </script>
  </body>
</html>

//中序遍历的方法
var inOrderTraverseNode = function (node, callback) {
  if (node !== null) {
    inOrderTraverseNode(node.left, callback);
    callback(node.key);
    inOrderTraverseNode(node.right, callback);
  }
}
//中序遍历的接口
this.inOrderTraverse = function (callback) {
  inOrderTraverseNode(root, callback);
}

//前序遍历的方法
var preOrderTraverseNode = function (node, callback) {
  if (node !== null) {
    callback(node.key);
    preOrderTraverseNode(node.left, callback);
    preOrderTraverseNode(node.right, callback);
  }
}
//前序遍历的接口
this.preOrderTraverse = function (callback) {
  preOrderTraverseNode(root, callback);
}

//后序遍历的方法
var postOrderTraverseNode = function (node, callback) {
  if (node !== null) {
    postOrderTraverseNode(node.left, callback);
    postOrderTraverseNode(node.right, callback);
    callback(node.key);
  }
}
//后序遍历的接口
this.postOrderTraverse = function (callback) {
  postOrderTraverseNode(root, callback);
}

a(function (resultsFromA) {
  b(resultsFromA, function (resultsFromB) {
    c(resultsFromB, function (resultsFromC) {
      d(resultsFromC, function (resultsFromD) {
        e(resultsFromD, function (resultsFromE) {
          f(resultsFromE, function (resultsFromF) {
            console.log(resultsFromF);
          })
        })
      })
    })
  })
});

new Promise(
    /* 执行器 executor */
    function (resolve, reject) {
      // 一段耗时很长的异步操作
      resolve(); // 数据处理完成
      reject(); // 数据处理出错
    }
 ).then(function A() {
    // 成功，下一步
  }, function B() {
    // 失败，做相应处理
  });

// 事件侦听与响应
document.getElementById('start').addEventListener('click', start, false);
function start() {
  // 响应事件，进行相应的操作
}

// jQuery 用 `.on()` 也是事件侦听
$('#start').on('click', start);

// 回调，比较常见的有ajax
$.ajax('http://baidu.com', {
  success: function (res) {
    // 这里就是回调函数了
  }
});

// 或者在页面加载完毕后回调
$(function () {
  // 这里也是回调函数
});

console.log('here we go');
new Promise(resolve => {
    setTimeout(() => {
      resolve('hello');
      console.log(123);
    }, 2000);
  })
  .then(name => {
    console.log(name + ' world');
  });

console.log('here we go');
setTimeout(() => {
  callback("hello");
  console.log(123);
}, 2000)

function callback(name) {
  console.log(name + ' world');
}

console.log('here we go');
new Promise(resolve => {
    setTimeout(() => {
      resolve('hello');
    }, 2000);
  })
  .then(value => {
    console.log(value);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('world');
      }, 2000);
    });
  })
  .then(value => {
    console.log(value + ' world');
  });

console.log('start');
let promise = new Promise(resolve => {
  setTimeout(() => {
    console.log('the promise fulfilled');
    resolve('hello, world');
  }, 1000);
});

setTimeout(() => {
  promise.then(value => {
    console.log(value);
  });
}, 3000);

console.log('here we go');
new Promise(resolve => {
    setTimeout(() => {
      resolve('hello');
    }, 2000);
  })
  .then(value => {
    console.log(value);
    console.log('everyone');
    (function () {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log('Mr.Laurence');
          resolve('Merry Xmas');
        }, 2000);
      });
    }());
    return false;
  })
  .then(value => {
    console.log(value + ' world');
  });

console.log('here we go');
new Promise(resolve => {
    setTimeout(() => {
      resolve('hello');
    }, 2000);
  })
  .then(value => {
    console.log(value);
    console.log('everyone');
    (function () {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log('Mr.Laurence');
          resolve('Merry Xmas');
        }, 2000);
      });
    }()).then(value => {
      console.log(value + ' world');
    });
  })

console.log('start');
new Promise(resolve => {
    console.log('Step 1');
    setTimeout(() => {
      resolve(100);
    }, 1000);
  })
  .then(value => {
    return new Promise(resolve => {
        console.log('Step 1-1');
        setTimeout(() => {
          resolve(110);
        }, 1000);
      })
      .then(value => {
        console.log('Step 1-2');
        return value;
      })
      .then(value => {
        console.log('Step 1-3');
        return value;
      });
  })
  .then(value => {
    console.log(value);
    console.log('Step 2');
  });

console.log('start');
new Promise(resolve => {
    console.log('Step 1');
    setTimeout(() => {
      resolve(100);
    }, 1000);
  })
  .then(value => {
    return new Promise(resolve => {
      console.log('Step 1-1');
      setTimeout(() => {
        resolve(110);
      }, 1000);
    })
  })
  .then(value => {
    console.log('Step 1-2');
    return value;
  })
  .then(value => {
    console.log('Step 1-3');
    return value;
  })
  .then(value => {
    console.log(value);
    console.log('Step 2');
  });

// 问题一
doSomething()
  .then(function () {
    return doSomethingElse();
  })
  .then(finalHandler);
//执行流程为doSomething ==> doSomethingElse(undefined) ==> finalHandler(resultDoSomethingELlse)

// 问题二
doSomething()
  .then(function () {
    doSomethingElse();
  })
  .then(finalHandler);
//执行流程为doSomething ==> doSomethingElse(undefined) ==> finalHandler(undefined)
//注意：doSomethingElse(undefined)和finalHandler(undefined)同时执行

// 问题三
doSomething()
  .then(doSomethingElse())
  .then(finalHandler);
//执行流程为doSomething ==> doSomethingElse(undefined) ==> finalHandler(resultOfDoSomething)
//注意：doSomethingElse(undefined)和doSomething()同时执行


// 问题四
doSomething()
  .then(doSomethingElse)
  .then(finalHandler);
//执行流程为doSomething ==> doSomethingElse(resultOfDoSomething) ==> finalHandler(resultOfDoSomethingElse)

function getNumber() {
  var p = new Promise(function(resolve, reject) {
    //做一些异步操作
    setTimeout(function() {
      var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
      if(num <= 5) {
        resolve(num);
      } else {
        reject('数字太大了');
      }
    }, 2000);
  });
  return p;
}
getNumber().then(function(data) {
  console.log('resolved');
  console.log(data);
}, function(reason) {
  console.log('rejected');
  console.log(reason);
});

function getNumber() {
  var p = new Promise(function(resolve, reject) {
    //做一些异步操作
    setTimeout(function() {
      var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
      if(num <= 5) {
        resolve(num);
      } else {
        reject('数字太大了');
      }
    }, 2000);
  });
  return p;
}
getNumber().then(function(data) {
  console.log('resolved');
  console.log(data);
}).catch(function(reason) {
  console.log('rejected');
  console.log(reason);
});

// 测试代码1
getNumber().then(function(data) {
  console.log(name());
  console.log('resolved');
  console.log(data);
}, function(reason, data) {
  console.log('rejected');
  console.log(reason);
});
// 测试代码2
getNumber().then(function(data) {
  console.log(name());
  console.log('resolved');
  console.log(data);
}).catch(function(reason) {
  console.log('rejected');
  console.log(reason);
});

console.log('here we go');
Promise.all([1, 2, 3]).then(all => {
  console.log('1：', all);
  return Promise.all([function() {
    console.log('ooxx');
  }, 'xxoo', false]);
}).then(all => {
  console.log('2：', all);
  let p1 = new Promise(resolve => {
    setTimeout(() => {
      resolve('I\'m P1');
    }, 1500);
  });
  let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('I\'m P2');
    }, 1000);
  });
  let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('I\'m P3');
    }, 3000);
  });
  return Promise.all([p1, p2, p3]);
}).then(all => {
  console.log('all', all);
}).catch(err => {
  console.log('Catch：', err);
});

let promise = doSomething();
promise = promise.then(doSomethingElse);
promise = promise.then(doSomethingElse2);
promise = promise.then(doSomethingElse3);
.........

function queue(things) {
  let promise = Promise.resolve();
  things.forEach(thing => {
   promise.then(() => {
      return new Promise(resolve => {
        doThing(thing, () => {
          resolve();
        });
      });
    });
  });
  return promise;
}
queue(['lots', 'of', 'things', ....]);

function queue(things) {
  return things.reduce((promise, thing) => {
    return promise.then(() => {
      return new Promise(resolve => {
        doThing(thing, () => {
          resolve();
        });
      });
    });
  }, Promise.resolve());
}
queue(['lots', 'of', 'things', ....]);

console.log('start');
Promise.resolve().then(() => {
  console.log('Step 1');
  return Promise.resolve('Hello');
}).then(value => {
  console.log(value, 'World');
  return Promise.resolve(new Promise(resolve => {
    setTimeout(() => {
      resolve('Good');
    }, 2000);
  }));
}).then(value => {
  console.log(value, ' evening');
  return Promise.resolve({
    then() {
      console.log(', everyone');
    }
  })
})

let promise = Promise.reject('something wrong');
promise.then(() => {
  console.log('it\'s ok');
}).catch(() => {
  console.log('no, it\'s not ok');
  return Promise.reject({
    then() {
      console.log('it will be ok');
    },
    catch() {
      console.log('not yet');
    }
  });
});

console.log('start');
let p1 = new Promise(resolve => {
  // 这是一个长时间的调用
  setTimeout(() => {
    resolve('I\'m P1');
  }, 10000);
});
let p2 = new Promise(resolve => {
  // 这是个稍短的调用
  setTimeout(() => {
    resolve('I\'m P2');
  }, 2000)
});
Promise.race([p1, p2]).then(value => {
  console.log(value);
});

// 弹出窗体
let confirm = popupManager.confirm('您确定么？');
confirm.promise.then(() => {
  // do confirm staff
}).catch(() => {
  // do cancel staff
});
// 窗体的构造函数
class Confirm {
  constructor() {
    this.promise = new Promise((resolve, reject) => {
      this.confirmButton.onClick = resolve;
      this.cancelButton.onClick = reject;
    })
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div, p {
        height: 50px;
        line-height: 50px;
        background-color: green;
      }
      span, a {
        height: 50px;
        line-height: 50px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
    <p>我是p</p>
    <span>我是span</span>
    <a>我是a</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 50px;
        width: 200px;
        line-height: 50px;
        background-color: green;
        position: static;
        left: 20px;
        top: 20px;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 50px;
        width: 200px;
        line-height: 50px;
        background-color: green;
      }
      p {
        position: relative;
        top: 0;
        left: 15px;
        height: 50px;
        width: 500px;
        line-height: 50px;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
    <p>我是相对定位的p元素，根据自身所在的位置进行定位</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 500px;
        width: 800px;
        line-height: 500px;
        background-color: green;
        margin-left: 55px;
      }
      p {
        position: absolute;
        top: 0px;
        left: 55px;
        height: 50px;
        width: 500px;
        line-height: 50px;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>
    	<p>我是绝对定位的p元素，定位规则较复杂</p>
    </div>    
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 500px;
        width: 800px;
        line-height: 500px;
        background-color: green;
        margin-left: 55px;
        position: relative;
      }
      p {
        position: absolute;
        top: 0px;
        left: 55px;
        height: 50px;
        width: 500px;
        line-height: 50px;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>
      <p>我是绝对定位的p元素，定位规则较复杂</p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 500px;
        width: 800px;
        line-height: 500px;
        background-color: green;
        margin-left: 55px;
        position: relative;
      }
      p {
        position: inherit;
        top: 0px;
        left: 55px;
        height: 50px;
        width: 500px;
        line-height: 50px;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>
      <p>我是继承父元素相对定位的p元素</p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div {
        width: 100%;
        height: 3000px;
        border: 1px solid brown;
      }
      p {
        height: 50px;
        width: 500px;
        line-height: 50px;
        text-align: center;
        background-color: green;
        color: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div>
      <p>我是固定定位元素，相对于浏览器窗口进行定位</p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
        position: fixed;
        left: 33px;
        top: 55px;
      }
      p {
        width: 200px;
        height: 200px;
        background-color: green;
        position: fixed;
        left: 155px;
        top: 200px;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
    <p>我是p</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
        position: fixed;
        left: 33px;
        top: 55px;
        z-index: 1;
      }
      p {
        width: 200px;
        height: 200px;
        background-color: green;
        position: fixed;
        left: 155px;
        top: 200px;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
    <p>我是p</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div {
        width: 500px;
        height: 500px;
        background-color: red;
      }
      p {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
        z-index: -5;
      }
      h1 {
        width: 100px;
        height: 100px;
        background-color: black;
        position: absolute;
        top: 130px;
        left: 150px;
        z-index: -5;
      }
    </style>
  </head>
  <body>
    <div>
      <p>我是p</p>
      <h1></h1>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      .parent1 {
        height: 500px;
        width: 500px;
        background-color: red;
        position: relative;
        z-index: 10;
      }
      .child1 {
        height: 300px;
        width: 300px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .parent2 {
        height: 400px;
        width: 400px;
        background-color: blueviolet;
        position: absolute;
        left: 50px;
        top: 50px;
        z-index: 5;
      }
      .child2 {
        height: 200px;
        width: 200px;
        background-color: teal;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="parent1">
      <div class="child1">child1</div>
    </div>
    <div class="parent2">
      <div class="child2">child2</div>
    </div>
  </body>
</html>

let n1 = 1
let n2 = 2
let n3 = 3
alert(n1)
alert(n2)
alert(n3)

let n1 = 1
let n2 = 2
let n3 = 3
alert(n1)
setTimeout(function() {
  alert(n2)
}, 2000)
alert(n3)

function Person() {
  this.think = function(callback) {
    setTimeout(function() {
      console.log('想出来了！')
      callback()
    }, 5000)
  }
  this.answer = function() {
    console.log('我正在思考一个问题^_^')
  }
}
var person = new Person()
person.think(function() {
  console.log('花费5s，得到一个正确的思考')
})
person.answer()

function waitFive(name, callbackfn) {
  var pus = 0
  var currentDate = new Date()
  while(pus < 5000) {
    var now = new Date()
    pus = now - currentDate
  }
  // 执行回调函数
  callbackfn(name)
}
// 定义回调函数echo()
function echo(name) {
  console.log(name)
}
// 调用waitFive方法
waitFive('回调函数被调用啦', echo)
console.log('略略略略')

var dns = require('dns')
dns.resolve4('id.qq.com', function(err, address) {})
console.log(address)

var dns = require('dns')
dns.resolve4('id.qq.com', function(err, address) {
  if(err) {
    throw err
  }
  console.log(address)
})

var httpModule = require('http')
httpModule.createServer(function(req, res) {
  
}).listen(port)

exports.name = '能被调用的变量'
exports.happy = function() {
  console.log('能被调用的方法')
}

var yourName = '不能被调用的变量'
function love() {
  console.log('不能被调用的方法')
}

var test = require('./test.js')
console.log(test)

// 加载创建web的HTTP服务器模块
var http = require('http')
// 加载DNS解析模块
var dns = require('dns')
// 加载文件读取模块
var fs = require('fs')
// 加载URL处理模块
var url = require('url')
// 加载处理请求参数模块
var querystring = require('querystring')
http.createServer(function(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/html'
  })
  // 获取当前html文件路径
  var readPath = __dirname + '/' + url.parse('2-1-3.html').pathname
  // 同步读取文件
  var indexPage = fs.readFileSync(readPath)
  res.end(indexPage)
}).listen(3000, '127.0.0.1')

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DNS查询</title>
  </head>
  <body>
    <h1 style="text-align: center;">DNS查询工具</h1>
    <div style="text-align: center;">
      <form action="/parse" method="post">
        <span>查询DNS：</span>
        <input type="text" name="search-dns" />
        <input type="submit" value="查询" />
      </form>
    </div>
  </body>
</html>

var http = require('http')
var dns = require('dns')
var fs = require('fs')
var url = require('url')
var querystring = require("querystring")
http.createServer(function(req, res) {
  // 获取当前请求资源的url路径
  var pathname = url.parse(req.url).pathname
  // 设置编码格式，避免出现乱码
  req.setEncoding("utf8")
  res.writeHead(200, {
    'Content-Type': 'text/html'
  })
  router(res, req, pathname)
}).listen(3000, "127.0.0.1")
console.log('Server running at http://127.0.0.1:3000/')
// 路由函数实现
function router(res, req, pathname) {
  switch(pathname) {
    case "/parse":
      parseDns(res, req)
      break;
    default:
      goIndex(res, req)
  }
}
// 解析域名函数实现
function parseDns(res, req) {
  var postData = ""
  req.addListener("data", function(postDataChunk) {
    postData += postDataChunk
  });
  req.addListener("end", function() {
    var retData = getDns(postData, function(domain, addresses) {
      res.writeHead(200, {
        'Content-Type': 'text/html'
      });
      res.end(`
        <html>
          <head>
            <title>DNS解析结果</title>
            <meta charset='utf-8'>
          </head>
          <body>
            <div style='text-align:center'>
              Domain:<span style='color:red'>${domain}</span>
              IP:<span style='color:red'>${addresses.join(',')}</span>
            </div>
          </body>
        </html>
      `)
    })
    return
  })
}
// 返回html文件函数实现
function goIndex(res, req) {
  var readPath = __dirname + '/' + url.parse('2-1-3.html').pathname
  // 同步读取html文件的信息
  var indexPage = fs.readFileSync(readPath)
  res.end(indexPage)
}
// 异步解析域名函数
function getDns(postData, callback) {
  var domain = querystring.parse(postData).search_dns;
  dns.resolve(domain, function(err, addresses) {
    if(!addresses) {
      addresses = ['不存在域名']
    }
    callback(domain, addresses)
  })
}

// 加载原生http和url模块
var http = require('http')
var url = require('url')
// 加载文件模块之路由处理模块
var router = require('./router.js')
http.createServer(function(req, res) {
  // HTTP请求路径
  var pathname = url.parse(req.url).pathname
  req.setEncoding('utf8')
  res.writeHead(200, {
    'Content-Type': 'text/html'
  })
  // router(res,req,pathname)是router文件模块中的exports方法
  router.router(res, req, pathname)
}).listen(3000, '127.0.0.1')
console.log('Server runing http://127.0.0.1:3000')

// 加载文件模块之DNS解析模块
var ParseDns = require('./parse_dns.js')
// 加载文件模块之首页展示模块
var MainIndex = require('./main_index.js')
exports.router = function(res, req, pathname) {
  switch(pathname) {
    case '/parse':
      ParseDns.parseDns(res, req)
      break;
    default:
      MainIndex.goIndex(res, req)
  }
}

var querystring = require('querystring')
var dns = require('dns')
exports.parseDns = function(res, req) {
  var postData = ''
  req.addListener('data', function(postDataChunk) {
    postData += postDataChunk
  })
  req.addListener('end', function() {
    var retData = getDns(postData, function(domain, addresses) {
      res.writeHead(200, {
        'Content-Type': 'text/html'
      });
      res.end(`
        <html>
          <head>
            <title>DNS解析结果</title>
            <meta charset='utf-8'>
          </head>
          <body>
            <div style='text-align:center'>
              Domain:<span style='color:red'>${domain}</span>
              IP:<span style='color:red'>${addresses.join(',')}</span>
            </div>
          </body>
        </html>
      `)
    })
    return
  })
  // 获取post数据
  function getDns(postData, callback) {
    var domain = querystring.parse(postData).search_dns
    // 异步解析域名
    dns.resolve(domain, function(err, addresses) {
      if(!addresses) {
        addresses = ['不存在域名']
      }
      callback(domain, addresses)
    })
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <h1 style="text-align: center;">DNS查询工具</h1>
    <div style="text-align: center;">
      <form action="/parse" method="post">
        <span>查询DNS：</span>
        <input type="text" name="search_dns" />
        <input type="submit" value="查询" />
      </form>
    </div>
  </body>
</html>

var fs = require('fs')
var url = require('url')
exports.goIndex = function(res, req) {
  var readPath = __dirname + '/' + url.parse('index.html').pathname
  // 同步读取index.html页面数据
  var indexPage = fs.readFileSync(readPath)
  res.end(indexPage)
}

index.js文件模块
module.exports = 'exports的属性和方法将被忽视！'
exports.name = '我无法被调用'
exports.showName = function () {
  console.log('我也无法被调用')
}
console.log('内部module.exports值被调用：' + module.exports)

// 调用index.js文件模块
var Book = require('./index.js')
console.log('调用Book：' + Book)
console.log('调用Book中的name：' + Book.name)
console.log('调用Book中的showName()：' + Book.showName())

- console.log('hello'); // 这段代码在服务端执行
- var s = 'hello world' // 在服务端空间中定义变量
p #{s}
p= s

-l指定forever运行日志，-o指定脚本流水日志，
-e指定脚本运行错误日志。启动后将会在本项目中产生out.log、err.log文件

$ npm adduser
Username: fengxiong
Password: 9*****8*q
Email: (this IS public) 9*****[email protected]
Logged in as fengxiong on https://registry.npmjs.org/.

$ npm whoami
fengxiong

1、创建一个新项目
2、初始化一个package.json文件
3、安装自己的模块：npm install --save "原先模块package.json文件中的name值"

var num = 32;
num = "this is a string";

"37" - 7   //30
"37"+7   //377

"1.23" == 1.23   //true
0 == false   //true
null == undefined   //true
new Object() == new Object()   //false
[1, 2] == [1, 2]   //false
new String('hi') == 'hi'   //true
new String('456') == 456    //true

"1.23" === 1.23   //false
0 === false   //false
null === undefined   //false
new Object() === new Object()   //false
[1, 2] === [1, 2]   //false
new String('hi') === 'hi'   //false
new String('456') === 456    //false

var str = "this is a string";
console.log(str.length); //16
console.log(str.indexOf("is")); //2

var str = "this is a string";
str.b = 10;
console.log(str.b);  //undefined

console.log(typeof ""); //string
console.log(typeof 1); //number
console.log(typeof true); //boolean
console.log(typeof null); //object
console.log(typeof undefined); //undefined
console.log(typeof []); //object
console.log(typeof function() {}); //function
console.log(typeof {}); //object

console.log("1" instanceof String);  //false
console.log(1 instanceof Number);  //false
console.log(true instanceof Boolean);  //false
console.log([] instanceof Array);  //true
console.log(function() {} instanceof Function);  //true
console.log({} instanceof Object);  //true

console.log(new String("1") instanceof String); //true
console.log(new Number(1) instanceof Number); //true
console.log(new Boolean(true) instanceof Boolean); //true
console.log([] instanceof Array); //true
console.log(function() {} instanceof Function); //true
console.log({} instanceof Object); //true

console.log(("1").constructor === String); //true
console.log((1).constructor === Number); //true
console.log((true).constructor === Boolean); //true
console.log(([]).constructor === Array); //true
console.log((function() {}).constructor === Function); //true
console.log(({}).constructor === Object); //true

function Fn(){};
Fn.prototype=new Array();
var f=new Fn();

console.log(f.constructor===Fn);  //false
console.log(f.constructor===Array);  //true

var a = Object.prototype.toString;

console.log(a.call("aaa"));  //[object String]
console.log(a.call(1));  //[object Number]
console.log(a.call(true));  //[object Boolean]
console.log(a.call(null));  //[object Null]
console.log(a.call(undefined));  //[object Undefined]
console.log(a.call([]));  //[object Array]
console.log(a.call(function() {}));  //[object Function]
console.log(a.call({}));  //[object Object]

// 逗号运算符
var n = (1,2,3)  //n=3

// 删除运算符
var obj = {x:1}
obj.x;  //1
delete obj.x;
obj.x;  //undefined

var obj = {};
Object.defineProperty(obj,'x',{
  configurable:false,
  value:1
});
delete obj.x;  //false
obj.x;  //1


// in运算符
window.x = 1;
'x'  in window;  //true

// new运算符
function Foo(){}
Foo.prototype.x = 1;
var obj = new Foo();
obj.x;  // 1
obj.hasOwnProperty('x');  // false
obj.__proto__.hasOwnProperty('x');  // true

// this运算符
this;
var obj = {
    func:function(){return this;}
};
obj.func();  //obj

{
  var str = 'hi';
  console.log(str);
}

if(true) {
  console.log('hi');
}

for (var i=0; i<10; i++) {                
  var str = 'hi';  
  console.log(str); 
}  
等同于
 var i = 0;
for (; i<10; i++) {                
  var str = 'hi';  
  console.log(str); 
} 

{
  var x = 1;
}
等同于
var x = 1;
{

}

function foo() {
  var a = 1;
  console.log(a);  //1
}
foo();
console.log(typeof a);  //undefined

function foo() {
  //隐式的将b定义为全局变量
  var a = b = 1;
}
foo();
console.log(typeof a);  //undefined
console.log(typeof b);  //number

function foo() {
  //同时定义多个变量的正确方式
  var a =1,b = 1;
}
foo();
console.log(typeof a);  //undefined
console.log(typeof b);  //undefined

try {
  throw 'test';
} catch(e) {
  console.log(e); //test
} finally {
  console.log('必須執行的');
}

try {
  try {
    throw new Error('oops');
  } finally {
    console.log('finally');
  }
} catch(e) {
  console.error('outer', e.message);
}

try {
  try {
    throw new Error('oops');
  } catch(ex) {
    console.log('inner', ex.message);
  } finally {
    console.log('finally');
  }
} catch(ex) {
  console.error('outer', ex.message);
}

try {
  try {
    throw new Error('oops');
  } catch(ex) {
    console.log('inner', ex.message);
    throw ex;
  } finally {
    console.log('finally');
  }
} catch(ex) {
  console.error('outer', ex.message);
}

var p;
var obj = { x: 1, y: 2 }
for(p in obj) {
  console.log(p);  //x  y
}

var obj = {x:1,y:2};
obj.x;  //1
obj.y; //2

var obj1 = {x:1,y:2};
var obj2 = {
  x:1,
  y:2,
  o:{
    z:3,
    n:4
  }
};

function foo() {}
foo.prototype.z = 3;
var obj = new foo();
obj.x = 1;
obj.y = 2;
console.log(obj.x); //1
console.log(obj.y); //2
console.log(obj.z); //3
console.log(typeof obj.toString()); //string
console.log(typeof obj.toString);  //function
console.log('z' in obj); //true
console.log(obj.hasOwnProperty('z')); //false

var obj = Object.create({ x: 1 });
console.log(obj.x);  //1
console.log(obj.toString);  //function
console.log(obj.hasOwnProperty('x'));  //false

// null对象的原型链少了Object这一层
var obj1 = Object.create(null);
console.log(obj1.toString);  //undefined

var obj = {x:1,y:2};
obj.x;  //1
obj['y'];  //2

//使用[]取得属性值一般场景
var obj = {x1:1,x2:2};
for(var i=1; i<=2; i++){
  console.log(obj['x' + i];
}

var person = {age:28,title:'test'};
delete person.age;  //true
delete preson['title'];  //true
person.age;  //undefined
delete person.age;  //true

//无法删除原型
delete Object.prototype;  //false
//因为原型的configurable不可配置
var descriptor = Object.getOwnPropertyDescriptor(Object,'prototype');
descriptor.configurable;  //false

var cat = new Object();
cat.legs = 4;
cat.name = 'tom';

//for in检测
'legs' in cat;  //true
'abc' in cat;  //false
'toString' in cat;  //true

//检测对象本身的属性
cat.hasOwnProperty('legs');  //true
cat.hasOwnProperty('toString');  //false

//检测对象的属性是否可枚举，包括原型上的
cat.propertyIsEnumerable('legs');  //true
cat.propertyIsEnumerable('toString');  //false

var o = { x: 1, y: 2, z: 3 };
'toString' in o; //true
o.propertyIsEnumerable('toString'); //false
var key;
for(key in o) {
  console.log(key); //x,y,z
}

var obj = Object.create(o);
obj.a = 4;
var key;
for(key in obj) {
  console.log(key); //a,x,y,z
}

var obj = Object.create(o);
obj.a = 4;
var key;
for(key in obj) {
  if(obj.hasOwnProperty(key)) {
    console.log(key); //a
  }
}

var man = {
  name: 'tom',
  weibo: 'haha',
  get age() {
    return new Date().getFullYear() - 1988;
  },
  set age(val) {
    console.log('你没有权限设置年龄为：' + val);
  }
}
console.log(man.age);  //30
man.age = 100;  //你没有权限设置年龄为：100
console.log(man.age);  //30

//修改一下，使上面的代码更复杂
var man = {
  name: 'tom',
  weibo: 'haha',
  $age: null,
  get age() {
    if(this.$age == undefined) {
      return new Date().getFullYear() - 1988;
    } else {
      return this.$age;
    }
  },
  set age(val) {
    val = +val;
    if(!isNaN(val) && val > 0 && val < 150) {
      this.$age = +val;
    } else {
      console.log('年龄无法设置为：' + val);
    }
  }
}
console.log(man.age); //30
man.age = 100;
console.log(man.age); //100
man.age = 'abc'; //年龄无法设置为：NaN

//get和set设置的值不会被直接更改
function foo() {}
Object.defineProperty(foo.prototype, 'z', {
  get: function() {
    return 1;
  }
})
var obj = new foo();
console.log(obj.z); //1
obj.z = 10;
console.log(obj.z); //1

//defineProperty设置的值不会被直接更改
var o = {}
Object.defineProperty(o, 'x', { value: 5 });
var obj = Object.create(o);
console.log(obj.x); //5
obj.x = 200;
console.log(obj.x); //5

//更改defineProperty设置的值
var o = {}
Object.defineProperty(o, 'x', { writable: true, configurable: true, value: 5 });
var obj = Object.create(o);
console.log(obj.x); //5
obj.x = 200;
console.log(obj.x); //200

var person = {};
Object.defineProperty(person, 'name', {
  configurable: false,
  writable: false,
  enumerable: true,
  value: 'tom'
})
console.log(person.name);  //tom
person.name = 'jack';
console.log(person.name);  //tom
console.log(delete person.name);  //false
//获得属性的标签值
console.log(Object.getOwnPropertyDescriptor(person,'name'));

//属性标签的应用
var person = {};
Object.defineProperties(person, {
  title: {
    value: 'JavaScript',
    enumerable: true
  },
  corp: {
    value: 'BAT',
    enumerable: true
  },
  salary: {
    value: 50000,
    enumerable: true,
    writable: true
  },
  luck: {
    get: function() {
      return Math.random() > 0.5 ? 'good' : 'bad';
    }
  },
  promote: {
    set: function(level) {
      this.salary *= 1 + level * 0.1;
    }
  }
});
console.log(Object.getOwnPropertyDescriptor(person, 'salary'));
console.log(person.salary); //50000
person.promote = 2;
console.log(person.salary); //60000

//将属性和值序列化为字符串
var obj = { x: 1, y: true, z: [1, 2, 3], nullVal: null };
//{"x":1,"y":true,"z":[1,2,3],"nullVal":null}
console.log(JSON.stringify(obj));

//有点小坑，得注意
var obj1 = { val: undefined, a: NaN, b: Infinity, c: new Date() };
//{"a":null,"b":null,"c":"2018-06-09T10:46:01.929Z"}
console.log(JSON.stringify(obj1));

//把字符串反序列化为属性和值
var obj2 = JSON.parse('{"x":2333}');
//2333
console.log(obj2.x);

var arr = [1, 2, 3];
console.log(arr.join());  //1,2,3
console.log(arr.join('-'));  //1-2-3

function repeatString(str, n) {
  return new Array(n + 1).join(str);
}
console.log(repeatString('a', 3));  //aaa
console.log(repeatString('hi', 2));  //hihi

var arr = [1, 2, 3];
console.log(arr.reverse());  //3,2,1
console.log(arr);  //3,2,1

var arr = [13, 24, 52, 3];
//13,24,3,54
console.log(arr.sort());
//13,24,3,54
console.log(arr);
var arrSort = arr.sort(function(a, b) { return a - b; });
//3,13,24,52
console.log(arrSort);

var arr1 = [
  { age: 25 }, 
  { age: 39 }, 
  { age: 22 }
];
arr1.sort(function(a, b) {
  return a.age - b.age;
})
arr1.forEach(function(item) {
  console.log('age:', item.age);
})

var arr = [1, 2, 3];
//[1,2,3,4,5]
console.log(arr.concat(4, 5));
//[1,2,3]
console.log(arr);
//[1,2,3,10,11,13]
console.log(arr.concat([10, 11], 13));
//[1,2,3,1,[2,3]]
console.log(arr.concat([1, [2, 3]]));

var arr = [1, 2, 3, 4, 5];
//[2,3]
console.log(arr.slice(1, 3));
//[2,3,4,5]
console.log(arr.slice(1));
//[2,3,4]
console.log(arr.slice(1, -1));
//[2]
console.log(arr.slice(-4, -3));
//[1,2,3,4,5]
console.log(arr);

var arr = [1, 2, 3, 4, 5];
//[3,4,5]，从下标为2开始删除
console.log(arr.splice(2));
//[1,2]
console.log(arr);

var arr1 = [1, 2, 3, 4, 5];
//[3,4]，从下标为2开始删除，删除两个元素后停止
console.log(arr1.splice(2, 2));
//[1,2,5]
console.log(arr1);

var arr2 = [1, 2, 3, 4, 5];
//[2]，从下标为1开始删除，删除一个元素后停止，并且添加a和b这两个元素
console.log(arr2.splice(1, 1, 'a', 'b'));
//[1,"a","b",3,4,5]
console.log(arr2);

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.forEach(function(x, index, a) {
  console.log(x + '-' + index + '-' + (a === arr));
});

var arr = [1, 2, 3];
arr.map(function(x) {
  //11,12,13
  console.log(x + 10);
});
//[1,2,3]
console.log(arr);

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
  //1,2,3,4,5,6,7,8,9,10
  console.log(x);
  //0,1,2,3,4,5,6,7,8,9
  console.log(index);
  return index % 3 === 0 || x >= 8;
});
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr);

var arr = [1, 2, 3, 4, 5];
//判断每一个元素是否小于10
arr.every(function(x) {
  return x < 10;
});
//判断是否有一个元素等于3
arr.some(function(x) {
  return x === 3;
});

var arr = [1, 2, 3];
var sum = arr.reduce(function(x, y) {
  return x + y;
});
//6
console.log(sum);
//[1,2,3]
console.log(arr);

var arr1 = [3, 9, 6];
var max = arr1.reduce(function(x, y) {
  //3-9
  //9-6
  console.log(x + '-' + y);
  return x > y ? x : y;
});
//9
console.log(max);
//[3,9,6]
console.log(arr1);

var arr2 = [3, 9, 6];
var max2 = arr2.reduceRight(function(x, y) {
  //6-9
  //9-3
  console.log(x + '-' + y);
  return x > y ? x : y;
});
//9
console.log(max2);
//[3,9,6]
console.log(arr2);

var arr = ['a', 'b', 'c', 'd', 'e', 'a'];
//2,在数组下标为2的位置找到
console.log(arr.indexOf('c'));
//-1,找不到该元素
console.log(arr.indexOf('f'));
//0,在数组下标为0的位置找到，默认是从左到右查找
console.log(arr.indexOf('a'));
//5,在数组下标为5的位置找到，设置是从数组下标为1的位置开始向右查找
console.log(arr.indexOf('a', 1));
//5,在数组下标为5的位置找到，-3表示在d的位置开始向右查找
console.log(arr.indexOf('a', -3));
//0,在数组下标为0的位置找到，-6表示在最左a的位置开始向右查找
console.log(arr.indexOf('a', -6));
//-1,找不到该元素，-3表示在d的位置开始向右查找
console.log(arr.indexOf('b', -3));
//3,在数组下标为3的位置找到
console.log(arr.lastIndexOf('d'));
//-1,找不到该元素，2表示的是在e的位置向右查找
console.log(arr.lastIndexOf('d', 2));
//3,在数组下标为3的位置找到，5表示的是在b的位置向右查找
console.log(arr.lastIndexOf('d', 5));

//true
console.log(Array.isArray([]));
//true
console.log(({}).toString.apply([]) === '[object Array]');
//true
console.log([] instanceof Array);
//true
console.log([].constructor === Array);

var str = 'hello world';
str.charAt(0);  //h
str[1];  //e

Array.prototype.join.call(str,'-');  //h-e-l-l-o--w-o-r-l-d

function add(a, b) {
  var x = a;
  var y = b;
  return x + b;
}

//一般表达式
var add = function(a, b) {
	
}
//立即调用表达式
(function() {
	
})();
//返回表达式
return function() {
	
};
//命名函数表达式
var add = function foo(a, b) {
	
}

var num = add(1, 3);
//4
console.log(num);
function add(a, b) {
  var x = a;
  var y = b;
  return x + b;
}

var num1 = add1(1, 3);
//add1 is not a function
console.log(num1);
var add1 = function(a, b) {
  var x = a;
  var y = b;
  return x + b;
}

console.log(this.document == document);  //true
console.log(this === window);  //true

this.a = 37;
console.log(window.a);  //37

function f1(){
  return this;
}
f1() === window;  //true

function f2(){
'use strict';
return this;
}
f2() === undefined;  //true

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};
console.log(o.f()); //37

var o = { prop: 37 };
function independent() {
  console.log(this.prop); //37
  return this.prop;
}
o.f = independent;
console.log(o.f()); //37

var o = {
  fn: function() {
    return this.a + this.b;
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
//5
console.log(p.fn());

function modulus() {
  //abs()返回数的绝对值
  return Math.abs(this.re + this.im);
}
var o = {
  re: 4,
  im: -9,
  get phase() {
    //sqrt()返回数的平方根
    return Math.sqrt(this.re);
  }
};
Object.defineProperty(o, 'modulus', {
  get: modulus,
  enumerable: true,
  configurable: true
});
console.log(o.phase); //2
console.log(o.modulus); //5

function Abc() {
  this.a = 33;
}
var oo = new Abc();
console.log(oo.a); //33

function Bcd() {
  this.b = 55;
  return { b: 66 };
}
var pp = new Bcd();
console.log(pp.b); //66

function add(c, d) {
  return this.a + this.b + c + d;
}
var o = { a: 1, b: 3 };
//16
console.log(add.call(o, 5, 7));
//34
console.log(add.apply(o, [10, 20]));

function bar() {
  //[object Window]
  console.log(Object.prototype.toString.call(this));
}
bar();
//[object Number]
console.log(bar.call(10));

function bar() {
  return this.a;
}
var ger = bar.bind({
  a: 'test'
});
//f bar(){ return this.a; }
console.log(ger);
//test
console.log(ger());

var odr = {
  a: 33,
  bn: bar,
  gn: ger
};
//33
console.log(odr.bn());
//test
console.log(odr.gn());

function foo(x, y, z) {
  //2
  console.log(arguments.length);
  //3
  console.log(arguments[0]);
  arguments[0] = 100;
  //100
  console.log(x)
  arguments[2] = 200;
  //undefined
  console.log(z);
  //200
  console.log(arguments[2]);
  //true
  console.log(arguments.callee === foo);
}
foo(3, 4);
//3
console.log(foo.length);
//foo
console.log(foo.name);

function foo(x, y) {
  console.log(x, y, this);
}
//1,2,Number(100)
foo.call(100, 1, 2);
//3,4,Boolean(true)
foo.apply(true, [3, 4]);
//undefined,undefined,window
foo.apply(null);
//undefined,undefined,window
foo.apply(undefined);

function foo(x, y) {
  'use strict';
  console.log(x, y, this);
}
//undefined,undefined,null
foo.apply(null);
//undefined,undefined,undefined
foo.apply(undefined);

this.x = 9;
var module = {
  x: 33,
  getX: function() {
    return this.x;
  }
};
console.log(module.getX()); //33

var gn = module.getX;
console.log(gn()); //9

var gn1 = gn.bind(module);
console.log(gn1()); //33

function add(a, b, c) {
  return a + b + c;
}
var fn = add.bind(undefined, 100);
console.log(fn(1, 2)); //103

var fn1 = fn.bind(undefined, 200);
console.log(fn1(10)); //310

function getConfig(colors, size, otherOptions) {
  console.log(colors, size, otherOptions);
}
var defaultConfig = getConfig.bind(null, '#cc0000', '1024*768');
//#cc0000 1024*768 123
console.log(defaultConfig('123'));
//#cc0000 1024*768 456
console.log(defaultConfig('456'));

function foo() {
  this.b = 100;
  return this.a;
}
var fn = foo.bind({ a: 1 });
//1
console.log(fn());
//{b:100}
console.log(new fn());

if(!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if(typeof this !== 'function') {
      throw new TypeError('what is trying to be bound is not callable');
    }
    var aArgs = Array.prototype.slice.call(arguments, 1);
    var fToBind = this;
    var fNOP = function() {};
    var fBound = function() {
      return fToBind.apply(this instanceof fNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
    };
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
  };
}

function outer() {
  var localVal = 30;
  return localVal;
}
console.log(outer());

function outer1() {
  var localVal2 = 33;
  return function() {
    return localVal2;
  }
}
var fn = outer1();
console.log(fn())

//全局变量
var a = 10;
(function() {
  //局部变量
  var b = 20;
})();
//10
console.log(a);
//undefined
console.log(b);

for(var item in { a: 1, b: 2 }) {
  //a  b
  console.log(item);
}
//b
console.log(item);

eval('var c = 100');
//100
console.log(c);

function outer1() {
  var local1 = 11;
  function inter() {
    var local2 = 22;
    //11
    console.log(local1);
    //22
    console.log(local2);
    //33
    console.log(global1);
  }
  inter();
}
var global1 = 33;
outer1();

function outer2() {
  var local3 = 44;
  var fn = new Function('console.log(typeof local3);');
  //undefined
  fn();
}
outer2();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>MediaQuery</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100%;
        background-color: red;
      }
      .inner:nth-child(1) {
        background-color: red;
      }
      .inner:nth-child(2) {
        background-color: blue;
      }
      .inner:nth-child(3) {
        background-color: yellow;
      }
      .inner:nth-child(4) {
        background-color: green;
      }
      @media screen and (max-width: 320px) {
        .inner {
          height: 100px;
          width: 25%;
          float: left;
        }
      }
      @media screen and (min-width: 321px) {
        .inner {
          height: 100px;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>Rem</title>
    <style>
      html {
        font-size: 17px;
      }
      .box {
        height: 10rem;
        width: 10rem;
        background-color: red;
      }
      .text {
        color: #fff;
        font-size: 16px;
      }
      /*
       1rem = 17px = html的font-size(默认为16px)
       10rem = 170px
       * */
    </style>
  </head>
  <body>
    <div class="box">
      <p class="text">hello rem</p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      div {
        height: 4rem;
        width: 100%;
        background-color: black;
        font-size: 1rem;
        color: white;
        text-align: center;
      }
      @media only screen and (min-width: 360px) and (max-width: 860px) {
        html {
          font-size: 300px;
        }
        div {
          color: red;
        }
      }
      @media only screen and (min-width: 860px) {
        html {
          font-size: 200px;
        }
        div {
          color: green;
        }
      }
    </style>
  </head>
  <body>
    <div>hello rem</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      div {
        height: 4rem;
        width: 100%;
        background-color: black;
        font-size: 1rem;
        color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>hello rem</div>
    <script>
      // 获取视窗的宽度
      let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
      console.log(htmlWidth)
      // 获取视窗对象
      let htmlDom = document.getElementsByTagName('html')[0]
      console.log(htmlDom)
      // 设置html的font-size
      htmlDom.style.fontSize = htmlWidth / 10 + 'px'
    </script>
  </body>
</html>

@function px2rem($px) {
  $rem: 37.5px;
  @return ($px/$rem) + rem;
}
.demo {
  width: px2rem(75px);
  height: px2rem(37.5px);
}

// 编译后的结果
.demo {
  width: 2rem;
  heigth: 1rem;
}

"dependencies": {
    "css-loader": "^0.28.9",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2"
}

@function px2rem($px) {
  // iphone6的宽度除以10
  $rem: 37.5px;
  @return ($px / $rem)+rem;
}

html {
  background-color: #f8f8f8;
}

.header {
  height: px2rem(40px);
  width: 100%;
  background-color: #6170b1;
  padding-left: px2rem(32px);
  box-sizing: border-box;
  .header-item {
    list-style-type: none;
    float: left;
    color: #D1DFB7;
    font-size: px2rem(16px);
    margin-right: px2rem(20px);
    line-height: px2rem(40px);
    &:nth-child(2) {
      color: #fff;
      font-size: px2rem(17px);
    }
  }
}

require("./index.scss");
// 获得屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 获得html的dom
let htmlDOM = document.getElementsByTagName('html')[0];
// 设置html的fontsize
htmlDOM.style.fontSize = htmlWidth / 10 + 'px';