# 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.