jQuery相关知识

jQuery是老牌JS库，选元素操作爽。
用CSS选择器就行，简单高效。
比如选id是app的元素，$(&3 9 ;app&3 9 ;)这样写。
链式调用省事，一连串操作不用断。
.click()绑定事件，.show()显示元素。

核心功能就这些，别整太复杂。
.append()加内容，.remove()删元素。
.text()取文本，.css()改样式。
.animate()做动画，过渡效果贼棒。

设计模式挺有意思，但用不着深究。
.fn是别名，.on()绑定事件。
闭包保护变量，适配器兼容旧浏览器。

链式操作原理就一个，返回都是jQuery对象。
.end()回退一步，方便DOM操作。

就这些，够用就行。
你自己掂量。

find()和filter()的区别?

哎哟，这jQuery里的.find()和.filter()方法啊，真是个让人头大的小细节。
说实话，我当年刚接触这玩意儿的时候，也是一头雾水。
咱们举个例子来说明吧。

你看，这个页面上的HTML代码是这样的：

测试1

测试2


现在，我们要用jQuery来操作这些元素。

首先，如果我们用.find()方法，写法是这样的：
javascript var $find = $("div").find(".rain"); alert($find.());
结果呢？它会输出“测试1 ”。
因为.find()是在div元素内部寻找class为rain的元素，所以它找到了第一个div里的那个

标签。

那如果我们换成.filter()方法，写法是这样的：
javascript var $filter = $("div").filter(".rain"); alert($filter.());
这次输出的是“

测试2

”。
.filter()方法是在当前选择集（也就是div元素）中筛选出class为rain的元素，所以它找到了第二个div。

所以说，.find()是对子集操作，而.filter()是对自身集合元素筛选。
而且，其实.find()也可以用选择器来表示，就像这样：
javascript var $select = $("div.rain");
这样写，效果和上面用.find()是一样的。

我当时也没想明白，直到后来慢慢实践，才慢慢摸到了门道。
这俩方法虽然有点像，但其实用法和效果差远了。
希望我这么一说，你大概能明白它们之间的区别了。

find()、children()、children、childNodes方法

哎哟，跟你唠唠这些搞前端的老坑。
这帮家伙当年把我坑惨了。

就说这 .find() 方法吧。
我08 年在上海做项目，那时候 DOM 操作还真是折磨。
你想想，你要在一个巨大的列表里找某个东西，用 .find() 就行。
它不管你隔几层，直接给你捞出来。
记得那次我写了个代码，用 $("ul").find("span")，结果把底下所有 span 都找出来了，不管是不是直接儿子。
当时老板就指着屏幕说：“老哥，你这找太广了，我们要的是直接孙子！” 那次我才搞懂，.find() 是个全局搜索，不是只看眼前这一层。
不像 .children()，那可是真只看这一层直接子元素。
我有个客户在杭州，他用的就是 .children(".selected")，这样就只找直接那批被选中的儿子，不会去骚扰孙子辈的。

再说说 JavaScript 自带的。
这俩属性，children 和 childNodes，我当年写第一个网站的时候踩的大坑。
1 4 年吧，在厦门。
你用 element.children，它给你的是个 HTMLCollection，就是那个列表，但里面只有标签节点，像空白的
它都不给你。
我一开始还纳闷，怎么没反应？后来查了才知道，得是个完整的元素才能操作。
但 element.childNodes 就不一样了，它什么全给你，连那个 <!-
comment --> 注释、中间的空白字符它都给你当节点。
当时我写个动态加载内容的，没注意，结果把一堆空文本节点也删了，页面直接崩了。
那叫一个惨。

总结一下哈，找后代就用 jQuery 的 .find()，要只看直接儿子就用 .children()。
原生那俩，children 就拿直接元素，childNodes 全都要，得自己筛选。
这事儿吧，得多练，练多了就明白什么时候用啥了。
别像我当年那样，每次都得查文档，浪费时间。