U-Query.js Demo

Element Selection & DOM Manipulation

DOM Queries

Select elements to see them highlighted

Test Element 1

Test Element 2

Test Element 3 (special)

DOM Manipulation

Original content

CSS & Classes

CSS Target Element

Selection API

Core Selectors

$(selector) → NodeList

$('.class') → NodeList

$('#id') → NodeList

$('tag') → NodeList

DOM Manipulation

html(content?) → NodeList|string

text(content?) → NodeList|string

append(content) → NodeList

prepend(content) → NodeList

remove() → NodeList

CSS & Classes

css(styles) → NodeList

addClass(className) → NodeList

removeClass(className) → NodeList

toggleClass(className) → NodeList

Examples

// Element selection
const elements = $('.my-class');
const byId = $('#my-id');

$('.target').html('<b>New content</b>');
$('.target').text('Plain text');
$('.container').append('<p>Added</p>');

$('.element').css({
  'color': 'red',
  'background': 'blue'
});
$('.element').addClass('active');

Event Handling & Visibility

Event System

Show/Hide/Toggle

Toggle me!

Method Chaining

Chain Target 1

Chain Target 2

Chain Target 3

Events & Visibility API

Event Methods

on(event, handler) → NodeList

off(event, handler?) → NodeList

trigger(event, data?) → NodeList

once(event, handler) → NodeList

Visibility Control

show() → NodeList

hide() → NodeList

toggle() → NodeList

fadeIn(duration?) → NodeList

fadeOut(duration?) → NodeList

Method Chaining

All u-query methods return the NodeList, enabling method chaining.

$('.button').on('click', function() {
  console.log('Clicked!');
});

$('.element')
  .addClass('active')
  .css({'color': 'red'})
  .show()
  .on('click', handler);

$('.modal').fadeIn(300);
$('.tooltip').fadeOut(200);

AJAX & Global Events

AJAX Utilities

AJAX Request Status

Global Event System

Utility Functions

Utility Element 1

Utility Element 2

Utility Element 3

AJAX & Utilities API

AJAX Methods

$.get(url, callback) → Promise

$.post(url, data, callback) → Promise

$.ajax(options) → Promise

$.json(url) → Promise

Global Event System

$.on(event, handler) → $

$.off(event, handler?) → $

$.emit(event, data?) → number

$.trigger(event, data?) → number

Utility Functions

$.each(selector, callback) → $

$.ready(callback) → $

$.extend(target, ...sources) → object

$.map(selector, callback) → Array

Examples

const data = await $.get('/api/users');
$.post('/api/users', {name: 'John'})
  .then(response => console.log(response));

$.on('user-login', user => {
  console.log('User logged in:', user);
});
$.emit('user-login', {id: 123});

$.each('.item', (el, i) => {
  el.textContent = `Item ${i}`;
});

$.ready(() => {
  console.log('DOM ready!');
});

Browser Info

Loading library information...

This browser supports

Advanced Features

Advanced Selectors

$(':visible') → NodeList

$(':hidden') → NodeList

$(':checked') → NodeList

$(':first') → NodeList

$(':last') → NodeList

Data Attributes

data(key, value?) → NodeList|any

attr(name, value?) → NodeList|string

prop(name, value?) → NodeList|any

val(value?) → NodeList|string

Traversal Methods

parent() → NodeList

children() → NodeList

siblings() → NodeList

find(selector) → NodeList

closest(selector) → NodeList

DOM Diff Updates

u-query can make use of morphdom.js for efficient DOM diff updates.

$.options.alwaysDoDifferentialUpdate = true

Global flag for morphdom.