说到前端开发，不得不说说 jQuery。它能让我们更轻松地操作 HTML 文档和 DOM 元素，只要用对了选择器和方法，网页里面的东西你随便搓圆按扁都行。遇到需要批量修改页面元素的情况？不怕，有 jQuery 的群体遍历功能帮你忙，调整属性、添加删除节点统统不在话下，效率直线提升！
理解jQuery集合
在用 jQuery 的时候，首先要找到目标，也就是那些藏在网页 DOM 中的小调皮，通过各种眼花缭乱的选择器把它们揪出来。搞定这步之后，就能愉快地使用 jQuery 的方法，让每个元素都能跳舞，完成各种各样的任务，如砸场子似的页面跳转，炫酷的动态效果等等。简单说来，就是设计好 jQuery 对象后，接着就去搞每个元素就行了。
var $list = $('ul li'); // 获取所有ul下的li元素
常用的jQuery集合遍历方法
1. each()
$.each(array, function(index, value) {
// 处理函数体
});
说起咱们经常要用到的几个数组合并对象，它们都是能用each()方法挨着去遍历滴。特别是有了jQuery帮忙，就能帮你把集合里的东西给轮流走一圈。在遍历的过程中，你得准备一个函数用来处理当前要处理的那一部分。这个函数上下文中两个重要元素就是：当前元素在整个名单中的啥位置；以及那一个元素自己的具体值。这么一搞，你按照每一个元素来搞定一些事儿不就简单多了！
$list.each(function(index) {
console.log(index + ": " + $(this).text());
});
2. map()
Map这种方法太强大了！它不仅能够在数组里随意游走，还能把一个数组变成另一个数组。对jQuery来说，这个功能真的是神助攻！使用后你会发现得到了一个全新的数组，这样就能随心所欲地玩弄原来的数据了！总之，不管怎样，Map这个方法总能帮助我们迅速搞定集合中的每个元素，再送上一个新鲜出炉的新数组。
3. filter()
$.map(array, function(value, indexOrkey) {
// 处理函数体
});
Filter真的超管用，能帮咱们快速找出想要的东西！怎么找？你就看回调函数告诉咱啥，信不信它说“是”，它就在新集合里面加进去了那个元素！所以，只要巧妙使用Filter，咱们就能很快地完成要处理的那些元素！
var newArr = $list.map(function(index) {
return $(this).text();
});
console.log(newArr);
4. not()
别看not()这家伙简单，只要你用对地方就能让集合焕然一新！连我们不喜欢的东西也能剔除，然后放眼望去就是全新的集合！甚至，你还能自己定制规则，想让谁走就让谁走！告诉它哪个元素是”真的”(true)，剩下的自然都是你想要的！
5. find()
$(selector).filter(function(index){
// 处理函数体
});
find()这个方法就像是眼睛里的放大镜，专门搜寻你心中的那个后代元素，而且只找符合要求的那几个！这样的话，处理这些元素就像切菜似的简单明快，DOM操作也就变得毫无压力咯。
var $filtered = $list.filter(function(index) {
return $(this).hasClass('active');
});
console.log($filtered);
示例代码演示
看了上面几个扒拉List的例子，大家是不是觉得用 jQuery操作List特轻松？研发过程也是轻松搞定，看代码就像喝水一样简单。不用担心这些方法跟常用的JS有差异，实际上用起来跟原生的JS没啥区别。所以只要学会了这些，在jQuery和原生JS之间轻松来回切换妥妥的小事一桩！
结语
$(selector).not(selector);
学好 jQuery 找东西的技巧，你的前端开发效率会直接飙升！JavaScript 也能变得更好懂，顺便还能玩儿转各种超酷炫的交互设计！DOM 结构再怎么变化也不怕！
var $notFiltered = $list.not('.disabled');
console.log($notFiltered);
。
评论0