
Enter a search term above to see results...
Enter a search term above to see results...
Logical operator methods in Query allow you to perform checks and filtering operations on sets of elements.
Checks the current matched set of elements against a selector, element, or Query object and returns true if at least one of these elements matches the given arguments.
$('selector').is(selector)
Name | Type | Description |
---|---|---|
selector | String or Function | A string containing a selector expression to match elements against or a function to test each element |
boolean
- true
if at least one element matches, false
otherwise.
if ($('#myElement').is('.active')) { console.log('The element is active');}
Checks if there are any elements in the current Query object.
$('selector').exists()
boolean
- true
if the Query object contains at least one element, false
otherwise.
if ($('.my-element').exists()) { console.log('The element exists in the DOM');} else { console.log('The element does not exist in the DOM');}
Quick Check
exists()
is a convenient way to check for the presence of elements without needing to compare the length property.
Remove elements from the set of matched elements.
$('selector').not(selector)
Name | Type | Description |
---|---|---|
selector | String or Function | A string containing a selector expression to match elements against or a function to test each element |
A new Query object with elements that do not match the selector.
$('div').not('.ignore').addClass('highlight');
Inverse Selection
not()
is particularly useful for excluding specific elements from a larger set based on various criteria.
Checks if any element in the current set contains the specified target element or elements matching a selector.
$('selector').contains(selectorString)
$('selector').contains(element)
$('selector').contains(queryObject)
Name | Type | Description |
---|---|---|
selector | String | Element | Query | A CSS selector string, DOM element, or Query object to check for containment |
boolean
- true
if any element in the set contains the specified target, false
otherwise.
// Check if a container has elements matching a selectorif ($('.container').contains('.highlight')) { console.log('Container has highlighted elements');}
// Check if a specific element is containedconst button = document.querySelector('button');if ($('.toolbar').contains(button)) { console.log('Button is inside the toolbar');}
// Check if any selected elements are containedconst $inputs = $('input[required]');if ($('form').contains($inputs)) { console.log('Form contains required inputs');}
// check if element is in web componentconst result = $$('web-component').contains('.shadow-element');
Returns a Query object containing only the element at the specified index.
$('selector').eq(index)
Name | Type | Description |
---|---|---|
index | Number | Zero-based index of the element to select |
A new Query object containing the element at the specified index.
// Get the third paragraph (index 2)const thirdPara = $('p').eq(2);thirdPara.css('color', 'red');
// Get the last paragraph using negative indexconst lastPara = $('p').eq(-1);lastPara.css('font-weight', 'bold');
Returns a Query object containing only the first element from the matched set.
$('selector').first()
A new Query object containing the first element.
// Get the first list itemconst firstItem = $('li').first();firstItem.addClass('first-item');
// Chain with other methods$('div').first().css('background', 'yellow').fadeIn();
Returns a Query object containing only the last element from the matched set.
$('selector').last()
A new Query object containing the last element.
// Get the last list itemconst lastItem = $('li').last();lastItem.addClass('last-item');
// Chain with other methods$('div').last().css('background', 'blue').fadeIn();
Returns a Query object containing a subset of elements from the matched set, based on the specified range.
$('selector').slice(start, end)
Name | Type | Description |
---|---|---|
start | Number | Zero-based index to start the slice |
end | Number | (Optional) Zero-based index to end the slice |
A new Query object containing the sliced elements.
// 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 onwardsconst fromSecond = $('li').slice(2);fromSecond.css('color', 'green');
Returns to the previous set of elements in the traversal chain.
$('selector').find('childSelector').end()
The Query object that was active before the last traversal method was used.
// 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