Kendo UI for jQuery使用教程：小部件DOM元素结构

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

所有Web Kendo UI小部件都保留对元素和封装DOM元素的引用，并且所有混合Kendo UI小部件仅保留对元素DOM元素的引用。

element是初始化窗口小部件的元素。根据窗口小部件，元素可以是可见的（例如，在AutoComplete，Calendar和DatePicker中），也可以是隐藏的（例如，在DropDownList和Upload中）。初始化语句也返回对此元素的引用。从窗口小部件对象获取窗口小部件元素的引用是一种相对罕见的情况，但在特定情况下可能会有所帮助，尤其是当您想要避免在jQuery选择器中对ID进行硬编码时。

wrapper是最外层的元素，它是widget的一部分。根据窗口小部件和场景，包装器可能与元素相同。例如，如果从<div>初始化Grid，则两个引用匹配；如果从<table>初始化Grid，则元素指向<table>，而包装器指向<div>。在DOM或CSS操作期间可能需要对窗口小部件包装器的引用。例如，要隐藏窗口小部件，您需要隐藏包装器。隐藏元素可能会部分隐藏窗口小部件或根本不隐藏它。 wrapper也是最适合附加自定义CSS类的HTML节点。

以下示例演示如何使用element和wrapper引用。

<div id="myWindow">...window content...</div>
  <script>// Initialize the widget which also returns the widget element.var winElement1 = $("#myWindow").kendoWindow( { /*...*/ } ); // Returns div#myWindow as a jQuery object.var winObject = $("#myWindow").data("kendoWindow");
// Other ways to get the widget element.
  var winElement2 = $("#myWindow");
  var winElement3 = $("#myWindow").data("kendoWindow").element; // Returns div#myWindow as a jQuery object.
  var winElement4 = winObject.element;
// Get the wrapper.
  var winWrapper1 = $("#myWindow").data("kendoWindow").wrapper; // Returns div.k-window as a jQuery object.
  var winWrapper2 = winObject.wrapper; // returns div.k-window as a jQuery object
  </script>