cy0707 / learn_javascript Goto Github PK

//下面的斜杠就是界定符
   var reg = / [0-9] /;

  var reg = / imooc.+123/
//上面这个表示imooc加上除换行符之外任意字符至少出现一次加上123
  var str = " imooc-123123124322123"
//对于贪婪匹配结果是 imooc-123123124322123 这个最长的
//对于懒惰匹配结果是 imooc-123 这个最短的

	<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
	<a href="#" id="fileSelect">Select some files</a> 
	<div id="fileList">
	  <p>No files selected!</p>
	</div>
	<script>

		window.URL = window.URL || window.webkitURL;

		var fileSelect = document.getElementById("fileSelect"),
		    fileElem = document.getElementById("fileElem"),
		    fileList = document.getElementById("fileList");

		fileSelect.addEventListener("click", function (e) {
			//如果文件存在的话
		  if (fileElem) {
		    fileElem.click();
		  }
		  e.preventDefault(); // prevent navigation to "#"
		}, false);

		function handleFiles(files) {
		  if (!files.length) {
		  	// 如果没有选择文件，那么就提示没有选择文件
		    fileList.innerHTML = "<p>No files selected!</p>";
		  } else {
		  	// 选择文件的话，先把提示的文件清空
		    fileList.innerHTML = "";
		    var list = document.createElement("ul");
		    fileList.appendChild(list);
		    for (var i = 0; i < files.length; i++) {
		    	// 文件的个数有几个，创建几个li
		      var li = document.createElement("li");
		      list.appendChild(li);
		      
		      var img = document.createElement("img");
		      // 获取这个图片的url
		      img.src = window.URL.createObjectURL(files[i]);
		      img.height = 60;
		      img.onload = function() {
		      	// 当图片文件加载完成，释放这个url
		        window.URL.revokeObjectURL(this.src);
		      }
		      li.appendChild(img);
		      var info = document.createElement("span");
		      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
		      li.appendChild(info);
		    }
		  }
		}

	</script>

fileSelect.addEventListener("click", function (e) {
//点击a标签，如果input的type为file的话，那么就触发input的点击事件
//这样无论input的位置在哪里，都可以触发
   if (fileElem) {
	fileElem.click();
	 }
  e.preventDefault(); // prevent navigation to "#"
}, false);

// 最简单数组去重法
function unique1(array){
  var n = []; //一个新的临时数组
  //遍历当前数组
  for(var i = 0; i < array.length; i++){
    //如果当前数组的第i已经保存进了临时数组，那么跳过，
    //否则把当前项push到临时数组里面
    if (n.indexOf(array[i]) == -1) n.push(array[i]);
  }
  return n;
}
// 判断浏览器是否支持indexOf ，indexOf 为ecmaScript5新方法 IE8以下（包括IE8， IE8只支持部分ecma5）不支持
if (!Array.prototype.indexOf){
  // 新增indexOf方法
  Array.prototype.indexOf = function(item){
    var result = -1, a_item = null;
    if (this.length == 0){
      return result;
    }
    for(var i = 0, len = this.length; i < len; i++){
      a_item = this[i];
      if (a_item === item){
        result = i;
        break;
      }  
    }
    return result;
  }
}

// 速度最快， 占空间最多（空间换时间）
function unique2(array){
  var n = {}, r = [], len = array.length, val, type;
    for (var i = 0; i < array.length; i++) {
        val = array[i];
        type = typeof val;
        if (!n[val]) {
            n[val] = [type];
            r.push(val);
        } else if (n[val].indexOf(type) < 0) {
            n[val].push(type);
            r.push(val);
        }
    }
    return r;
}

function unique3(array){
  var n = [array[0]]; //结果数组
  //从第二项开始遍历
  for(var i = 1; i < array.length; i++) {
    //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
    //那么表示第i项是重复的，忽略掉。否则存入结果数组
    if (array.indexOf(array[i]) == i) n.push(array[i]);
  }
  return n;
}

// 将相同的值相邻，然后遍历去除重复值
function unique4(array){
  array.sort(); 
  var re=[array[0]];
  for(var i = 1; i < array.length; i++){
    if( array[i] !== re[re.length-1])
    {
      re.push(array[i]);
    }
  }
  return re;
}

// 思路：获取没重复的最右一值放入新数组
function unique5(array){
var a = [], l = this.length;
    for(var i=0; i<l; i++) {
//里面的for循环，例如第一次循环，i=0;
      for(var j=i+1; j<l; j++)
//对数组后面的项进行比较，一旦重复，跳出循环，j重新赋值为，与i相等,直达最后哪一项重复
//他的后面没有重复的项，则被推入数组。想法相当巧妙
            if (this[i] === this[j]) j = ++i;
//外面的for循环，没有重复的推入新的数组
      a.push(this[i]);
    }
    return a;
}

//第一种
(function(){
//do something here;
})();

//第二种
(function(){
//do something here;
}());

//第三种,在开头加上!或者~、-、+等
!function(){
//do something here;
};

var mouseWheel = document.getElementById('mouseWheel');
    if (mouseWheel.addEventListener) {
//firefox
        mouseWheel.addEventListener('DOMMouseScroll', function(event) {
//滚轮的事件对象属性
            event.target.innerHTML = event.detail;
            event.stopPropagation();
            event.preventDefault();
        }, false);
    }
//其他浏览器
    mouseWheel.onmousewheel = function(event) {
        event = event || window.event;
//滚轮的事件对象属性
        mouseWheel.innerHTML = event.wheelDelta;
        event.returnValue = false;
    }

var msg = "hello";
console.log(typeof msg )
//输出的是string

var n =null;
var o = new Object();
console.log(typeof n);
//object
console.log(typeof o);
//object

console.log(person instanceof Object)
//person 是对象吗。
console.log(person instanceof Array)
//person 是数组吗。

//函数的声明
function functionName(arg0, arg1, arg2) {
    //函数体
}
//函数的表达式
var functionName = function() {
 //函数体
}

//函数的调用
   sayHi();
//输出的是hello
function sayHi(){
 console.log("hello");
}

//函数的调用,会报错，提示函数未定义
sayHi();
var sayHi = function(){
   console.log("hello");
} 

function sayHi(){
 console.log("hello" + arguments[0] + "," + arguments[1] );
}

function doAdd(num1, num2) {
   if(arguments.length ==1) {
       console.log(num1+10);
   }else if(arguments.length == 2){
      console.log(arguments[0]+num2);
   }
}
//调用函数
doAdd(1, 2);

function doAdd(num1, num2) {
  arguments[1] = 10;
 console.log(arguments[1]+num2);
}
//调用函数
doAdd(1, 2);
//返回的是20,

//基本类型
var addTen(num){
   num+=10;
   return num;
}
var count =20;
var result = addTen(count);
console.log(result);
//返回的是30
console.log(count);
//返回的是20，没有改变

//引用类型
function setName(obj){
  obj.name = "jerry";
  obj = new Object();
   obj.name = "gery";
}
var person = new Object();
setName(person);
console.log(person.name);
//返回的是jerry

function addSomeNumber(num) {
   return num+100;
}
function addSomeNumber(num) {
   return num+200;
}
var result = addSomeNumber(100)
//结果是300

function sum(num1, num2) {
    return num1+num2;
}

function factorial(num) {
   if(num <=1) {
    return 1;
  }else {
     return  num*factorial(num-1);
  }
}
//这上面一个是一个经典的递归函数，看上去并没有问题，但是如果这样的话
var factorial1 = factorial;
factorial =null;
console.log(factorial1(4));
//会报错

function factorial(num) {
   if(num <=1) {
    return 1;
  }else {
   return  num*arguments.callee(num-1);
  }
}
var factorial1 = factorial;
factorial =null;
console.log(factorial1(4));
//这样就不会报错了

function factorial = (function f(num){
  if(num <=1) {
    return 1;
  }else {
   return  num*f(num-1);
  }
});
var factorial1 = factorial;
factorial = null;
console.log(factorial1(4));
//这样就不会报错了

function outputNumbers(count){
  for(var i=0; i<count; i++) {
      console.log(i);
   }
   console.log(i);
}

function outputNumbers(count){
  for(var i=0; i<count; i++) {
      console.log(i);
   }
  var i; //重新声明同一个变量
   console.log(i);
}

//创建了一个函数
function createFunction() {
//创建了一个数组
 var result = new Array();
//一个for循环
 for(var i=0; i<10; i++) {
//一个闭包
    result[i] = function(){
//访问的是其包含函数的变量
           return i;
      }
  }
}

function createFunction() {
 var result = new Array();
 for(var i=0; i<10; i++) {
    result[i] = function(num){
           return function(){
               return num;
          }
      }(i);
  }
return result;
}

//块级作用域语法
 (function(){
    //这里是块级作用域
 })();

var count=5;
outputNumber(count);
//为了让代码更简洁
outputNumber(5);
//我们这样写，是因为变量只不过值的另一种表现形式。因此可以用实际值代替变量

var someFuncton = function(){
  //这里是块级作用域
};
someFuncton();
//根据上面的思路，可以这样写
//实际值代替变量
function(){
   //这里是块级作用域
}();

//但是，function是关键字是当作一个函数的声明的开始，函数声明后面不能跟圆括号。
//而函数的表达式后面可以跟圆括号，把函数声明转为函数表达式，只要像下面这样

(function(){
   //这里是块级作用域
})();

function outputNumber(count) {
 (function(){
    for(var i=0; i<count; i++){
          console.log(i);
     }
})();
console.log(i)
//会出错的。
}

function add(num1, num2) {
   var sum = num1 + num2;
   return sum;
}

function MyObject(){
//私有变量和私有函数
    var privateVariable = 10;
    function privateFunction(){
       return false;
   }
//特权方法
   this.publicMethod = function(){
       privateVariable++;
       return  privateFunction();
   }
}

function Person(name) {
   this.getName = function(){
      return name;
   };
   this.setName = function(value){
          name = value;
   };
}

var person = new Person("jerry");
console.log(person.getName());
//返回jerry
person.setName("gery");
console.log(person.getName());
//返回gery

(function(){
//私有变量和私有函数
    var privateVariable = 10;
    function privateFunction(){
       return false;
   }
//构造函数(注意这个是全局变量)
MyObject = function(){
};
//特权方法
   MyObject.prototype.publicMethod = function(){
       privateVariable++;
       return  privateFunction();
   }
})();

var singleton = {
    name :  value,
    method : function(){
     //这里是方法
    }
};
//模块模式通过为单例添加私有变量和特权方法，能够使其得到增强。
var singleton =function(){
//添加私有变量和函数
var privateVariable = 10;
function privateFunction() {
    return false;
} 
//特权方法
return  {
   publicProperty : true,
   publicMethod : function(){
          privateVariable;
         privateFunction();
     }
};
}();

var singleton =function(){
//添加私有变量和函数
var privateVariable = 10;
function privateFunction() {
    return false;
} 
//创建对象
var object = new CustomType();
//特权方法
   objectProperty : true,
   objectMethod : function(){
          privateVariable;
         privateFunction();
//返回这个对象
return object;
}();

window.onload = function() {
  //可视区域高度 
  var viewH = document.documentElement.clientHeight || document.body.clientHeight;
  // 文档的内容高度
  var contentH = document.body.scrollHeight;
  window.onscroll = function() {
  // 当窗口开始滚动时。
	var sTop = document.body.scrollTop ||document.documentElement.scrollTop;
	// 文档卷曲的高度
	if ((viewH+sTop) >= contentH ){
		alert('滚到底部了');
	 }
        if(sTop ==0 ) {
              alert('滚到顶部了');
       }
  }
}

var canvas = document.getElementById('canvas');
	// 不支持的浏览器直接不显示
   if (!canvas || !canvas.getContext) {
        alert("您的浏览器太旧了,升级您的浏览器");
	return false;
   }

//不建议这样检测
function isSortable(object) {
     return !!object.sort;
}
//建议通过这样检测
function isSortable(object) {
    return typeof object.sort == 'function';
}

//错误，不够具体
var isFirefox = !!(navigator.vendor && navigator.vendorSub);

//错误，假设过头了
var isIE = !!(document.all && document.uniqueID);

//确定浏览器是否支持Netscape
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);

var hasDontEnumQuirk = function(){
     var o = {
         toString: function(){};
      };
   for(var prop in o) {
     if(prop == 'toString') {
            return fasle;
        }
   }
return ture
}();

var client = function(){
    var engine = {
        // 呈现引擎
        ie: 0,
        gecko:0,
        webkit: 0,
        khtml:0,
        opera:0,
        //其他版本号
        ver: null
    };
    // 在此检测呈现引擎，平台和设备
    return {
        engine: engine
    };
}();

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/)) {
    var result = ua.match(/opr\/([\d\.]+)/);
    console.log(result)
    console.log(result[1])
}

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/)) {
    var result = ua.match(/opr\/([\d\.]+)/);
    engine.ver = result[1];
    engine.opera = parseFloat(engine.ver);
}

if(window.opera) {
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
    var result = ua.match(/opr\/([\d\.]+)/);
    engine.ver = result[1];
    engine.opera = parseFloat(engine.ver);
    if(window.opera) {
        engine.ver = window.opera.version();
        engine.opera = parseFloat(engine.ver);
    }
}

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(/applewebkit\/(\S+)/.test(ua)) {
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
    var result = ua.match(/opr\/([\d\.]+)/);
    engine.ver = result[1];
    engine.opera = parseFloat(engine.ver);
    if(window.opera) {
        engine.ver = window.opera.version();
        engine.opera = parseFloat(engine.ver);
    }
}else if(/applewebkit\/(\S+)/.test(ua)) {
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}

if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
    var result = ua.match(/opr\/([\d\.]+)/);
    engine.ver = result[1];
    engine.opera = parseFloat(engine.ver);
    if(window.opera) {
        engine.ver = window.opera.version();
        engine.opera = parseFloat(engine.ver);
    }
}else if(/applewebkit\/(\S+)/.test(ua)) {
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
    var result = ua.match(/opr\/([\d\.]+)/);
    engine.ver = result[1];
    engine.opera = parseFloat(engine.ver);
    if(window.opera) {
        engine.ver = window.opera.version();
        engine.opera = parseFloat(engine.ver);
    }
}else if(/applewebkit\/(\S+)/.test(ua)) {
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}

if (/msie ([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.ie = parseFloat(engine.ver);
}

var client = function(){
    var engine = {
        // 呈现引擎
        ie: 0,
        gecko:0,
        webkit: 0,
        khtml:0,
        opera:0,
        //其他版本号
        ver: null
    };
    // 在此检测呈现引擎，平台和设备
    return {
        engine: engine
    };
}();
var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
    var result = ua.match(/opr\/([\d\.]+)/);
    engine.ver = result[1];
    engine.opera = parseFloat(engine.ver);
    if(window.opera) {
        engine.ver = window.opera.version();
        engine.opera = parseFloat(engine.ver);
    }
}else if(/applewebkit\/(\S+)/.test(ua)) {
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}else if (/msie ([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.ie = parseFloat(engine.ver);
}

var client = function(){
    var engine = {
           // 呈现引擎
           ie: 0,
           gecko:0,
           webkit: 0,
           khtml:0,
           opera:0,
           //其他版本号
           ver: null
        };
    var browser = {
            // 浏览器
            ie: 0,
            firefox:0,
            safari:0,
            konq:0,
            opera:0,
            chrome:0,
            // 其他的版本
            ver: null
        };
        // 在此检测呈现引擎，平台和设备
        return {
            engine: engine,
            browser: browser
        };
}();

var client = function(){
    var engine = {
        // 呈现引擎
        ie: 0,
        gecko:0,
        webkit: 0,
        khtml:0,
        opera:0,
        //其他版本号
        ver: null
    };
    var browser = {
        // 浏览器
        ie: 0,
        firefox:0,
        safari:0,
        konq:0,
        opera:0,
        chrome:0,
        // 其他的版本
        ver: null
    };
    // 在此检测呈现引擎，平台和设备
    return {
        engine: engine,
        browser: browser
    };
}();
var engine = client;
var browser = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
    var result = ua.match(/opr\/([\d\.]+)/);
    engine.ver = browser.ver = result[1];
    engine.opera = browser.opera = parseFloat(engine.ver);
    if(window.opera) {
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    }
}else if(/applewebkit\/(\S+)/.test(ua)) {
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
    // 确定是chrome还是safari
    /*
     * chrome用户代理字符串
     * Mozilla/5.0 (Windows NT 6.1; WOW64)        AppleWebKit/537.36 (KHTML, like Gecko) 
     * Chrome/42.0.2311.152 Safari/537.36
     */
    if(/chrome\/(\S+)/.test(ua)) {
        browser.ver = RegExp["$1"];
        browser.chrome = parseFloat(browser.ver);
    }else if(/version\/(\S+)/.test(ua)) {
        /*
         * safari用户代理字符串
         * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) 
         * Version/5.1.7 Safari/534.57.2
         */
        browser.ver = RegExp["$1"];
        browser.safari = parseFloat(browser.ver);
    }else {
        //近似地确定版本号
        var safariVersion = 1;
        if (engine.webkit < 100){
            safariVersion = 1;
        } else if (engine.webkit < 312){
            safariVersion = 1.2;
        } else if (engine.webkit < 412){
            safariVersion = 1.3;
        } else {
            safariVersion = 2;
        }
        browser.safari = browser.ver = safariVersion;
    }
}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq =  parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);
        /*
         * firefox的用户代理的字符串
         * Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) 
         * Gecko/20100101 Firefox/38.0
         */
        // 确定是不是firefox
        if(/firefox\/(\S+)/.test(ua)) {
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }
}else if (/msie ([^;]+)/.test(ua) || "ActiveXObject" in window){
    if("ActiveXObject" in window) {
        if(/msie ([^;]+)/.test(ua)) {
            engine.ver = browser.ver = RegExp["1"];             engine.ie = browser.ie = parseFloat(engine.ver);         }else {             // ie11+             if(/rv:([^\)]+)\)/.test(ua)) {                 engine.ver = browser.ver = RegExp["1"];             engine.ie = browser.ie = parseFloat(engine.ver);         }else {             // ie11+             if(/rv:([^\)]+)\)/.test(ua)) {                 engine.ver = browser.ver = RegExp["1"];
                engine.ie = browser.ie = parseFloat(engine.ver);
            }
        }
    }
}

// 可以打印下
console.log(browser);

if (client.engine.webkit) { 
    //if it’s WebKit
    if (client.browser.chrome){
       //执行针对Chrome 的代码
    } else if (client.browser.safari){
       //执行针对Safari 的代码
    }
} else if (client.engine.gecko){
    if (client.browser.firefox){
        //执行针对Firefox 的代码
    } else {
       //执行针对其他Gecko 浏览器的代码
    }
}

var client = function(){
    var engine = {
        // 呈现引擎
        ie: 0,
        gecko:0,
        webkit: 0,
        khtml:0,
        opera:0,
        //其他版本号
        ver: null
    };
    var browser = {
        // 浏览器
        ie: 0,
        firefox:0,
        safari:0,
        konq:0,
        opera:0,
        chrome:0,
         // 其他的版本
          ver: null
     };
    var system = {
        win: false,
        mac: false,
        xll: false
    };
    // 在此检测呈现引擎，平台和设备
    return {
        engine: engine,
        browser: browser,
        system: system
    };
}();

var system = client;
var platform = navigator.platform;
system.win = platform.indexOf("Win") == 0;
system.mac = platform.indexOf("Mac") == 0;
system.x11 = (platform.indexOf("X11") == 0) || (platform.indexOf("Linux") == 0);

system.iphone = ua.indexOf(“iphone”) > -1;
system.ipod = ua.indexOf(“ipod”) > -1;
system.ipad = ua.indexOf(“ipad”) > -1; 

//检测iOS 版本
if (system.mac && ua.indexOf("mobile") > -1){
    if (/cpu (?:iphone )?os (\d+_\d+)/.test(ua)){
        system.ios = parseFloat(RegExp.$1.replace("_", "."));
    } else {
        system.ios = 2; //不能真正检测出来，所以只能猜测
    }
}

//检测Android 版本
if (/android (\d+\.\d+)/.test(ua)){
     system.android = parseFloat(RegExp.$1);
}

if (client.engine.webkit){
    if (client.system.ios){
         //iOS 手机的内容
    } else if (client.system.android){
        //Android 手机的内容
    } 
}

var client = function(){
          var engine = {
              // 呈现引擎
              ie: 0,
              gecko:0,
              webkit: 0,
              khtml:0,
              opera:0,
              //其他版本号
              ver: null
          };
          var browser = {
              // 浏览器
              ie: 0,
              firefox:0,
              safari:0,
              konq:0,
              opera:0,
              chrome:0,
              // 其他的版本
              ver: null
          };
          var system = {
              win: false,
              mac: false,
              xll: false,
              // 移动设备
              iphone: false,
              ipod: false,
              ipad: false,
              ios: false,
              android:false
           };
           // 在此检测呈现引擎，平台和设备
           return {
               engine: engine,
               browser: browser,
               system: system
           };
       }();
       var engine = client;
       var browser = client;
       var ua = navigator.userAgent.toLowerCase();
       if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
            var result = ua.match(/opr\/([\d\.]+)/);
            engine.ver = browser.ver = result[1];
            engine.opera = browser.opera = parseFloat(engine.ver);
            if(window.opera) {
                 engine.ver = browser.ver = window.opera.version();
                 engine.opera = browser.opera = parseFloat(engine.ver);
             }
        }else if(/applewebkit\/(\S+)/.test(ua)) {
            engine.ver = RegExp["$1"];
            engine.webkit = parseFloat(engine.ver);
            // 确定是chrome还是safari
            /*
             * chrome用户代理字符串
             * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) 
             * Chrome/42.0.2311.152 Safari/537.36
             */
             if(/chrome\/(\S+)/.test(ua)) {
                  browser.ver = RegExp["$1"];
                  browser.chrome = parseFloat(browser.ver);
             }else if(/version\/(\S+)/.test(ua)) {
                  /*
                   * safari用户代理字符串
                   * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) 
                   * Version/5.1.7 Safari/534.57.2
                   */
                  browser.ver = RegExp["$1"];
                  browser.safari = parseFloat(browser.ver);
             }else {
                  //近似地确定版本号
                  var safariVersion = 1;
                  if (engine.webkit < 100){
                      safariVersion = 1;
                  } else if (engine.webkit < 312){
                      safariVersion = 1.2;
                  } else if (engine.webkit < 412){
                      safariVersion = 1.3;
                  } else {
                      safariVersion = 2;
                  }
                  browser.safari = browser.ver = safariVersion;
              }
        }else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
              engine.ver = browser.ver = RegExp["$1"];
              engine.khtml = browser.konq =  parseFloat(engine.ver);

        }else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
              engine.ver = RegExp["$1"];
              engine.gecko = parseFloat(engine.ver);
              /*
               * firefox的用户代理的字符串
               * Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) 
               * Gecko/20100101 Firefox/38.0
               */
              // 确定是不是firefox
              if(/firefox\/(\S+)/.test(ua)) {
                  browser.ver = RegExp["$1"];
                  browser.firefox = parseFloat(browser.ver);
              }
         }else if (/msie ([^;]+)/.test(ua) || "ActiveXObject" in window){
              if("ActiveXObject" in window) {
                 if(/msie ([^;]+)/.test(ua)) {
                    engine.ver = browser.ver = RegExp["$1"];
                    engine.ie = browser.ie = parseFloat(engine.ver);
                 }else {
                    if(/rv:([^\)]+)\)/.test(ua)) {
                        engine.ver = browser.ver = RegExp["$1"];
                        engine.ie = browser.ie = parseFloat(engine.ver);
                    }
                 }
              }
              
         }
         // 检测平台
         var system = client;
         var platform = navigator.platform;
         system.win = platform.indexOf("Win") == 0;
         system.mac = platform.indexOf("Mac") == 0;
         system.x11 = (platform.indexOf("X11") == 0) || (platform.indexOf("Linux") == 0);
            
         // 移动设备
         system.iphone = ua.indexOf("iphone") > -1;
         system.ipod = ua.indexOf("ipod") > -1;
         system.ipad = ua.indexOf("ipad") > -1;
         //检测iOS 版本
         if (system.mac && ua.indexOf("mobile") > -1){
              if (/cpu (?:iphone )?os (\d+_\d+)/.test(ua)){
                  system.ios = parseFloat(RegExp.$1.replace("_", "."));
              } else {
                  system.ios = 2; //不能真正检测出来，所以只能猜测
              }
          }
          //检测Android 版本
          if (/android (\d+\.\d+)/.test(ua)){
              system.android = parseFloat(RegExp.$1);
          }

function sum(num1, num2) {
   return num1+num2;
}
//使用apply,第二参数为arguments对象
function callSum1(num1, num2){
    return sum.apply(this, arguments);
}
//使用apply,第二参数为数组
function callSum2(num1, num2){
    return sum.apply(this, [num1, num2]);
}

console.log(callSum1(10, 10));
//返回20
console.log(callSum2(10, 10));
//返回20

function sum(num1, num2) {
   return num1+num2;
}

function callSum1(num1, num2){
    return sum.apply(this, num1, num2);
}
console.log(callSum1(10, 10));
//返回20

window.color = "red";
var o = {
  color :  "blue"
}
function sayColor() {
  console.log(this.color)
}
sayColor(); //red
sayColor.call(o);  //blue
sayColor.call(window); //red
sayColor.call(this) //red

window.oclor = "red";
var o = {
   color : “blue”
};
function sayColor(){
   console.log(this.color);
}
var color1 = sayColor.bind(o);
color1();
//返回的是blue

var supportsDOM2CSS = document.implementation.hasFeture("CSS","2.0");
var supportsDOM2CSS2 = document.implementation.hasFeture("CSS2","2.0");

var div = document.getElementById("div");
div.style.color = "red";
//获得相应的css属性，需要把css的属性转为驼峰式命名法
div.style.backgroundColor = "#ccc"; 

  div.style.cssText = "width:200px, height:100px; background-color:#ccc";

  for (var i = 0; i < div.style.length; i++) {
//方括号访问法
    console.log(div.style[i]);
//item访问法
    console.log(div.style.item(i));
}

var prop;
  for (var i = 0; i < div.style.length; i++) {
//取得属性名
   prop = div.style[i];
//取得属性值
value = div.style. getPropertyValue(prop);
}

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //在某些浏览器中是“1px solid black” 

Person.isPrototypeOf(person1);
//Person是否为person1的原型，如果是的话，返回true。不是的话，返回false;

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

var person = {
    friends: ["a", "b"]
};
var test1 = Object.create(person);
     test1.friends.push("c");
console.log(person.friends); //["a", "b", "c"]

$.extend({
  sayHello: function(name) {
    console.log('Hello,' + (name ? name : 'Dude') + '!');
  }
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用

$.extend({
  log: function(message) {
    var now = new Date(),
      y = now.getFullYear(),
      m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
      d = now.getDate(),
      h = now.getHours(),
      min = now.getMinutes(),
      s = now.getSeconds(),
      time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
    console.log(time + ' My App: ' + message);
  }
})
$.log('initializing...'); //调用

$.fn.pluginName = function() {
  //your code goes here
}

$.fn.myPlugin = function() {
  //在这里面,this指的是用jQuery选中的元素
  //example :$('a'),则this=$('a')
  this.css('color', 'red');
}

$.fn.myPlugin = function() {
  //在这里面,this指的是用jQuery选中的元素
  this.css('color', 'red');
  this.each(function() {
    //对每个元素进行操作
    $(this).append(' ' + $(this).attr('href'));
  }))
}

$.fn.myPlugin = function() {
  //在这里面,this指的是用jQuery选中的元素
  this.css('color', 'red');
  return this.each(function() {
    //对每个元素进行操作
    $(this).append(' ' + $(this).attr('href'));
  }))
}

$.fn.myPlugin = function(options) {
  var defaults = {
    'color': 'red',
    'fontSize': '12px'
  };
  var settings = $.extend(defaults, options);
  return this.css({
    'color': settings.color,
    'fontSize': settings.fontSize
  });
}

//覆盖默认的颜色
$('a').myPlugin({
  'color': '#2C9929'
});
//覆盖默认的颜色和字体大小
$('a').myPlugin({
  'color': '#2C9929',
  'fontSize': '20px'
});

$.fn.myPlugin = function(options) {
  var defaults = {
    'color': 'red',
    'fontSize': '12px'
  };
  var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
  return this.css({
    'color': settings.color,
    'fontSize': settings.fontSize
  });
}

//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
  this.$element = ele,
  this.defaults = {
    'color': 'red',
    'fontSize': '12px',
    'textDecoration':'none'
  },
  this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
  beautify: function() {
    return this.$element.css({
      'color': this.options.color,
      'fontSize': this.options.fontSize,
      'textDecoration': this.options.textDecoration
    });
  }
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
  //创建Beautifier的实体
  var beautifier = new Beautifier(this, options);
  //调用其方法
  return beautifier.beautify();
}

var foo=function(){
  //别人的代码
}//注意这里没有用分号结尾
 
//开始我们的代码。。。
(function(){
  //我们的代码。。
  alert('Hello!');
})();

var foo=function(){
  //别人的代码
}//注意这里没有用分号结尾
 
//开始我们的代码。。。
;(function(){
  //我们的代码。。
  alert('Hello!');
})();

;(function($,window,document,undefined){
  //我们的代码。。
  //blah blah blah...
})(jQuery,window,document);

;(function($, window, document,undefined) {
  //定义Beautifier的构造函数
  var Beautifier = function(ele, opt) {
    this.$element = ele,
    this.defaults = {
      'color': 'red',
      'fontSize': '12px',
      'textDecoration': 'none'
    },
    this.options = $.extend({}, this.defaults, opt)
  }
  //定义Beautifier的方法
  Beautifier.prototype = {
    beautify: function() {
      return this.$element.css({
        'color': this.options.color,
        'fontSize': this.options.fontSize,
        'textDecoration': this.options.textDecoration
      });
    }
  }
  //在插件中使用Beautifier对象
  $.fn.myPlugin = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
  }
})(jQuery, window, document);

{
  "name": "sliphover",
  "title": "SlipHover",
  "description": "Apply direction aware 2D/3D hover effect to images",
  "keywords": [
    "direction-aware",
    "animation",
    "effect",
    "hover",
    "image",
    "overlay",
    "gallery"
  ],
  "version": "1.1.1",
  "author": {
    "name": "Wayou",
    "email": "[email protected]",
    "url": "https://github.com/Wayou"
  },
  "maintainers": [
    {
      "name": "Wayou",
      "email": "[email protected]",
      "url": "https://github.com/Wayou"
    }
  ],
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
    }
  ],
  "bugs": "https://github.com/Wayou/sliphover/issues",
  "homepage": "http://wayou.github.io/SlipHover/",
  "docs": "http://wayou.github.io/SlipHover/",
  "demo":"http://wayou.github.io/SlipHover/",
  "download": "https://github.com/Wayou/SlipHover/zipball/master",
  "dependencies": {
    "jquery": ">=1.5"
  }
}