Query - Logical Operators

$('selector').is(selector)

if ($('#myElement').is('.active')) {
  console.log('The element is active');
}

$('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');
}

$('selector').isVisible()

$('selector').isVisible({ includeOpacity: true })

// Check if element has layout dimensions
if ($('#myElement').isVisible()) {
  console.log('Element is rendered in the page');
}

// Check if element is both rendered and has opacity > 0
if ($('.fade-element').isVisible({ includeOpacity: true })) {
  console.log('Element is visually perceivable');
} else {
  console.log('Element may be transparent or hidden');
}

// All elements have same visibility - returns single boolean
const allVisible = $('.visible-items').isVisible();
console.log(allVisible); // true (if all are visible)

// Mixed visibility states - returns array
const mixedStates = $('.mixed-items').isVisible();
console.log(mixedStates); // [true, false, true]

// Check if all elements are visible
if ($('.items').isVisible() === true) {
  console.log('All items are visible');
} else if (Array.isArray($('.items').isVisible())) {
  console.log('Items have mixed visibility');
}

$('selector').not(selector)

$('div').not('.ignore').addClass('highlight');

$('selector').contains(selectorString)

$('selector').contains(element)

$('selector').contains(queryObject)

// Check if a container has elements matching a selector
if ($('.container').contains('.highlight')) {
  console.log('Container has highlighted elements');
}

// Check if a specific element is contained
const button = document.querySelector('button');
if ($('.toolbar').contains(button)) {
  console.log('Button is inside the toolbar');
}

// Check if any selected elements are contained
const $inputs = $('input[required]');
if ($('form').contains($inputs)) {
  console.log('Form contains required inputs');
}

// check if element is in web component
const result = $$('web-component').contains('.shadow-element');

$('selector').eq(index)

// Get the third paragraph (index 2)
const thirdPara = $('p').eq(2);
thirdPara.css('color', 'red');

// Get the last paragraph using negative index
const lastPara = $('p').eq(-1);
lastPara.css('font-weight', 'bold');

$('selector').first()

// Get the first list item
const firstItem = $('li').first();
firstItem.addClass('first-item');

// Chain with other methods
$('div').first().css('background', 'yellow').fadeIn();

$('selector').last()

// Get the last list item
const lastItem = $('li').last();
lastItem.addClass('last-item');

// Chain with other methods
$('div').last().css('background', 'blue').fadeIn();

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

// Get elements 2 through 4 (indices 1, 2, 3)
const middleItems = $('li').slice(1, 4);
middleItems.addClass('middle-items');

// Get all elements from index 2 onwards
const fromSecond = $('li').slice(2);
fromSecond.css('color', 'green');

$('selector').find('childSelector').end()

// Work with different levels in the DOM without multiple selections
$('.card')
  .addClass('highlighted')         // Add class to cards
  .find('.title')                  // Switch to titles within cards
    .css('font-weight', 'bold')    // Bold the titles
    .end()                         // Go back to the card selection
  .find('.content')                // Now find content within cards
    .html('<p>New content</p>');   // Change the HTML