diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
new file mode 100644
index 0000000..b8387eb
--- /dev/null
+++ b/.idea/jsLibraryMappings.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..28a804d
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..9e73ec1
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/web-front-end-thinking-tutorial.iml b/.idea/web-front-end-thinking-tutorial.iml
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/web-front-end-thinking-tutorial.iml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/practice/shiluoqiong/1/notes b/practice/shiluoqiong/1/notes
new file mode 100644
index 0000000..2fefdd3
--- /dev/null
+++ 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
new file mode 100644
index 0000000..3e15dc4
--- /dev/null
+++ b/practice/shiluoqiong/1/t1.js
@@ -0,0 +1,4 @@
+/**
+ * Created by luoqiong on 2016/4/2.
+ */
+parseInt('123',10);
\ No newline at end of file
diff --git a/practice/shiluoqiong/1/t2.js b/practice/shiluoqiong/1/t2.js
new file mode 100644
index 0000000..0e8b566
--- /dev/null
+++ 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)});
\ No newline at end of file
diff --git a/practice/shiluoqiong/1/t3.js b/practice/shiluoqiong/1/t3.js
new file mode 100644
index 0000000..6f92e10
--- /dev/null
+++ 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);
\ No newline at end of file
diff --git a/practice/shiluoqiong/1/t4.js b/practice/shiluoqiong/1/t4.js
new file mode 100644
index 0000000..9c55e6d
--- /dev/null
+++ 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');
\ No newline at end of file
diff --git a/practice/shiluoqiong/1/t5.js b/practice/shiluoqiong/1/t5.js
new file mode 100644
index 0000000..07236de
--- /dev/null
+++ 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
new file mode 100644
index 0000000..a1e1542
--- /dev/null
+++ 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
new file mode 100644
index 0000000..7111362
--- /dev/null
+++ 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
new file mode 100644
index 0000000..fca6c39
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/practice/shiluoqiong/2/index.html b/practice/shiluoqiong/2/index.html
new file mode 100644
index 0000000..cc8ec39
--- /dev/null
+++ b/practice/shiluoqiong/2/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ SearchBoxx
+
+
+
+
+
+
+
+
+
diff --git a/practice/shiluoqiong/2/index.js b/practice/shiluoqiong/2/index.js
new file mode 100644
index 0000000..c750ceb
--- /dev/null
+++ 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();
+ }
+ }
+
+}());
\ No newline at end of file
diff --git a/practice/shiluoqiong/2/notes b/practice/shiluoqiong/2/notes
new file mode 100644
index 0000000..0aefc18
--- /dev/null
+++ 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
diff --git a/practice/shiluoqiong/2/style.css b/practice/shiluoqiong/2/style.css
new file mode 100644
index 0000000..80008fb
--- /dev/null
+++ b/practice/shiluoqiong/2/style.css
@@ -0,0 +1,55 @@
+body
+{
+ font-family: Arial;
+ font-size: 10px;
+ margin-top: 3rem;
+ margin-left: 3rem;
+ background-color: #eaeaea;
+}
+
+#search
+{
+ position:absolute;
+ top:40%;
+ left:30%;
+}
+
+.inputBox
+{
+ width:500px;
+ height:30px;
+ line-height: 30px;
+}
+
+li
+{
+ list-style-type:none;
+ width: 500px;
+ height: 15px;
+ margin-bottom:1rem;
+}
+
+#search ul
+{
+ list-style: none;
+ margin:0;
+ padding:0;
+ background-color: #fff;
+ opacity:.8;
+}
+
+#search li
+{
+ margin-bottom:0;
+ border-bottom: 1px solid #eee;
+}
+
+#search li:hover
+{
+ background-color: #eee;
+}
+
+.active
+{
+ background-color: #ddd;
+}
\ No newline at end of file
diff --git a/practice/shiluoqiong/3/main.js b/practice/shiluoqiong/3/main.js
new file mode 100644
index 0000000..cdbe801
--- /dev/null
+++ b/practice/shiluoqiong/3/main.js
@@ -0,0 +1,3 @@
+/**
+ * Created by luoqiong on 2016/4/13.
+ */