jQuery Виджеты пользовательского интерфейса обычно вызывают существующий элемент DOM, который имеет основные потребности для виджета, в зависимости от виджета, это может быть даже пустой элемент, например пустой DIV.
Очень часто виджет воспринимает это как основание для него и создает несколько дочерних элементов для правильной рендеринга. Если вы не назовете destroy на виджет, они останутся там, и вы всегда сможете переопределить их стили и т. Д.
Прекрасным примером является слайдер-виджет. Вы можете передать все параметры в виджет и просто вызвать его на пустой DIV или так, он создает все необходимые дочерние элементы, такие как дескриптор и другие части, а CSS-интерфейс пользовательского интерфейса jQuery уже предоставляет стиль для этих созданных элементов (на основе на классы CSS, которые виджет добавляет к ним при их создании).
Так, в официальном slider example page, это:
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
$(function() {
$("#slider").slider();
});
</script>
<div class="demo">
<div id="slider"></div>
</div>
генерирует, что:
<div class="demo">
<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%; "></a></div>
</div>