Query - Utilities

$('selector').count()

const paragraphCount = $('p').count();
console.log(`There are ${paragraphCount} paragraphs on the page.`);

$('selector').index()

const index = $('li.active').index();
console.log(`The active list item is at index ${index}`);

$('selector').el()

const firstParagraph = $('p').el();
console.log(firstParagraph.textContent);

$('selector').get(index)

// Get the second paragraph element
const secondParagraph = $('p').get(1);

// Get all paragraph elements as an array
const allParagraphs = $('p').get();

$('selector').eq(index)

// Get the second paragraph as a Query object
const secondParagraph = $('p').eq(1);
secondParagraph.addClass('highlighted');

$('selector').first()

// Get the first paragraph as a Query object
const firstParagraph = $('p').first();
firstParagraph.addClass('highlighted');

$('selector').last()

// Get the last paragraph as a Query object
const lastParagraph = $('p').last();
lastParagraph.addClass('highlighted');

// Get property
$('selector').prop(name)

// Set property
$('selector').prop(name, value)

// Get the checked state of a checkbox
const isChecked = $('input[type="checkbox"]').prop('checked');

// Set the disabled property on all buttons
$('button').prop('disabled', true);

$('selector').reverse()

// Reverse the order of list items
const $reversed = $('ul li').reverse();
$('ul').empty().append($reversed);

$('selector').slice(start, end)

// Get elements 2-4 from a list of items
const $items = $('.item');
const $sliced = $items.slice(1, 4); // Gets items at index 1, 2, 3

// Get all elements from index 2 onwards
const $fromIndex = $items.slice(2);

// Get the last 2 elements using negative indices
const $lastTwo = $items.slice(-2);

// Slice and manipulate a portion of elements
$('.card').slice(0, 3).addClass('featured');

// Process elements in batches
const $allItems = $('.item');
const firstBatch = $allItems.slice(0, 5);
const secondBatch = $allItems.slice(5, 10);

firstBatch.addClass('batch-one');
secondBatch.addClass('batch-two');

// Slice user posts in a user-profile component
const $posts = $$('user-profile').find('.user-post');
const $recentPosts = $posts.slice(0, 3);
$recentPosts.addClass('recent');

$('selector').add(selector)

// Combine headers and paragraphs into one collection
const $content = $('h1, h2, h3').add('p');
$content.addClass('styled-content');

// Add a specific element to an existing collection
const $items = $('.list-item');
const $withSpecial = $items.add(document.getElementById('special-item'));

// Build collections step by step
let $collection = $('.initial');
$collection = $collection.add('.more-items');
$collection = $collection.add('.final-items');

$('selector').exists()

if ($('.my-element').exists()) {
  console.log('The element exists in the DOM');
} else {
  console.log('The element does not exist in the DOM');
}

// Get settings
$('selector').settings()

// Set settings
$('selector').settings(settings)

// Get component settings
const settings = $('.my-component').settings();
console.log(settings);

// Set component settings
$('.my-component').settings({
  duration: 300,
  easing: 'ease-in-out'
});

// Get setting
$('selector').setting(name)

// Set setting
$('selector').setting(name, value)

// Get a specific setting
const duration = $('.my-component').setting('duration');
console.log(duration);

// Set a specific setting
$('.my-component').setting('duration', 500);

$('selector').initialize()

// Initialize all components
$('.my-component').initialize();

// Initialize specific component types
$('.modal').initialize();

$('selector').component()

// Get component instance
const modalComponent = $('.modal').component();
if (modalComponent) {
  modalComponent.show();
}

// Get multiple component instances
const tabComponents = $('.tab').component();
tabComponents.forEach(tab => {
  tab.refresh();
});

// Get data context
$('selector').datacontext()

// Set data context
$('selector').datacontext(data)

// Get data context
const data = $('.my-component').datacontext();
console.log(data);

// Set data context
$('.my-component').datacontext({
  user: { name: 'John', id: 123 },
  theme: 'dark'
});

$.exportGlobals()

// Export $ and $$ to global scope
$.exportGlobals();

// Now you can use $ and $$ without importing
$('div').addClass('global-access');
$$('my-component').css('color', 'red');