在文章开头，按照惯例（哪儿来的惯例~），先闲聊一下抒发一点点感想吧。
此次文章的想法来源于我正在做的项目当中的作品评论功能，此前我是没做过的，当时拿到设计稿之后，感觉，挺简单，不就一个列表而已，后来，到最后，也真的挺简单，可是，也真的，相当复杂。做的过程中遇到过很多问题，反复的去查看手册，向同行、前辈们请教，在此一并感谢了~当然，还有同行说：不是有插件么，实现起来挺方便的。在这里我要说为什么我没有用那些插件，首先就是，初看觉得挺简单的，自己应该能搞定，再者，我真的不想再去搬代码，然后要去研究，去把它改成自己项目当中要的样子，多余的还要去掉等等等等。所以，我就这么上路了，也就有了现在满满的收获。技术圈永远那么和谐又充满爱对吧，so，拿来跟大家分享一下。当然，此文只涉及前端实现，不涉及后台。顺序是：案例功能分析、所用技术罗列（jq）、注意事项、结束语~
先来说功能，按区域一一道来：
一、输入框
借用一下大家灰常熟悉的QQ空间评论框，当然，我们要谈的功能不会这么多，只要输入，发表，即可，你要记得我这里说的是“即可”哦。
第一步，输入框我们要用什么做呢，你觉得这不是个需要考虑的事儿？是的，可以用textarea，但是，div可不可以呢，这也可以吗？！如果你不知道，那么就去看看“contenteditable”这个属性，点到为止。然后你会觉得，本以为我知道的差不多了，到底还有多少我不知道的啊？
第二步，它里面好像有字呢 ——“说点什么吧”，这个怎么实现呢，你知道QQ怎么实现的吗？这哥们儿用了两个div，my god！当时我那个对它满满的钦佩，点击之前是一个div里面装的是“说点什么吧”，点击之后隐藏之，显示另外一个空的div。说实话我用的也是这种方法。只因那一瞬间的震撼，方法千百种，只要你敢想呐，不过后来我就悟到，其实没必要这样，你可以只用一个div，给里面填上几个字，获取焦点的时候清空即可，注意，这里就有一个小陷阱哦，我说的是获取焦点的时候清空，那，如果我输入了文字，鼠标点击了其他地方再回来，oh，它也空了，这可不行，所以，需要做条件判断，判断什么？内容，怎么判断，可爱的——if！粉末登场咯！点到为止！~哦，对了，忘了一个，你需要获取文本内容！~
第三步，如果我点击了之后，啥也没输入，又点了出来，这是再正常不过的操作，这里可能会涉及两个东东，一、点击此物一个反应，点击除此物之外的区域，另一个反应。二、获得焦点的时候一个反应，失去焦点的时候另一个反应。
点到为止！~
第四步，我点击了，也输入内容了，那就发表吧，爽歪歪，很多童鞋都知道下面要干嘛，评论嘛，一个列表嘛，点击发表新建列表项，插入嘛！停！because，哪里来的列表？是的，还没有评论的时候，是木有列表滴，是的，你需要新建列表！建完之后，你得把它插入，这里有两个插入，列表插入和列表项插入，问题又来了，怎么插入，内部还是外部？最前还是最后，还是在某个特定位置？都可以，点到为止！~oh，停！我怎么知道列表在不在呀，难道每次发表的时候都去新建啊？当然不是，那，你还需要判断ul是否存在，方法不止一种，可以结束了，oh，好像还漏了一点，到底有完没完啊？！~我发表之后，输入框怎么办呢，文字要赋给新建列表项，然后呢，将其清空还是怎样，或许你突然觉得，我点击完发表，那输入框不就算是失去焦点了吗？那点击事件和失去焦点事件，到底哪个说了算啊？它是不是会自动的回到”说点什么吧”呢？能不能呢，你去试试吧！~
到此，关于输入框的东西告一段落，可能还没完，可能~额，还记得之前说的那个”即可“么，别打我哈！
二、列表
为了不暴露他人隐私，我就拿我和韬哥的一段来给大家看看吧，他应该不会介意~先说明我们做的不一定是这个样子，随你做成什么样，但道理都一样。
第一步、首先，列表项大家都懂对吧，而且，形式一样，功能一样，长得一样，那既然都一样，我们会想到两个东西，一个是可以对其中的样式都用”类“定义，另一个就是”克隆“，而且如果你用克隆（clone），里面的一个参数取”true“的时候，那简直是，你可能就不用再掉进下面我要说的一个大坑里了，我说的是可能，我的项目里并没有用，至于原因我记不起了，大家可以自己试试。
第二步、每条评论都是可以操作的是吧，比如，你发表的评论，别人是可以回复的，如果，诸如：回复、删除等等不显示出来，移入哪条评论区，那条评论的操作才显示出来，移出就消失掉呢？这个不难，加上移入移出事件。
点到。。
第三步、怎么回复呢，需要输入框，…….又是输入框，没错，这个倒霉蛋又被我们碰到了,输入文字之前，我们需要处理好这样几件事情，首先，，那如果我要回复的输入框一开始不显示，点击回复才显示，再点击就又不显示了呢？好办，加个交替点击事件，这里也有坑，下面讲。那，输入框是让它直接显示隐藏呢，还是淡入淡出呢，还是展开收起呢？好多方法啊，那个高兴，可也，那个纠结，嘿嘿，随你喜欢哪种，或者用户喜欢哪种！~
第四步，补上第三步里面该说的一点，放在第四步说是因为点太小了~那就是，输入框在三种情况下收起，交替点击时，取消回复时，发表回复时，如果你漏了，你自己都会觉得那么别扭，当然三种情况是不同的，这就是第四步要讲的重点。首先，回复的框也是要有预填文字的，比如：”回复@XX“，先说点击回复，点击回复的时候，展开，里面有文字，输入框获取和失去焦点跟评论一样，这里不再说。点击取消，则清空输入框并收起，其他不需要任何操作。点击发表，那，是不是相当于我们又在重复发表评论时候的那一套呢？我知道你不想回到那条路~但就是那样，你需要判断，插入等等等。当然，这是在列表为二级的情况下，如果评论和回复都在同一个列表中，那就不必了，因为如果没有列表，你是不可能回复的，so不需要判断，然后你要把框内文字赋给新建的列表项，然后清空它，收起输入框！~
第五步，为什么要有第五步，这不是大功告成了么，既可以发表评论，又可以对评论发表回复，破费科特呀！~哥们儿，还记得我们的回复是怎么来的么，是新建来的，那么既然如此，我要告诉你一件不幸的事情，那就是，你所加的事件，在动态创建的新元素里，相当于没了，这可怎么办呐！要命啊！~别急，还有个东西叫——”事件代理“，代理可用方法种种，
点到。。~
第六步，是的，你没看错，还有第六步，你可以想象平时自己使用的时候，出现过两个输入框同时打开使用的情况？对的，当有多个列表项，你操作了一个输入框并输入了文字，没发表之前，又去操作别的东西，比如打开另一个输入框，这个时候，会有提示你——”是否放弃当前正在编辑的文字“，选择放弃或者不放弃，那又是两种不同的操作，jq里提示框大概有三类——直接警示、给提示语可确定或取消、你要输入文字进行确认。这里当然是第二种，如果确定，则清空之前输入框并收起，取消则原封不动。
貌似，功能分析可以告一段落了。
下面开始罗列所用技术，分类罗列（这里只是部分，具体自行查看手册了解）：
显示隐藏：css：display——block/none show()/hide(), fadeIn()/fadeOut() slideDown()/slideUp()
焦点：focus()/blur()
获取(代码/文本)：html() / text()
新建：$(“代码”)
插入：append()/appendTo() insertBefore()/insertAfter()
移入移出：mouseenter()/mouseleave() 可用hover(fn(),fn())替代
交替点击：toggle(fn(),fn());
克隆：clone();
事件代理：live() delegate() on()
同辈元素选择：sibling()
提示框：alert() confirm() prompt()
当前项选择：$(this)
筛选：next()/nextAll() prev()/prevAll parent()/parents()/parentsUntil() closest() children()
判断是否：is()
以上简要列出，供大家参考而已，方法可以多种，用法也各异。
注意事项——群坑荟萃：
一、千万，千万，千万（我要有这么多钱就好了~），千万别把变量给弄成字符串！（除非特殊情况，你就是要知道它的名字）编程里面有个很有用，特别有用的东东叫变量，因为它就是个无限大的盒子，想往里装什么就装什么，它可以帮你做很多事情，但是如果你总是习惯于诸如 alert(“变量”);这么happy的写法，那你会很不happy~
二、接着上面一个顺便说一下，当做选择器的时候，诸如，类，id这些要把”.“和”#”加上，但如果仅仅是要用到它们的名字，则不要加了，否则你又不happy了
三、还记得我们之前谈到列表项时，因为很多的”一样“，而给列表项里面的所有都用”类”来给样式吗？这样子当然没问题，可是当我们要给它们加事件的时候，就必须给它们规定作用域了，不然，你会看到它们队形整齐的全都动起来，虽壮观、但悲催呀~这时候$(this)就是个很好用，也很必要的东东，当然，要结合其他的筛选方法才能精准定位作用对象哦！~
四、关于事件代理，不要被这个词儿给吓到，只需关注它的意思和是干嘛的就行了。在这里它是用来解决动态创建元素的事件问题，那它的原理是什么呢，有人说是事件冒泡，我简单解释一下，我们都知道元素可以嵌套，那么我们要动态创建的元素是在里层，要加的事件也是在里层，代理的意思是，你先把事件交给外层，等到你操作了要加事件的元素时，会由外往里去”寻找“匹配元素，找到即生效。这里我要告诉你一百个注意！如果不注意，你在这个坑里挂掉可别找我——你交给的这个外层不能也是新创建的元素！！！所以，这个外层不能简单理解为是它爸，而是它的固有祖先元素，因为它爸，甚至它爷爷都可能是新创建出来的，那就无效了！为什么我要着重强调这一点，因为我就是在这个坑里待过很久，说多了都是泪！~
五、事件冒泡，太多说它的资料了，我不详述了，就是多层嵌套的元素，里层元素的事件层层向外扩散，导致很多事件重复执行或者看起来是无效的，具体大家自己找资料研究一下，我就偷个懒~
六、jquery有很多版本，对里面的选择器，筛选方法和事件的支持可能会有所不同，有时候，如果你用了某个东西，而它压根儿就没生效，在排除了其他错误之后，那就是版本支持问题了，比如toggle()的点击,在jquery-1.9版本就不同了，当然，是有弥补措施的，可自行查阅。
本文所谈内容尚浅，但你应该看出来了，我要说的不仅是评论这个东东。更多的在于从功能方面去做何考虑，跟所需技术是怎样联系起来的，你也可以感受到jq，甚至js是怎么运用到网页当中，什么时候该定义变量，如何理清各元素之间关系，使用合适的选择器和筛选方法去找到作用对象，什么样的效果用什么方法，等等。而做好这些的前提是正确认识概念和用法！！
该结束了，再说一段儿吧，写程序就像是写文章，都是需要逻辑，组织的好了，则结构清晰、行云流水、感人肺腑，而且你不会去管多少字，万丈高楼也是从地基开始一砖一瓦堆砌起来的。当然，程序也要求必要的精简，通用性等，此不详述。另一个理解是，程序的执行和人的思想、行为是挂钩的，要求很严格，不允许出任何的疏漏，人的行为到了哪里，那你的考虑范围就要到哪里，没有到就出问题了，当然你也可以去挖掘新的东西。这里就要回归到本文的标题——实践为王，应需而生！
啰嗦了这么一大堆，问题再所难免，还望谅解。事实证明，我是没办法也没能力把所有事情都告诉你们，呵呵，不过，说过的给你们惊喜，没让你们失望吧？技术这个东西就像我们以前对学习的形容一样，看似内容很多，先把”厚书“读薄，再读厚，就能有所小成。多实践，坚持！让我们一起加油吧！~关于此文，有兴趣可以直接找我交流
