针对特定元素的扩展

我们知道jQuery对象的有些方法只能作用在特定DOM元素上，比如 submit() 方法只能针对 form 。如果我们编写的扩展只能针对某些类型的DOM元素，应该怎么写？

还记得jQuery的选择器支持 filter() 方法来过滤吗？我们可以借助这个方法来实现针对特定元素的扩展。

举个例子，现在我们要给所有指向外链的超链接加上跳转提示，怎么做？

先写出用户调用的代码：

$('#main a').external();

然后按照上面的方法编写一个 external 扩展：

$.fn.external = function () {

// return返回的each()返回结果，支持链式调用:

return this.filter('a').each(function () {

// 注意: each()内部的回调函数的this绑定为DOM本身!

var a = $(this);

var url = a.attr('href');

if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {

a.attr('href', '#0')

.removeAttr('target')

.append(' <i class="uk-icon-external-link"></i>')

.click(function () {

if(confirm('你确定要前往' + url + '？')) {

window.open(url);

}

});

}

});

}

对如下的HTML结构：

<!— HTML结构 —>

<div id="test-external">

<p>如何学习<a href="http://jquery.com">jQuery</a>？</p&gt;

<p>首先，你要学习<a href="wiki001434446689867b27157e896e74d51a89c25cc8b43bdb3000">JavaScript</a>，并了解基本的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>。</p&gt;

</div>

实测外链效果：

'use strict';



$('#test-external a').external();