闲来无事，聊聊jQuery中容易被忽略的方法

额...
说实话，其实我想做一个闲来无事系列...

.index()
你也许会说：我去，这个谁不知道啊。。。
我觉得我接下来说的也许你真的不知道。
先上一段html：
<div id="test">
<span class="a"></span>
<span class="b"></span>
</div>
这个差不多就够了，接下来，我们用 .index()：
$('.b').index('#test span');//1
$('.b').index($('#test span'));//-1
如果你什么都没发现，那请再仔细看。

不感兴趣

开通SVIP免广告

.index()
有三种用法：
1. .index()，无参数情况。得到当前jQuery对象里第一个Node元素在兄弟节点中的排行（这个就不多说了，容易弄混的是后面俩）
2. .index(selector)，参数：selector，字符串类型，作用是，得到当前jQuery对象里第一个Node元素在 selector对应的Nodelist里的位置。
3. .index(element|jQuery)，参数：element or jQuery对象，作用是，得到参数对象在调用index方法的jQuery对象中的位置，如果参数里不止一个Node对象，只要第一个。
第二种用法和第三种用法是完全相反的。
请不要中招哦。

如上题，正确写法是：
$('.b').index('#test span');//1
$('#test span').index($('.b'));//1
这两个表达式是在做同一件事。

$.map() 与 .map()
直接上例子吧
$.map([1], function(k) {
console.log(k);//1
});
$([1]).map(function(k) {
console.log(k);//0
});
大家可以看到，这俩function虽然功能一样，但是有明显的差异，callback 传入的参数位置可不同哦！千万不要中枪哦，这就不再继续多说了。
特别说明，$.each() 与.each() 参数是一致的，只是map有点怪怪的。

.each()
我们常用的方法是：
$([1]).each(function(k) {
console.log(k===2);//false
});
其实还有另外一种用法：
$([1]).each(function(k) {
console.log(k===2);//true
}, [2]);
某些时候，还是会用到的。

下面介绍一个容易被忽略的js方法：.end()，我认为很有趣。
先是一段html：
<div id="test">
<span class="a"></span>
</div>
假设我们需要做这几件事：给div设置css样式，给span设置css样式，最后需要将div append到body里。
$('#test').css('color', 'red').children('.a').css('color', 'blue').end().appendTo($(document.body));
非常适合那种喜欢一句完成很多工作的同学使用。

.end() 是一种往回追溯缓存的方法，例如：
var $obj = $('#a .b').find('.c').next('.d');
$obj.end() 就是 $('#a .b').find('.c')
$obj.end().end() 就是 $('#a .b')
嘿嘿，我想我说的够清晰了吧，放心的用吧。

不感兴趣

开通SVIP免广告

$.proxy()
这个方法很多新人不知道用，所以我举个例子。
我曾经遇到过这样的问题：
var obj = {
name: 'test',
fn: function() {
console.log(this.name);
}
};
setTimeout(obj.fn, 100);
返回值是 undefined，并非我想要的'test'，因为setTimeout执行callback的时候，指向的this是window对象，这时候 proxy就体现出神奇之处了。
var obj = {
name: 'test',
fn: function() {
console.log(this.name);
}
};
setTimeout($.proxy(obj.fn, obj), 100);
这样就可以了，相当于给obj.fn强制this===obj。
额，感觉到高手嘘声一片了。。。我承认这层楼有点水。

$.contains(elementA, elementB);
判断 elementB是否包含在elementA内，很惭愧，玩了N年的jQuery，去年才知道有这么个玩意，是我徒弟教我的。
提起这个，主要是因为参数比较奇特，只能是一个dom元素，非jQuery对象。
如果是jQuery对象，一定要先处理，切记。。。
$.contains($('.a')[0], $('.b')[0]);

接下来说的这个，估计80%以上玩jQuery都知道，那我就为了另外的20%的道友们略作指引。
我们在事件处理的时候，有时候需要外界的参数，如何传参也许困扰过一些朋友。
当然方法很多，比如我们可以写一个全局变量，不过我不愿看到代码中过多的全局变量，
所以，传递 event.data，是一个不错的解决方案：
$('p').on('click', {foo: 'bar'}, function(e) {
console.log(e.data.foo);
});
这个很实用。

嗯，18楼很有道理，其实我列出来的都是我印象深刻的一些地方，只是点到为止。
如果大家觉得意犹未尽的话，还请移步官网看文档。
我相信很多同仁都会有一种习惯，看了他人发的code不会立刻相信就是对的，而去尝试，甚至去翻阅资料，抛砖引玉不外乎如此，这才是我的目的。
当然，我不敢保证我说的都是正确的，欢迎指正。

$.noConflict();
$.noConflict(true);
重头戏，真正用的时候方能彰显它的神奇。
比如，你要写一个js插件，又不得不用 jQuery-1.9.1.min.js，然而有很多页面本身就有了jQuery对象，那你的jQuery加载之后，可想而知，会带来灾难。然而，它的存在，就实现了让多个版本jQuery共存。
具体怎么用。我觉得还是官方文档说得更透彻，如果遇到这方面问题尚未解决，或者有兴趣的朋友请移步官方文档。
如果看完仍然困惑，欢迎找我探讨。

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

12回复贴，共1页

<<返回javascript吧

分享到:

日	一	二	三	四	五	六