我的JQ故事

既然是故事

那么故事的开头，都应当从“从前”讲起。好的！从前，我认识我同学“啊肥雄”，从此的语文考试作文多个人物素材，也从此作文没再及格过了。由于他情感世界复杂又有故事，也曾三次被我写进英语考试作文。这里，提到了啊肥雄同学，并非是好久不见，想他了，而是前不久他在微信上说了一句：“泡面正确吃法，应该是用开水泡开面来吃；而非打开包装直接干吃着面”（此言不觉明历呀~）。这句话令最近在看JQ文档的我，开始对以前写过JQ代码有了一个新的审视。经过好几失眠的晚上，最终找出了一些误解误用误写的JQ的问题，同时也是无比惭愧啊！同时也谢谢来自啊肥雄的启发。接下来，我将分享“我的JQ故事”！


在写JQ代码中，其中一个常见的问题就是：“判断一个元素是显示还是隐藏？”，这里我们先来看一下，我之前在开发中突发奇想的一种方法：

//假设获取目标元素是$("#elemen")
var count = 2；
if (parseInt(count / 2) === 0) {
    $("#element").show(); ++count;
} else {
    $("#element").hide(); ++count;
}

上面，这段代码，主要是通过一个变量决定一个元素的显示和隐藏。
显然，这种方法有很多不好的地方。首先，用了一个变量，同时也消耗了栈内存。再一个就是每次还得运算。当然，还有这是一个被赋值的变量，而非理论上的变量，灵活性降低。举个很low的例子，如果该变量的值被改变，从而可能会导致程序非预期执行。还有很多不好因素，这里不一一举例。而本人认为(为不太黑自己了哈哈哈，找个借口)，这个方法最最最不好地方那就是可读性极差，联系上文所述，这是个突发奇想的方法，很容易令人想到“这是什么鬼？”。
最近，回看JQ文档。可能是当时文档看得太飘了(sorry)，其实JQ早已为我们提供解决这类问题的方法了，一次性介绍了好几种方法，我们一起来看其中常用两种方法：
1)有通过xxx.is(":visible")方法：

//假设获取目标元素是$("#elemen")
var $element = $("#elemen");
if ($element.is(":visible")) {
    $element.hide();
} else {
    $element.show();
}

2)使用toggle方法

//假设获取目标元素是$("#elemen")
$element.toggle(function() {
    $element.show();
},
function() {
    $element.hide();
});
//...
//显然toggle()这是show()和hide()的合成事件

不知道？有没有发现上面代码中出现了show()和hide()两个熟悉的方法，可能很简单。不过这次会看JQ文档还是有些收获的。不得不提的是，如show()它不仅仅只是显示而已。过程才是我们要注意的地方(借一步说话)。有没有人发现？如果给show()一个slow或大一点的数值，会发现每次执行show()时，有个很丑的动画。则引出show()中不止是display:block;一个人在战斗，而是还有宽度、高度也在伴随着变化，则才会呈现看到这种在效果。以前我也是错误理解到了show()就只是显示，同时惊呼有时显示很奇怪(现在看来是我才学疏浅吧)。然而，说到这里不妨聊聊fadeIn()\slideDown()，这里两个动画其变化是第一个是改变透明度，第二个是改变高度。这里有个坑就是，不论是淡入还是滑上，看上去是消失不见，但均是隐藏，则给了元素display:none;是不占结构空间的。


由于，本篇文章主旨是要讲故事的，应当有感受部分。则接下来，就会少谈JQ文档中的内容(如：css()和addClass的区别，还有attr()呢？)，那么我们来聊一些感受吧！真心要来聊看完JQ文档观后感了。好吧！其实，看完JQ文档后想聊更多一些平时写JQ代码的时候，很少注意到的地方。如在JQ中但凡美元符开头括号什么返回过来是个对象而不是一个值。哈哈哈~又扯回文档内容了。嗯，接下来继续聊感受。


虽然看JQ文档之后，有很多内容想聊的。不过，又发现太多了【ku】，一篇文章写不完。所以这里就进入聊感受部分了。在上文提到了，有些误解误写误用了JQ的问题(这里纯粹是个观后感哈哈哈~)。我简单讲一下，其中的误解JQ是指，受以前第一印象影响，老觉得JQ就是简化了DOM操作(事实也是如此)，但这里值得注意的就是“兼容性”，这方面是做得不错，所以跟原生JS的DOM操作是有区别的，这是一个对JQ的误解(其他的误解以后具体问题再聊)；当然了，我对于JQ的误用在于把它当JS来写了，所以经常会将一些JS方法写到JQ中去(sorry)，如JQ有html()，我经常写成innerHtml()(重点是还带括号晕~)等等误用；最后，聊一下，关于我JQ的误写，为什么要把它放最后呢？是因为这个问题，直接决定要混不下去了。

好了，最后再聊几句。本篇文章，是我的首作。有不足之处请大家多多指点，谢谢！。我将感激不尽。至于为何选JQ为题材作为首作，原因是我最近刚好在看JQ文档，从中也看到了我对JQ错误理解，然后就很佛系的要写点一下哈哈哈，虽本文只是提及一小部分错误理解，后续有机会再提及。最后，这就是我的JQ故事，也是更多故事的开始！


后续再会！fshen

啊肥雄：“泡面正确吃法，应该是用开水泡开面来吃；而非打开包装直接干吃着面”。