jQuery中是否有“exists”函数？

技术背景

在使用jQuery进行前端开发时，经常需要检查DOM中某个元素是否存在。虽然jQuery本身没有直接提供exists函数，但开发者可以通过多种方式来实现检查元素存在性的功能。

实现步骤

1. 使用jQuery的`length`属性

在JavaScript中，一切值都有“真值”或“假值”的概念，对于数字，0表示false，其他值表示true。因此可以通过检查jQuery选择器返回结果的length属性来判断元素是否存在：

1
2
3

if ($(selector).length) {
    // 元素存在，执行相应操作
}

2. 自定义`exists`函数

可以为jQuery扩展一个exists函数：

jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
    // Do something
}

或者将其作为静态方法：

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) {
    // Do something
}

3. 利用数组索引

由于每个jQuery对象也可以看作一个数组，因此可以使用数组的索引操作来检查元素是否存在：

1
2
3

if ($(selector)[0]) {
    // 元素存在，执行相应操作
}

4. 使用`is('*')`方法

1
2
3

if ($(selector).is('*')) {
    // 元素存在，执行相应操作
}

5. 自定义插件

可以编写一个功能更强大的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);

使用示例：

if ($.exist('#eleID')) {    /*    DO WORK    */ }        //    param as STRING
if ($.exist($('#eleID'))) { /*    DO WORK    */ }        //    param as jQuery OBJECT
if ($('#eleID').exist()) {  /*    DO WORK    */ }        //    enduced on jQuery OBJECT

$.exist('#eleID', function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
}, function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element DOES NOT EXIST    */
})

$('#eleID').exist(function() {            //    enduced on jQuery OBJECT with CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
})

$.exist({                        //    param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD
    element: '#eleID',
    callback: function() {
        /*    DO WORK    */
        /*    This will ONLY fire if the element EXIST    */
    }
})

6. 使用原生JavaScript方法

可以使用document.getElementById或document.querySelector等原生方法来检查元素是否存在：

if (document.getElementById('element_id')) {
    // 元素存在，执行相应操作
}

function elementIfExists(selector){
    return document.querySelector(selector);
}
var myelement = elementIfExists("#myid") || myfallbackelement;

function elementExists(selector){
    return !!document.querySelector(selector);
}
var hastables = elementExists("table");

7. 考虑特殊情况的`exists`函数

可以编写一个考虑更多情况的exists函数：

1
2
3

$.fn.exists = $.fn.exists || function() { 
  return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); 
}

8. 检查对象内部元素存在性

1
2
3

jQuery.fn.exists = function(selector) {
    return selector ? this.find(selector).length : this.length;
};

最佳实践

对于简单的元素存在性检查，优先使用原生JavaScript方法，如document.getElementById或document.querySelector，因为它们的执行速度更快。
如果需要在jQuery代码中频繁进行元素存在性检查，可以自定义exists函数或使用插件，以提高代码的可读性和可维护性。
在使用exists函数时，要考虑特殊情况，如传入的选择器为{}等空对象的情况。

常见问题

$(selector).length方法的局限性：当selector为一个空对象{}时，$(selector).length可能会返回非零值，导致检查结果不准确。可以通过额外的检查来避免这种情况：

1
2
3

if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}