jQuery：：-选择器与类选择器

Question

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

$(":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

是小部件伪选择器

不同的是，.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返回由对话框小部件创建的一些元素。

演示：小提琴

Answer 2

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

方法3:小部件伪选择器

在#jquery通道中，yayQuery名声的Adam注意到了小部件工厂的一个没有文档的特性:为所有小部件自动生成伪选择器。这样，查询特定类型的所有小部件的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-对话框选择整个对话框元素，而:ui-小部件只选择对话框小部件，它允许您调用对话框方法。

Answer 3

$(':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:谢谢你今天之前我不知道的问题:-)