tessl/npm-zepto

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API

Overview

Eval results

Files

Enhanced Selectors

Name: tessl/npm-zepto
Author: tessl

jQuery-compatible pseudo-selectors and advanced selection capabilities. The selector module extends CSS selectors with additional pseudo-selectors for common filtering operations.

Capabilities

Visibility Selectors

Pseudo-selectors for filtering elements based on visibility state.

/**
 * Selects elements that are visible (display not 'none', visibility not 'hidden')
 */
$(':visible');

/**
 * Selects elements that are hidden (display 'none' or visibility 'hidden')
 */
$(':hidden');

Usage Examples:

// Find all visible elements
const visibleElements = $(':visible');

// Hide all currently visible div elements
$('div:visible').hide();

// Show all hidden form elements
$('form :hidden').show();

// Toggle visibility of specific elements
$('.toggleable:visible').hide();
$('.toggleable:hidden').show();

Form State Selectors

Pseudo-selectors for form element states.

/**
 * Selects form elements that are checked (checkboxes and radio buttons)
 */
$(':checked');

/**
 * Selects form elements that are selected (option elements)
 */  
$(':selected');

Usage Examples:

// Get all checked checkboxes
const checkedBoxes = $('input:checked');

// Get selected option values
const selectedValues = $('select option:selected').map(function() {
  return $(this).val();
});

// Style checked elements
$('input:checked').parent().addClass('selected');

// Count selected items
const selectedCount = $('#items :checked').length;

Content Selectors

Pseudo-selectors for filtering based on element content and relationships.

/**
 * Selects elements that have child elements (not empty)
 */
$(':parent');

/**
 * Selects elements containing the specified text
 * @param text - Text to search for
 */
$(':contains(text)');

/**
 * Selects elements that contain elements matching the selector
 * @param selector - CSS selector to match descendants
 */
$(':has(selector)');

Usage Examples:

// Find non-empty list items
const nonEmptyItems = $('li:parent');

// Find elements containing specific text
const elementsWithText = $('p:contains("important")');

// Find containers that have specific child elements
const containersWithImages = $('div:has(img)');

// Find articles containing links
const articlesWithLinks = $('article:has(a)');

Position Selectors

Pseudo-selectors for element position within collections.

/**
 * Selects the first element in the matched set
 */
$(':first');

/**
 * Selects the last element in the matched set
 */
$(':last');

/**
 * Selects the element at the specified index (0-based)
 * @param index - Zero-based index
 */
$(':eq(index)');

Usage Examples:

// Style the first item in each list
$('ul li:first').addClass('first-item');

// Remove the last paragraph
$('p:last').remove();

// Highlight the third item (index 2)
$('.item:eq(2)').addClass('highlighted');

// Select every other row starting from the second
$('tr:eq(1), tr:eq(3), tr:eq(5)').addClass('alternate');

Selector Expression API

Direct access to selector expressions for programmatic use.

/**
 * Expression functions for pseudo-selectors
 */
$.expr[':'].visible = function(element) { /* visibility check */ };
$.expr[':'].hidden = function(element) { /* hidden check */ };
$.expr[':'].checked = function(element) { /* checked state check */ };
$.expr[':'].selected = function(element) { /* selected state check */ };
$.expr[':'].parent = function(element) { /* has children check */ };
$.expr[':'].contains = function(element, match, args, text) { /* text content check */ };
$.expr[':'].has = function(element, match, args, selector) { /* descendant check */ };
$.expr[':'].first = function(element, match, args, set) { /* first in set */ };
$.expr[':'].last = function(element, match, args, set) { /* last in set */ };
$.expr[':'].eq = function(element, match, args, index) { /* index position */ };

Combining Enhanced Selectors

Enhanced selectors can be combined with standard CSS selectors for powerful filtering.

// Complex selector combinations
$('div.container:has(img):visible');           // Visible divs with images
$('form input:not(:checked):visible');         // Unchecked visible form inputs  
$('ul li:contains("active"):first');           // First li containing "active"
$('table tr:eq(0) td:has(input:checked)');     // Cells with checked inputs in first row

// Chaining with enhanced selectors
$('.items')
  .find(':visible')
  .filter(':contains("priority")')
  .addClass('priority-item');

// Using in complex queries
const importantVisibleElements = $('section')
  .find(':visible')
  .filter(':has(.important)')
  .filter(':contains("critical")');

Performance Considerations

Enhanced selectors are implemented as JavaScript functions and may be slower than native CSS selectors:

// Faster - use native CSS when possible
$('.visible-item');           // CSS class
$('input[checked]');          // CSS attribute selector

// Slower - but more flexible
$(':visible');                // JavaScript-based filtering
$(':contains("text")');       // Text content search

Browser Compatibility

Enhanced selectors work consistently across all supported browsers, providing uniform behavior where native CSS selector support varies.

// Consistent behavior across browsers
$(':checked').length;         // Always returns checked element count
$(':visible').hide();         // Reliable visibility detection
$(':contains("test")').size(); // Text search works everywhere

Install with Tessl CLI