是否有一个jQuery的"exists"函数？

在使用jQuery的过程中，我们经常需要判断某个DOM元素是否存在。这篇文章将介绍一个简单的jQuery插件，帮助我们方便地实现这一功能。通过本文，你将学习如何使用这个插件以及它的各种应用场景。

插件介绍

该插件可以用于if语句中，例如if ($(ele).exist()) { /* 执行操作 */ }，也可以与回调函数一起使用。

插件代码

;;(function($) {
    if (!$.exist) {
        $.extend({
            exist: function() {
                var ele, cbmExist, cbmNotExist;
                if (arguments.length) {
                    for (x in arguments) {
                        switch (typeof arguments[x]) {
                            case 'function':
                                if (typeof cbmExist == "undefined") cbmExist = arguments[x];
                                else cbmNotExist = arguments[x];
                                break;
                            case 'object':
                                if (arguments[x] instanceof jQuery) ele = arguments[x];
                                else {
                                    var obj = arguments[x];
                                    for (y in obj) {
                                        if (typeof obj[y] == 'function') {
                                            if (typeof cbmExist == "undefined") cbmExist = obj[y];
                                            else cbmNotExist = obj[y];
                                        }
                                        if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];
                                        if (typeof obj[y] == 'string') ele = $(obj[y]);
                                    }
                                }
                                break;
                            case 'string':
                                ele = $(arguments[x]);
                                break;
                        }
                    }
                }

                if (typeof cbmExist == 'function') {
                    var exist =  ele.length > 0 ? true : false;
                    if (exist) {
                        return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });
                    }
                    else if (typeof cbmNotExist == 'function') {
                        cbmNotExist.apply(ele, [exist, ele]);
                        return ele;
                    }
                    else {
                        if (ele.length <= 1) return ele.length > 0 ? true : false;
                        else return ele.length;
                    }
                }
                else {
                    if (ele.length <= 1) return ele.length > 0 ? true : false;
                    else return ele.length;
                }

                return false;
            }
        });
        $.fn.extend({
            exist: function() {
                var args = [$(this)];
                if (arguments.length) for (x in arguments) args.push(arguments[x]);
                return $.exist.apply($, args);
            }
        });
    }
})(jQuery);

你可以在这里查看插件的JSFiddle示例。

使用方法

该插件允许指定一个或两个回调函数。如果元素存在，第一个回调函数将被触发；如果元素不存在，第二个回调函数将被触发。然而，如果只传递一个函数，它仅在元素存在时被触发。因此，如果所选元素不存在，链式调用将终止。当然，如果元素确实存在，第一个函数将触发，并且链式调用继续。

请记住，使用回调变体有助于保持链式调用——返回元素后，可以像使用任何其他jQuery方法一样继续链式调用命令！

示例用法

if ($.exist('#eleID')) {    /*    执行操作    */ }        // 参数为字符串
if ($.exist($('#eleID'))) { /*    执行操作    */ }        // 参数为jQuery对象
if ($('#eleID').exist()) {  /*    执行操作    */ }        // jQuery对象上调用

$.exist('#eleID', function() {            // 参数为字符串和回调函数
    /* 执行操作 */
    /* 此回调函数仅在元素存在时触发 */
}, function() {            // 参数为字符串和第二个回调函数
    /* 执行操作 */
    /* 此回调函数仅在元素不存在时触发 */
})

$('#eleID').exist(function() {            // jQuery对象上调用的回调函数
    /* 执行操作 */
    /* 此回调函数仅在元素存在时触发 */
})

$.exist({                        // 参数为包含元素和回调函数的对象
    element: '#eleID',
    callback: function() {
        /* 执行操作 */
        /* 此回调函数仅在元素存在时触发 */
    }
})

总结

通过本文的介绍，你已经了解了如何使用这个简单但强大的jQuery插件来检测DOM元素是否存在。这种方法不仅简洁而且灵活，能够帮助你在各种情况下轻松实现所需功能。

如果你有任何问题或建议，欢迎在评论区留言与我交流。希望这篇文章对你有所帮助！