From 01ee3db52d75b58f4490c6307cb790abf663dccc Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Thu, 31 Mar 2016 20:32:49 +0800 Subject: [PATCH 01/13] test --- .idea/vcs.xml | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .idea/vcs.xml 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 From 82d3bab6223e1b92712db05c2c70cadfbb07e273 Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Thu, 31 Mar 2016 20:36:03 +0800 Subject: [PATCH 02/13] test --- practice/shiluoqiong/1/test1.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 practice/shiluoqiong/1/test1.js diff --git a/practice/shiluoqiong/1/test1.js b/practice/shiluoqiong/1/test1.js new file mode 100644 index 0000000..a98ee54 --- /dev/null +++ b/practice/shiluoqiong/1/test1.js @@ -0,0 +1,3 @@ +/** + * Created by luoqiong on 2016/3/31. + */ From fbd96ca4681662279db6b41e05b9ebac83b60743 Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Thu, 31 Mar 2016 20:45:27 +0800 Subject: [PATCH 03/13] test --- practice/shiluoqiong/1/test1.js | 1 + 1 file changed, 1 insertion(+) diff --git a/practice/shiluoqiong/1/test1.js b/practice/shiluoqiong/1/test1.js index a98ee54..4718881 100644 --- a/practice/shiluoqiong/1/test1.js +++ b/practice/shiluoqiong/1/test1.js @@ -1,3 +1,4 @@ /** * Created by luoqiong on 2016/3/31. */ +parseInt('123',10); \ No newline at end of file From 4e038195be90729566a68e1205ee301540f01d42 Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Sat, 2 Apr 2016 12:11:54 +0800 Subject: [PATCH 04/13] t123 --- practice/shiluoqiong/1/t2.js | 5 +++++ practice/shiluoqiong/1/{test1.js => t3.js} | 1 - 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 practice/shiluoqiong/1/t2.js rename practice/shiluoqiong/1/{test1.js => t3.js} (70%) diff --git a/practice/shiluoqiong/1/t2.js b/practice/shiluoqiong/1/t2.js new file mode 100644 index 0000000..7f2cf5e --- /dev/null +++ b/practice/shiluoqiong/1/t2.js @@ -0,0 +1,5 @@ +/** + * Created by luoqiong on 2016/3/31. + */ +var array = ['1','2']; +var b = array.map(function(item){return parseInt(item,10)}); \ No newline at end of file diff --git a/practice/shiluoqiong/1/test1.js b/practice/shiluoqiong/1/t3.js similarity index 70% rename from practice/shiluoqiong/1/test1.js rename to practice/shiluoqiong/1/t3.js index 4718881..a98ee54 100644 --- a/practice/shiluoqiong/1/test1.js +++ b/practice/shiluoqiong/1/t3.js @@ -1,4 +1,3 @@ /** * Created by luoqiong on 2016/3/31. */ -parseInt('123',10); \ No newline at end of file From 8cf22e754b52f696b5e331b52d2f6470c01ff416 Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Sat, 2 Apr 2016 12:14:10 +0800 Subject: [PATCH 05/13] t123 --- practice/shiluoqiong/1/t2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/practice/shiluoqiong/1/t2.js b/practice/shiluoqiong/1/t2.js index 7f2cf5e..0e8b566 100644 --- a/practice/shiluoqiong/1/t2.js +++ b/practice/shiluoqiong/1/t2.js @@ -2,4 +2,4 @@ * Created by luoqiong on 2016/3/31. */ var array = ['1','2']; -var b = array.map(function(item){return parseInt(item,10)}); \ No newline at end of file +array.map(function(item){return parseInt(item,10)}); \ No newline at end of file From cdc6739fed0addb57c5c362285ae41507eb68967 Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Sat, 2 Apr 2016 12:15:13 +0800 Subject: [PATCH 06/13] t123 --- practice/shiluoqiong/1/t1.js | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 practice/shiluoqiong/1/t1.js 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 From d28064dea127e0e3e2de65a5fb1732d7262df915 Mon Sep 17 00:00:00 2001 From: ChongChongS <609566704@qq.com> Date: Sat, 2 Apr 2016 19:48:04 +0800 Subject: [PATCH 07/13] t1-8 --- practice/shiluoqiong/1/notes | 8 ++++++++ practice/shiluoqiong/1/t3.js | 2 ++ practice/shiluoqiong/1/t4.js | 13 +++++++++++++ practice/shiluoqiong/1/t5.js | 10 ++++++++++ practice/shiluoqiong/1/t6.js | 5 +++++ practice/shiluoqiong/1/t7.js | 6 ++++++ practice/shiluoqiong/1/t8.js | 4 ++++ 7 files changed, 48 insertions(+) create mode 100644 practice/shiluoqiong/1/notes create mode 100644 practice/shiluoqiong/1/t4.js create mode 100644 practice/shiluoqiong/1/t5.js create mode 100644 practice/shiluoqiong/1/t6.js create mode 100644 practice/shiluoqiong/1/t7.js create mode 100644 practice/shiluoqiong/1/t8.js diff --git a/practice/shiluoqiong/1/notes b/practice/shiluoqiong/1/notes new file mode 100644 index 0000000..2c1f82b --- /dev/null +++ b/practice/shiluoqiong/1/notes @@ -0,0 +1,8 @@ +1.parseInt(string, radix); + 将字符串转换为数字，radix表示进制 +2.setInterval(code, delay) - 每隔指定时间自动执行方法 + setTimeout(code, [delay]) - 在执行时,是在载入后延迟指定时间后,去执行一次表达式 +3.call()和apply()都是为了改变函数体内部this的指向 + func.call(this, arg1, arg2); + func.apply(this, [arg1, arg2]); + 当参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。 diff --git a/practice/shiluoqiong/1/t3.js b/practice/shiluoqiong/1/t3.js index a98ee54..6f92e10 100644 --- a/practice/shiluoqiong/1/t3.js +++ b/practice/shiluoqiong/1/t3.js @@ -1,3 +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..7f98f94 --- /dev/null +++ b/practice/shiluoqiong/1/t4.js @@ -0,0 +1,13 @@ +/** + * 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; +} +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..d254573 --- /dev/null +++ b/practice/shiluoqiong/1/t5.js @@ -0,0 +1,10 @@ +/** + * Created by MP on 2016/4/2. + */ +function overTurn(s){ + var result = ""; + for(var i = s.length; i >= 0; i--) + result += s.charAt(i); + return result; +} +overTurn('cba'); diff --git a/practice/shiluoqiong/1/t6.js b/practice/shiluoqiong/1/t6.js new file mode 100644 index 0000000..a244a16 --- /dev/null +++ b/practice/shiluoqiong/1/t6.js @@ -0,0 +1,5 @@ +/** + * Created by MP on 2016/4/2. + */ +var a = ['a','b','c','d']; +setInterval("console.log(a)","1000"); \ No newline at end of file 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..d380c43 --- /dev/null +++ b/practice/shiluoqiong/1/t8.js @@ -0,0 +1,4 @@ +/** + * Created by MP on 2016/4/2. + */ +undefined \ No newline at end of file From 84e9f3ef322c1dcc131c304743082bbc955609c8 Mon Sep 17 00:00:00 2001 From: ChongChongS <609566704@qq.com> Date: Sat, 2 Apr 2016 19:52:15 +0800 Subject: [PATCH 08/13] t1-8 --- practice/shiluoqiong/1/notes | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/practice/shiluoqiong/1/notes b/practice/shiluoqiong/1/notes index 2c1f82b..da3fdc8 100644 --- a/practice/shiluoqiong/1/notes +++ b/practice/shiluoqiong/1/notes @@ -1,8 +1,10 @@ 1.parseInt(string, radix); - 将字符串转换为数字，radix表示进制 -2.setInterval(code, delay) - 每隔指定时间自动执行方法 - setTimeout(code, [delay]) - 在执行时,是在载入后延迟指定时间后,去执行一次表达式 -3.call()和apply()都是为了改变函数体内部this的指向 - func.call(this, arg1, arg2); - func.apply(this, [arg1, arg2]); - 当参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。 +-将字符串转换为数字，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]); +-当参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。 From 8537e75b2a865de25cfa5b60bc361cbd987943df Mon Sep 17 00:00:00 2001 From: ChongChongS <609566704@qq.com> Date: Sat, 2 Apr 2016 20:55:53 +0800 Subject: [PATCH 09/13] t1-8 --- practice/shiluoqiong/1/notes | 2 +- practice/shiluoqiong/1/t4.js | 5 +++++ practice/shiluoqiong/1/t5.js | 4 ++-- practice/shiluoqiong/1/t6.js | 14 ++++++++++++-- practice/shiluoqiong/1/t8.js | 13 ++++++++++++- 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/practice/shiluoqiong/1/notes b/practice/shiluoqiong/1/notes index da3fdc8..2fefdd3 100644 --- a/practice/shiluoqiong/1/notes +++ b/practice/shiluoqiong/1/notes @@ -7,4 +7,4 @@ -call()和apply()都是为了改变函数体内部this的指向 -func.call(this, arg1, arg2); -func.apply(this, [arg1, arg2]); --当参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。 +-当参数是数组时用 apply. diff --git a/practice/shiluoqiong/1/t4.js b/practice/shiluoqiong/1/t4.js index 7f98f94..9c55e6d 100644 --- a/practice/shiluoqiong/1/t4.js +++ b/practice/shiluoqiong/1/t4.js @@ -1,6 +1,7 @@ /** * Created by MP on 2016/4/2. */ +/* function spacify(s) { var result = ""; for(var i = 0; i < s.length; i++){ @@ -9,5 +10,9 @@ function spacify(s) { 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 index d254573..e74551c 100644 --- a/practice/shiluoqiong/1/t5.js +++ b/practice/shiluoqiong/1/t5.js @@ -1,10 +1,10 @@ /** * Created by MP on 2016/4/2. */ -function overTurn(s){ +function sortStr(s){ var result = ""; for(var i = s.length; i >= 0; i--) result += s.charAt(i); return result; } -overTurn('cba'); +sortStr('cba'); diff --git a/practice/shiluoqiong/1/t6.js b/practice/shiluoqiong/1/t6.js index a244a16..b09bd8f 100644 --- a/practice/shiluoqiong/1/t6.js +++ b/practice/shiluoqiong/1/t6.js @@ -1,5 +1,15 @@ /** * Created by MP on 2016/4/2. */ -var a = ['a','b','c','d']; -setInterval("console.log(a)","1000"); \ No newline at end of file +function logEverSecond(){ + for (var i = 0; i < a.length; i++) { + (function(j){ + setTimeout(function(){ + console.log(a[j]); + }, j * 1000); + })(i); + } +} +logEverSecond(); + + diff --git a/practice/shiluoqiong/1/t8.js b/practice/shiluoqiong/1/t8.js index d380c43..fca6c39 100644 --- a/practice/shiluoqiong/1/t8.js +++ b/practice/shiluoqiong/1/t8.js @@ -1,4 +1,15 @@ /** * Created by MP on 2016/4/2. */ -undefined \ No newline at end of file +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 From af0d381e154033ec968db1893c290743f2474566 Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Fri, 8 Apr 2016 12:52:48 +0800 Subject: [PATCH 10/13] t123 --- .idea/jsLibraryMappings.xml | 6 ++ .idea/misc.xml | 6 ++ practice/shiluoqiong/1/t5.js | 8 +- practice/shiluoqiong/1/t6.js | 5 +- practice/shiluoqiong/2/index.html | 14 +++ practice/shiluoqiong/2/index.js | 137 ++++++++++++++++++++++++++++++ practice/shiluoqiong/2/style.css | 36 ++++++++ 7 files changed, 205 insertions(+), 7 deletions(-) create mode 100644 .idea/jsLibraryMappings.xml create mode 100644 .idea/misc.xml create mode 100644 practice/shiluoqiong/2/index.html create mode 100644 practice/shiluoqiong/2/index.js create mode 100644 practice/shiluoqiong/2/style.css 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/practice/shiluoqiong/1/t5.js b/practice/shiluoqiong/1/t5.js index e74551c..07236de 100644 --- a/practice/shiluoqiong/1/t5.js +++ b/practice/shiluoqiong/1/t5.js @@ -2,9 +2,7 @@ * Created by MP on 2016/4/2. */ function sortStr(s){ - var result = ""; - for(var i = s.length; i >= 0; i--) - result += s.charAt(i); - return result; + var sortedS = Array.prototype.slice.call(s).sort().join(''); + return sortedS; } -sortStr('cba'); +console.log(sortStr('cba')); diff --git a/practice/shiluoqiong/1/t6.js b/practice/shiluoqiong/1/t6.js index b09bd8f..a1e1542 100644 --- a/practice/shiluoqiong/1/t6.js +++ b/practice/shiluoqiong/1/t6.js @@ -1,7 +1,8 @@ /** * Created by MP on 2016/4/2. */ -function logEverSecond(){ +function logEverySecond(){ + var a = ['a', 'b', 'c', 'd']; for (var i = 0; i < a.length; i++) { (function(j){ setTimeout(function(){ @@ -10,6 +11,6 @@ function logEverSecond(){ })(i); } } -logEverSecond(); +logEverySecond(); diff --git a/practice/shiluoqiong/2/index.html b/practice/shiluoqiong/2/index.html new file mode 100644 index 0000000..3f451d4 --- /dev/null +++ b/practice/shiluoqiong/2/index.html @@ -0,0 +1,14 @@ + + + + + SearchBoxx + + + + + + + \ No newline at end of file diff --git a/practice/shiluoqiong/2/index.js b/practice/shiluoqiong/2/index.js new file mode 100644 index 0000000..a433a61 --- /dev/null +++ b/practice/shiluoqiong/2/index.js @@ -0,0 +1,137 @@ +/** + * Created by luoqiong on 2016/4/7. + */ +(function(){ + //获取div search 和 input + var search = document.getElementById('search'); + var inputNode = document.getElementsByTagName('input')[0]; + //新建ul，用来放自动补全的字符串，向search添加ul结点 + var ul = document.createElement('ul'); + search.appendChild(ul); + var data = ['ab','bc','abc','bcd','cde','daidaidai','dyyre']; + + listenChange(); + + //监听变化 + function listenChange(){ + if(inputNode.addEventListener){ + inputNode.addEventListener('input', handler, false); + }else if(inputNode.attachEvent) { + //IE + inputNode.attachEvent('onpropertychange', handler); + } + } + + //若监听到输入框有变化，则调用回调函数handler + function handler() { + //获得输入框中的字符串 + var inputStr = inputNode.value; + if(!inputStr) { + clearBox(); + return; + } + //每一次改变都把原来匹配的结果数组删除 + //然后根据现在的输入自动匹配 + clearBox(); + autoSuggest(inputStr); + replaceContent(ul); + } + + function replaceContent(ul){ + //click + + //keyDowm + keydown(); + } + + //将匹配到的字符串添加到ul中 + function autoSuggest(value){ + var liNode; + var list = stringMatch(value); + + for(let i = 0; i < list.length; i++) { + liNode = document.createElement('li'); + liNode.className = "li"; + liNode.innerHTML = list[i]; + ul.appendChild(liNode); + } + } + + //根据每次的值匹配结果并返回 + function stringMatch(value) { + var result = new RegExp('^' + value); + var list = []; + for(let i = 0; i < data.length; i++) + if(result.test(data[i])) + list.push(data[i]); + return list; + } + + function clearBox() { + var listNode = ul.getElementsByTagName('li'); + for(let i = listNode.length - 1; i >= 0; i--) + ul.removeChild(listNode[i]); + } + + function keydown(){ + document.onkeydown = function(event){ + event = event || window.event; + var currentLi = document.getElementsByClassName('active')[0]; + + //up + if(event.keyCode == 38){ + if(currentLi){ + var preLi = currentLi.previousSibling; + if(preLi) { + removeClass(preLi,'active'); + addClass(currentLi,'active'); + } + } + } + //dowm + if(evnet.keyCode == 40){ + if(currentLi){ + var nextLi = currentLi.nextSibling; + if(nextLi){ + removeClass(currentLi,'active'); + addClass(nextLi,'active'); + } + } + } + //enter + if(event.keyCode == 13){ + inputNode.value = currentLi.innerHTML; + clearBox(); + } + } + } + + //无论添加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/style.css b/practice/shiluoqiong/2/style.css new file mode 100644 index 0000000..fc7d306 --- /dev/null +++ b/practice/shiluoqiong/2/style.css @@ -0,0 +1,36 @@ +body +{ + font-family: Arial; + font-size: 10px; +} + +#search +{ + position:absolute; + top:40%; + left:30%; +} + +.inputBox +{ + width:500px; + height:30px; + line-height: 30px; +} + +li +{ + list-style-type:none; + width: 500px; + height: 15px; +} + +li:hover +{ + background-color: #e1e1e1; +} + +.active +{ + background-color: #e2e2e2; +} \ No newline at end of file From d58df493b4cb128842c7c4a85bdc510bd0dc3623 Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Fri, 8 Apr 2016 17:34:55 +0800 Subject: [PATCH 11/13] =?UTF-8?q?=E4=BD=9C=E4=B8=9A2=EF=BC=9A=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E6=A1=86=E7=9A=84=E8=87=AA=E5=8A=A8=E8=A1=A5=E5=85=A8?= =?UTF-8?q?=EF=BC=8C=E9=BC=A0=E6=A0=87=E5=92=8C=E9=94=AE=E7=9B=98=E5=93=8D?= =?UTF-8?q?=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- practice/shiluoqiong/2/index.html | 10 +- practice/shiluoqiong/2/index.js | 146 +++++++++++++++++------------- practice/shiluoqiong/2/style.css | 25 ++++- 3 files changed, 111 insertions(+), 70 deletions(-) diff --git a/practice/shiluoqiong/2/index.html b/practice/shiluoqiong/2/index.html index 3f451d4..cc8ec39 100644 --- a/practice/shiluoqiong/2/index.html +++ b/practice/shiluoqiong/2/index.html @@ -6,9 +6,9 @@ - - + + - \ No newline at end of file + diff --git a/practice/shiluoqiong/2/index.js b/practice/shiluoqiong/2/index.js index a433a61..c750ceb 100644 --- a/practice/shiluoqiong/2/index.js +++ b/practice/shiluoqiong/2/index.js @@ -1,109 +1,131 @@ -/** - * Created by luoqiong on 2016/4/7. - */ -(function(){ - //获取div search 和 input +(function() { var search = document.getElementById('search'); - var inputNode = document.getElementsByTagName('input')[0]; - //新建ul，用来放自动补全的字符串，向search添加ul结点 var ul = document.createElement('ul'); search.appendChild(ul); - var data = ['ab','bc','abc','bcd','cde','daidaidai','dyyre']; + + 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) { - //IE + }else if(inputNode.attachEvent){ + //IE8及以下 inputNode.attachEvent('onpropertychange', handler); } } - //若监听到输入框有变化，则调用回调函数handler - function handler() { - //获得输入框中的字符串 - var inputStr = inputNode.value; - if(!inputStr) { - clearBox(); + //if the inputText change, call the callback function + function handler(){ + var inputVal = (inputNode.value).trim(); + if(!inputVal){ + clear(); return; } - //每一次改变都把原来匹配的结果数组删除 - //然后根据现在的输入自动匹配 - clearBox(); - autoSuggest(inputStr); + clear(); + autoSuggest(inputVal); replaceContent(ul); } - function replaceContent(ul){ - //click - - //keyDowm - keydown(); - } - - //将匹配到的字符串添加到ul中 function autoSuggest(value){ - var liNode; - var list = stringMatch(value); - - for(let i = 0; i < list.length; i++) { - liNode = document.createElement('li'); - liNode.className = "li"; - liNode.innerHTML = list[i]; - ul.appendChild(liNode); + 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 stringMatch(value) { - var result = new RegExp('^' + value); - var list = []; - for(let i = 0; i < data.length; i++) - if(result.test(data[i])) - list.push(data[i]); - return list; + function replaceContent(ul){ + //click + delegate(ul, 'li', 'click', function(){ + //this.innerHTML获取target的内容 + inputNode.value = this.innerHTML; + //after click,remove list + clear(); + }); + + //keydown + keyMove(); } - function clearBox() { - var listNode = ul.getElementsByTagName('li'); - for(let i = listNode.length - 1; i >= 0; i--) - ul.removeChild(listNode[i]); + 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 keydown(){ + function keyMove(){ document.onkeydown = function(event){ event = event || window.event; var currentLi = document.getElementsByClassName('active')[0]; - //up - if(event.keyCode == 38){ + //向上 + if(event.keyCode === 38){ if(currentLi){ var preLi = currentLi.previousSibling; - if(preLi) { - removeClass(preLi,'active'); - addClass(currentLi,'active'); + if(preLi){ + removeClass(currentLi, 'active'); + addClass(preLi, 'active'); } } } - //dowm - if(evnet.keyCode == 40){ - if(currentLi){ + //向下 + 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'); + removeClass(currentLi, 'active'); + addClass(nextLi, 'active'); } } + } //enter - if(event.keyCode == 13){ + if(event.keyCode === 13){ inputNode.value = currentLi.innerHTML; - clearBox(); + 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是否存在。 diff --git a/practice/shiluoqiong/2/style.css b/practice/shiluoqiong/2/style.css index fc7d306..80008fb 100644 --- a/practice/shiluoqiong/2/style.css +++ b/practice/shiluoqiong/2/style.css @@ -2,6 +2,9 @@ body { font-family: Arial; font-size: 10px; + margin-top: 3rem; + margin-left: 3rem; + background-color: #eaeaea; } #search @@ -23,14 +26,30 @@ li list-style-type:none; width: 500px; height: 15px; + margin-bottom:1rem; } -li:hover +#search ul { - background-color: #e1e1e1; + 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: #e2e2e2; + background-color: #ddd; } \ No newline at end of file From cfde0e1ef75b82f85765ae599f5505df397011e0 Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Fri, 8 Apr 2016 17:36:53 +0800 Subject: [PATCH 12/13] =?UTF-8?q?=E4=BD=9C=E4=B8=9A2=EF=BC=9A=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E4=BA=86=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- practice/shiluoqiong/2/notes | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 practice/shiluoqiong/2/notes 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 From 03561bf4cb30ea7a270451b7965d728885aca7f9 Mon Sep 17 00:00:00 2001 From: dai <609566704@qq.com> Date: Wed, 13 Apr 2016 11:30:37 +0800 Subject: [PATCH 13/13] 3 --- .idea/modules.xml | 8 ++++++++ .idea/web-front-end-thinking-tutorial.iml | 8 ++++++++ practice/shiluoqiong/3/main.js | 3 +++ 3 files changed, 19 insertions(+) create mode 100644 .idea/modules.xml create mode 100644 .idea/web-front-end-thinking-tutorial.iml create mode 100644 practice/shiluoqiong/3/main.js 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/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/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. + */