Browser Usage

Using Query in Browser Environments

You can use $ and $$ globally in your site to make it easier to manipulate DOM code wherever you need it in javascript.

Adding to Page

In Metaframeworks

In metaframeworks like Astro or Sveltekit you can import Query on the client.

<script type="module">
  // Import from CDN
  import { $, $$ } from '@semantic-ui/query';
</script>

From CDN

For browsers you can load it from a CDN like Unpkg or JSDelivr.

<script type="module">
  // Import from CDN
  import { $, $$ } from 'https://unpkg.com/@semantic-ui/query';
</script>

Using In Page

Global Exports

exportGlobals will automatically export $ and $$ to window when run on the client.

import { exportGlobals } from '@semantic-ui/query';

// Make Query's functions available globally
exportGlobals();

// Now you can use $ and $$ directly
$('.button').on('click', () => console.log('Clicked!'));
$$('ui-component .content').text('Updated content');

Document Ready

You can use $(document).ready() to run code after the DOM is ready. This is the same as DOMContentLoaded

import { $ } from '@semantic-ui/query';

// Use Query when the DOM is ready
$(document).ready(() => {
  $('.content').html('<p>Ready to go!</p>');
});

import { exportGlobals } from '@semantic-ui/query';

// Make Query's functions available globally
exportGlobals();

// Now you can use $ and $$ directly
$('.button').on('click', () => console.log('Clicked!'));
$$('ui-component .content').text('Updated content');

Managing Library Conflicts

If you’re working in an environment with multiple libraries that use the $ symbol (like jQuery), Query provides ways to avoid conflicts.

No-Conflict Mode

Similar to jQuery, Query provides a noConflict method to yield control of the global variables:

import { exportGlobals } from '@semantic-ui/query';

// Export Query to global scope
exportGlobals();

// Store a reference and release the global variables
const $q = $.noConflict();

// Now use $q instead of $
$q('.content').addClass('active');

Controlling What Gets Exported

You can customize which functions are exported to the global scope:

import { exportGlobals } from '@semantic-ui/query';

// Only export $ (not $$ or Query)
exportGlobals({
  $: true,
  $$: false,
  Query: false
});

Restoring Global Variables

You can temporarily use Query and then restore the original global variables:

import { exportGlobals, restoreGlobals } from '@semantic-ui/query';

// Save the original globals and use Query globally
exportGlobals();

// Do some work with Query
$('div').addClass('processed');

// When finished, restore the original globals
restoreGlobals();

// $ and $$ now refer back to their original values

Custom Aliases

For maximum flexibility, you can create your own alias for Query without touching the global scope:

import { useAlias } from '@semantic-ui/query';

// Create a custom alias
const $q = useAlias();

// Use your custom alias
const $elements = $q('.element');
$elements.addClass('selected');

This approach is ideal for modern JavaScript applications where you want to avoid global variables altogether.

Next Steps

Now that you understand how to use Query in browser environments, explore:

Query basics for core functionality
Working with Shadow DOM for advanced component interactions
Method chaining techniques for efficient DOM operations

On This Page