SimplyY · ChongChongS · Mar 31, 2016 · Mar 31, 2016 · Mar 31, 2016 · Apr 2, 2016
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/web-front-end-thinking-tutorial.iml b/.idea/web-front-end-thinking-tutorial.iml
diff --git a/practice/shiluoqiong/1/notes b/practice/shiluoqiong/1/notes
@@ -0,0 +1,10 @@
+1.parseInt(string, radix);
+-将字符串转换为数字，radix表示进制
+2.setInterval与setTimeout
+-setInterval(code, delay) - 每隔指定时间自动执行方法
+-setTimeout(code, [delay]) - 在执行时,是在载入后延迟指定时间后,去执行一次表达式
+3.call与apply
+-call()和apply()都是为了改变函数体内部this的指向
+-func.call(this, arg1, arg2);
+-func.apply(this, [arg1, arg2]);
+-当参数是数组时用 apply.
diff --git a/practice/shiluoqiong/1/t1.js b/practice/shiluoqiong/1/t1.js
@@ -0,0 +1,4 @@
+/**
+ * Created by luoqiong on 2016/4/2.
+ */
+parseInt('123',10);
diff --git a/practice/shiluoqiong/1/t2.js b/practice/shiluoqiong/1/t2.js
@@ -0,0 +1,5 @@
+/**
+ * Created by luoqiong on 2016/3/31.
+ */
+var array = ['1','2'];
+array.map(function(item){return parseInt(item,10)});
diff --git a/practice/shiluoqiong/1/t3.js b/practice/shiluoqiong/1/t3.js
@@ -0,0 +1,5 @@
+/**
+ * Created by luoqiong on 2016/3/31.
+ */
+var childCollection = document.querySelectorAll('div');
+Array.prototype.slice.call(childCollection);
diff --git a/practice/shiluoqiong/1/t4.js b/practice/shiluoqiong/1/t4.js
@@ -0,0 +1,18 @@
+/**
+ * Created by MP on 2016/4/2.
+ */
+/*
+function spacify(s) {
+    var result = "";
+    for(var i = 0; i < s.length; i++){
+        if(s.charAt(i) != ' ')
+            result += s.charAt(i);
+        result += " ";
+    }
+    return result;
+}*/
+function spacify(s){
+    var newStr = s.replace(/\s/g,'').split('').join(' ');
+    return newStr;
+}
+spacify('hello world');
diff --git a/practice/shiluoqiong/1/t5.js b/practice/shiluoqiong/1/t5.js
@@ -0,0 +1,8 @@
+/**
+ * Created by MP on 2016/4/2.
+ */
+function sortStr(s){
+    var sortedS = Array.prototype.slice.call(s).sort().join('');
+    return sortedS;
+}
+console.log(sortStr('cba'));
diff --git a/practice/shiluoqiong/1/t6.js b/practice/shiluoqiong/1/t6.js
@@ -0,0 +1,16 @@
+/**
+ * Created by MP on 2016/4/2.
+ */
+function logEverySecond(){
+    var a = ['a', 'b', 'c', 'd'];
+    for (var i = 0; i < a.length; i++) {
+        (function(j){
+            setTimeout(function(){
+                console.log(a[j]);
+            }, j * 1000);
+        })(i);
+    }
+}
+logEverySecond();
+
+
diff --git a/practice/shiluoqiong/1/t7.js b/practice/shiluoqiong/1/t7.js
@@ -0,0 +1,6 @@
+/**
+ * Created by MP on 2016/4/2.
+ */
+function log() {
+    console.log.apply(console, arguments);
+}
diff --git a/practice/shiluoqiong/1/t8.js b/practice/shiluoqiong/1/t8.js
@@ -0,0 +1,15 @@
+/**
+ * Created by MP on 2016/4/2.
+ */
+var User = {
+    count: 1,
+
+    getCount: function(){
+        return this.count;
+    }
+};
+
+console.log(User.getCount()); //1
+
+var func = User.getCount;
+console.log(func()); //undefined
diff --git a/practice/shiluoqiong/2/index.html b/practice/shiluoqiong/2/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>SearchBoxx</title>
+    <link rel="stylesheet" href="style.css" media="screen" charset="utf-8">
+</head>
+<body>
+<div id="search">
+    <input class="inputBox" type="text" name="name" value="" autocomplete="off">
+</div>
+<script src="index.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/practice/shiluoqiong/2/index.js b/practice/shiluoqiong/2/index.js
@@ -0,0 +1,159 @@
+(function() {
+    var search = document.getElementById('search');
+    var ul = document.createElement('ul');
+    search.appendChild(ul);
+
+    var inputNode = document.getElementsByTagName('input')[0];
+    var data = ['ab', 'abe', 'ansjka', 'bc', 'bgs', 'cs', 'dw', 'eac', 'fg', 'gw','daidaidai'];
+
+    listenChange();
+
+    //listening the change of input
+    function listenChange(){
+        if(inputNode.addEventListener){
+            inputNode.addEventListener('input', handler, false);
+        }else if(inputNode.attachEvent){
+            //IE8及以下
+            inputNode.attachEvent('onpropertychange', handler);
+        }
+    }
+
+    //if the inputText change, call the callback function
+    function handler(){
+        var inputVal = (inputNode.value).trim();
+        if(!inputVal){
+            clear();
+            return;
+        }
+        clear();
+        autoSuggest(inputVal);
+        replaceContent(ul);
+    }
+
+    function autoSuggest(value){
+        var listNode;
+        var list = findResults(value);
+
+        for (var i = 0, len = list.length; i < len; i++) {
+            listNode = document.createElement('li');
+            listNode.className= "li";
+            listNode.innerHTML = list[i];
+            ul.appendChild(listNode);
+        }
+    }
+
+    function replaceContent(ul){
+        //click
+        delegate(ul, 'li', 'click', function(){
+            //this.innerHTML获取target的内容
+            inputNode.value = this.innerHTML;
+            //after click,remove list
+            clear();
+        });
+
+        //keydown
+        keyMove();
+    }
+
+    function delegate(parent, child, eventName, handler){
+        var childNode = parent.querySelectorAll(child);
+        var childArr = Array.prototype.slice.call(childNode);
+
+        parent.addEventListener(eventName, function(e){
+            e = e || window.event;
+            var eventTarget = e.target || e.srcElement;
+
+            if(childArr.indexOf(eventTarget) !== -1){
+                handler.call(eventTarget, e);
+            }
+        }, false);
+    }
+
+    function keyMove(){
+        document.onkeydown = function(event){
+            event = event || window.event;
+            var currentLi = document.getElementsByClassName('active')[0];
+
+            //向上
+            if(event.keyCode === 38){
+                if(currentLi){
+                    var preLi = currentLi.previousSibling;
+                    if(preLi){
+                        removeClass(currentLi, 'active');
+                        addClass(preLi, 'active');
+                    }
+                }
+            }
+            //向下
+            if(event.keyCode === 40){
+                if(!currentLi){
+                    currentLi = ul.getElementsByTagName('li')[0];
+                    addClass(currentLi, 'active');
+                }else{
+                    var nextLi = currentLi.nextSibling;
+                    if(nextLi){
+                        removeClass(currentLi, 'active');
+                        addClass(nextLi, 'active');
+                    }
+                }
+
+            }
+            //enter
+            if(event.keyCode === 13){
+                inputNode.value = currentLi.innerHTML;
+                clear();
+            }
+        };
+    }
+
+    //get match results
+    function findResults(value){
+        var re = new RegExp('^' + value);
+        var list = [];
+
+        for (var i = 0, len = data.length; i < len; i++) {
+            if(re.test(data[i])){
+                list.push(data[i]);
+            }
+        }
+
+        return list;
+    }
+
+    function clear(){
+        var listNode = ul.getElementsByClassName('li');
+
+        for (var len = listNode.length, i = len - 1; i >= 0; i--) {
+            ul.removeChild(listNode[i]);
+        }
+    }
+
+    //无论添加class还是移除class，先判断class是否存在。
+    function hasClass(element, className) {
+        //正则匹配，存在class时返回数组，不存在时返回null
+        var classes = element.className.match(/\S+/g);
+
+        if (classes === null || classes.indexOf(className) === -1) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    // 为element增加一个样式名为newClassName的新样式
+    function addClass(element, newClassName) {
+        if (!hasClass(element, newClassName)) {
+            //兼顾到原来已经有不同的样式
+            element.className = (element.className + ' ' + newClassName).trim();
+        }
+    }
+
+    // 移除element中的样式oldClassName
+    function removeClass(element, oldClassName) {
+        if (hasClass(element, oldClassName)) {
+            var temp = element.className.replace(oldClassName, "");
+            element.className = temp.trim();
+        }
+    }
+
+}());
diff --git a/practice/shiluoqiong/2/notes b/practice/shiluoqiong/2/notes
@@ -0,0 +1,33 @@
+1.link与src区别
+-href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
+
+-src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。
+
+2.实现搜索框自动补全的步骤
+-若有输入或输入框改变（监听）->获取输入->根据输入得到相应的匹配字符串->将这些字符串显示到输入框之下
+-键盘响应：若有下拉框且按下上或下键->改变高亮文本->若按回车则将输入框中的文本改为下拉框中的文本
+-鼠标响应：若有下拉框且鼠标悬停在下拉框上->改变低亮文本->点击后将输入框中的文本改为点击的文本
+
+-①如何实时监听输入框变化？
+-IE: onpropertychange
+-非IE：oninput
+
+-②如何得到相应的匹配字符串？
+-RegExp.test() :  函数返回一个布尔值，用于指示在所搜索的字符串中是否存在正则表达式模式对应的匹配。
+
+3.attachEvent和addEventListener的不同
+-都是为某一事件附加其他的处理事件。
+-attachEvent不支持Mozilla系列，addEventListener支持。
+-两者的执行顺序也不同。
+-attachEvent:
+-var btn1Obj = document.getElementById("btn1");
+-btn1Obj.attachEvent("onclick",method1);
+-btn1Obj.attachEvent("onclick",method2);
+-btn1Obj.attachEvent("onclick",method3);
+-执行顺序为method3->method2->method1
+-addEventListener :
+-var btn1Obj = document.getElementById("btn1");
+-btn1Obj.addEventListener("click",method1,false);
+-btn1Obj.addEventListener("click",method2,false);
+-btn1Obj.addEventListener("click",method3,false);
+-执行顺序为method1->method2->method3