Question

可以使用$(":ui-dialog")或$(".ui-dialog")选择jQuery-ui对话框，但返回的相应集的元素不相同。例如

$(":ui-dialog").each(function() {
    if ($(this).dialog("option", "modal")) {
        console.log("dialog is modal");
    } else {
        console.log("dialog is non-modal");
    }
});

按预期工作，而

$(".ui-dialog").each(function() {
    if ($(this).dialog("option", "modal")) {
        console.log("dialog is modal");
    } else {
        console.log("dialog is non-modal");
    }
});

在第一次调用对话框方法时失败并显示错误消息。选择器之间有什么区别？

Answer 1

来自http://www.erichynds.com/blog/tips-for-developing-jquery-ui-widgets

方法3：widget伪选择器

在#jquery IRC频道中，yayQuery成名的Adam Sontag注意到了 widget工厂的未记录功能：自动伪选择器生成所有小部件。有了它，查询它是非常简单的某种类型的所有小部件的DOM：

// gimme all dialogs
$(":ui-dialog");

上面的选择器返回每个实例都是DOM元素的对象创建于。无需维护自己的缓存或存储DOM 每个小部件内的元素。关闭所有其他打开的对话框实例使用这个伪选择器是微不足道的：

// ui.dialog.js

open: function(){

    // close all open dialogs, excluding this instance
    $(":ui-dialog").not(this.element).each(function(){
        var $this = $(this);
        if($this.dialog("isOpen")){
            $this.dialog("close");
        }
    });

    // rest of open code here
}

我在此页面的控制台中测试了两个选择器：http://jqueryui.com/resources/demos/dialog/default.html

$('.ui-dialog')
[
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-describedby="dialog" aria-labelledby="ui-id-1" style="position: absolute; height: auto; width: 300px; top: 341.5px; left: 711px; display: block;">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">…</div>
    <div id="dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 107px; max-height: none; height: auto;">…</div>
    <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div>
</div>
]

-

$(':ui-dialog')
[
<div id="dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 107px; max-height: none; height: auto;">
    <p>…</p>
</div>
]

所以.ui-dialog选择整个对话框元素，并且：ui-widget只选择允许你调用对话框方法的对话框小部件。

Answer 2

$(':ui-dialog')选择器是一个自定义的jQuery UI选择器：

// create selector for plugin
$.expr[ ":" ][ fullName ] = function( elem ) {
    return !!$.data( elem, name );
};

遍历所选元素并返回带有附加插件定义数据（在本例中为对话框）对象的元素。

所以第一个将返回一个jQuery UI对话框对象，第二个是一个简单的jQuery对象，没有jQuery UI对话框的引用，因此将通过直接访问其属性/方法来引发错误。

演示：http://jsfiddle.net/IrvinDominin/jUUhB/

PS：谢谢你今天之前我不知道的问题： - ）

Answer 3

这是widget pseudo selector

区别在于.ui-dialog返回带有类ui-dialog的元素，但对话框小部件未在这些元素上初始化，这些元素是在对话框小部件在其他元素上初始化时创建的。

其中:ui-dialog返回实际初始化对话框小部件的元素。

例如：

<div class="dialog">1</div>
<div class="dialog">2</div>
<div class="dialog">3</div>
$('.dialog').dialog({
    autoOpen: false
});

在上述情况

.dialog和:ui-dialog返回上面3个div元素，其中:ui-dialog返回由对话框小部件创建的一些元素

演示：Fiddle

jQuery :: - selector与class-selector

3 个答案: