# JFast Javascript Library ### 1 . Why jFast? | Attribute | What it means | | ------------------------- | ------------------------------------------------------------------------------- | | **Tiny footprint** | ≈ 2 KB gzipped – ideal for embed widgets, dashboards, or legacy projects. | | **jQuery‑style API** | 80 % coverage of the helpers devs reach for most (`addClass`, `on`, `ajax`, …). | | **No build‑step** | Ship the un‑minified file for debugging; run your own minifier if desired. | | **Polyfill friendly** | Bundles fallbacks for `Set` and `NodeList.forEach` so IE11 gets basic support. | | **Modern under the hood** | Uses `querySelectorAll`, `classList`, and Promises. | *** ### 2 . Installation ```html ``` When the script loads you’ll see a yellow console log: ``` jFast loaded version 1.2.3 ``` and two globals become available: ```js console.log(window.jFast === window.$); // true ``` ### 3 . Creating a Collection Below are **all** accepted constructor signatures, plus runnable snippets you can paste into DevTools. | Call | Typical Use Case | Example | | ------------------ | ------------------------------------- | ------------------------------------------------------------------------------- | | `jFast('section')` | Select DOM by CSS | `$('.box').addClass('open')` | | `jFast(domNode)` | Wrap an existing DOM node | `jconst btn = document.getElementById('send');\n$(btn).attr('disabled', true);` | | `jFast(NodeList)` | Hand‑off result of `querySelectorAll` | `const nodes = document.querySelectorAll('.note');\n$(nodes).hide();` | | `jFast([el1,el2])` | Wrap an array of nodes | `$( [header, footer] ).css('background', '#333');` | | `jFast(function)` | DOM‑ready callback | `$(function(){ console.log('DOM ready'); });` | | *no value* | Empty collection (edge cases) | `jFast().length === 0;` | **Quick demo** ```html ``` ### 4 . Core Iterator APIs **4.1 `.each(callback)`** Iterate the wrapped set. Unlike plain `forEach`, the callback is executed with `(element, index)` to match jQuery style. ```js $('a.external').each((i, a) => a.target = '_blank'); ``` **4.2 `.eq(index)`** Returns a new jFast collection containing just the element at *index*. Negative indices count from the end. ```js // Hide the last column in a table $('table tr').find('td').eq(-1).hide(); ``` **4.3 `.first()` / `.last()`** Sugar for `.eq(0)` and `.eq(length - 1)`. ```js $('.slide').last().addClass('current'); ``` *** ### 5 . Class Helpers | Method | Purpose | Minimal Demo | | ------------------------------ | --------------------------------- | ------------------------------------------- | | `.addClass(names)` | Add one or more classes | `$('#msg').addClass('show animated');` | | `.removeClass(names)` | Remove class(es) | `$('nav').removeClass('sticky');` | | `.toggleClass(names, [state])` | Flip class or force boolean state | `$('.panel').toggleClass('open');` | | `.hasClass(name)` | Boolean test on first element | `if ( $('#modal').hasClass('open') ) {...}` | **Practical scenario** ```js // click to open/close FAQ answers $('.faq-question').on('click', function () { $(this) .next('.faq-answer') .toggleClass('hidden'); }); ``` *** ### 6 . Attribute & Property Utilities **6.1 `.attr(name)` / `.attr(name, value)`** ```js // Read const src = $('img.preview').attr('src'); // Write $('img.preview').attr('alt', 'Screenshot'); ``` *Remove an attribute*: ```js $('input.temp').attr('autocomplete', null); ``` **6.2 `.prop(name[, value])`** Directly modify DOM properties (not string attributes): ```js $('input[type=checkbox]').prop('checked', false); ``` **6.3 `.data(key[, value])`** Free of JSON parsing/serialisation: ```html
``` *** ### 7 . Text, HTML, and Inline CSS | Getter | Setter | Sample | | ------------ | ------------------- | ------------------------------------------------- | | `.text()` | `.text(value)` | `$('#status').text('Saving…');` | | `.html()` | `.html(markup)` | `$('#list').html('
  • New item
    • ');` | | `.css(prop)` | `.css(prop, value)` | `$('#box').css('width', '250px');` | | | `.css(object)` | `$('#box').css({height:120, background:'#eef'});` | ### 8 . DOM Insertion & Removal | Method | What it does | Live Example | | --------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | `.append(content)` | Add *content* to **inside‑end** of every element in the set. | `$('#log').append('
  • Finished at '+Date.now()+'
    • ');` | | `.prepend(content)` | Add *content* to **inside‑start**. | `$('ul').prepend('
  • Top item
    • ');` | | `.before(content)` | Insert *content* **before** each element. | `$('.alert').before('
    ');` | | `.after(content)` | Insert *content* **after** each element. | `$('.alert').after('');` | | `.remove()` | Detach each element from the DOM. Returns the same collection (now empty). | `$('.toast .close').on('click', e => $(e.delegateTarget).parent('.toast').remove());` | | `.empty()` | **Clear** `.innerHTML` of every element but keep the elements themselves. | `$('#results').empty(); // ready for fresh data` | | `.clone([deep=true])` | Produce a *new* jFast collection containing clones. `deep=false` copies only the element. | `const $copy = $('#card').clone();\n$('#cards').append($copy);` | > **Tip — Passing existing nodes**\ > All insertion helpers accept **strings, HTMLElement(s), NodeLists, or jFast objects**. If you pass DOM nodes, the library clones them when needed so every target gets its own copy. ```js $tmpl = $('#tmpl .item'); // template item stored off‑DOM $('.list').append( $tmpl.clone() ); // safe – original remains intact ``` ### 9 . Geometry & Scrolling Helpers These methods read or write layout‑related values; none trigger a reflow more than necessary. **9.1 `.width([value])` & `.height([value])`** *Getter* – returns the element’s **content box** size (ignores padding, border, margin).\ \&#xNAN;*Setter* – accepts number (pixels) or any valid CSS length string. ```js // Read const modalW = $('#modal').width(); // e.g. 512 // Write absolute px $('#sidebar').width(240); // Write responsive unit $('#sidebar').css('width', '33.333%'); // or use .css directly ``` **9.2 `innerWidth()` / `innerHeight()`** Returns **content + padding + border** (matches `jQuery.innerWidth`). Useful for box‑model arithmetic: ```js if ( $box.innerHeight() < 200 ) $box.height(200); ``` **9.3 `outerWidth([includeMargin])` / `outerHeight([includeMargin])`** Adds margin when the optional boolean is `true`. ```js const cardTotal = $('.card').outerHeight(true); // full footprint ``` **9.4 `.offset()`** Absolute page coordinates *(pixels from viewport’s top‑left, including scroll)*: ```js const pos = $('#avatar').offset(); // {top:123, left:456} window.scrollTo({ top: pos.top - 20, behavior:'smooth' }); ``` **9.5 `.position()`** CSS `position` relative to **offsetParent** (similar to jQuery): ```js const { top, left } = $('#tooltip').position(); console.log('Tooltip is', top, 'px below its anchor'); ``` **9.6 `.offsetParent()`** Wraps and returns the element’s offset parent or `document.documentElement`. ```js $('#badge').offsetParent().css('outline','1px dashed red'); ``` **9.7 `scrollTop([value])` / `scrollLeft([value])`** Works on both **elements** and **`window`**. ```js // Get current scroll const y = $(window).scrollTop(); // Scroll container to bottom $('#chat').scrollTop( $('#chat')[0].scrollHeight ); ``` **9.8 `.index([element])`** *No argument* → index of first element within its parent.\ \&#xNAN;*Element argument* → index of that element within the wrapped set. ```js const clickedCol = $(e.target).index(); // which column? if ( clickedCol === 0 ) sortBy('name'); ``` ### 10 . Traversal Helpers | Method | Returned collection | Typical Use | Example | | --------------------- | ------------------------------------------- | ------------------------------------ | ------------------------------------------------- | | `.find(sel)` | **All** descendants matching `sel`. | Narrow to deeper nodes. | `$('#nav').find('a.active')` | | `.closest(sel)` | First ancestor (self‑incl.) matching `sel`. | Bubble upward until match. | `$(btn).closest('form').submit()` | | `.parent()` | The direct parent for every element. | Jump one level up. | `$('.item').parent().addClass('has‑item')` | | `.parents()` | **All** ancestors for every element. | Apply global change along the chain. | `$('#hero').parents().css('position','relative')` | | `.children()` | Direct child elements of each node. | Loop through immediate kids. | `$('#menu').children().addClass('link')` | | `.next()` / `.prev()` | Immediate next/previous sibling. | Carousel, tab order, etc. | `$('.tab.active').next().click()` | | `.siblings()` | All siblings except the element itself. | Row/column highlighting. | `$(cell).siblings().addClass('dim')` | | `.filter(sel)` | Elements that **pass** selector test. | Refine a set post‑selection. | `$('li').filter('.active, .current')` | | `.not(sel)` | Elements that **fail** selector test. | Exclude unwanted nodes. | `$('li').not('.disabled')` | | `.is(sel)` | **Bool** – does the *first* element match? | Conditionals. | `if ( $(el).is(':visible') ) …` | | `.add(sel)` | Union of current set + `sel`. | Merge disparate selections. | `$('.btn').add('#save')` | *** **10.1 `.find(selector)`** Searches **below** every element in the current set. ```html ``` > **Performance tip** – `find()` re‑collects, so keep the result in a variable if you reuse it. *** **10.2 `.closest(selector)`** Works like native `Element.closest`. Includes the element itself when checking. ```js // inside a click handler on the document $(e.target) .closest('[data-modal]') .addClass('open'); ``` *** **10.3 `.parent()` & `.parents()`** `parent()` climbs **one** level.\ `parents()` returns *every* ancestor up to ``. ```js $('.note').parent().addClass('has-note'); $('.btn-save') .parents('section') // only ancestors that are
    .addClass('has-unsaved'); ``` *** **10.4 `.children()`** ```html ``` *** **10.5 `.next()` & `.prev()`** ```js $('.wizard-step.active') .next() // the step after the current one .addClass('active') .prev() // go back to the previously active .removeClass('active'); ``` *** **10.6 `.siblings()`** ```js $('.gallery img.selected') .siblings() .css('opacity',0.3); ``` *** **10.7 `.filter()`, `.not()`, `.is()`** ```js // Disable all but visible inputs $('input').not(':visible').prop('disabled', true); // Count only checked boxes const checked = $('input[type=checkbox]').filter(':checked').length; // Detect whether the page uses a dark theme if ( $('body').is('.dark') ) enableNightMode(); ``` *** **10.8 `.add(selector)`** Merge two unrelated selections into one chainable set. ```js $('.toolbar button') .add('#globalSave') .on('click', saveDocument); ``` *** #### Mini Project Example – Building a Stepper Below is a concise snippet that combines traversal helpers to implement a step‑by‑step UI. ```html
    1. Choose plan
    2. Billing info
    3. Confirm
    ``` Traversal calls used: * `#steps .current` – initial selection * `.next('.step')` – sibling traversal with selector filter * `.last()` / `.is()` – index check & boolean match ### 11 . Effects & Visibility Helpers | Method | Purpose | Default Duration | Example | | ------------------ | ----------------------------------------------------------------------- | ---------------- | ------------------------------- | | `.show([ms])` | Make the element visible (removes `display:none` and optionally fades). | *none* | `$('#loader').show(300)` | | `.hide([ms])` | Fade out then `display:none`. | *none* | `$('.alert').hide(500)` | | `.toggle([ms])` | Switch between show ↔ hide. | *none* | `$('#panel').toggle(200)` | | `.fadeIn([ms])` | Alias of `.show()` with default 400 ms when called without arg. | 400 ms | `$('img').fadeIn()` | | `.fadeOut([ms])` | Alias of `.hide()` with default 400 ms. | 400 ms | `$('img').fadeOut(150)` | | `.slideDown([ms])` | Animate height from 0 → full. | 400 ms | `$('.faq-answer').slideDown()` | | `.slideUp([ms])` | Animate height from full → 0, then `display:none`. | 400 ms | `$('.faq-answer').slideUp(250)` | **11.1 Show / Hide Example – Toast Notification** 
    <div id="toast" class="toast">Saved!</div>
<style>
  .toast{position:fixed;bottom:1rem;right:1rem;padding:1em;background:#333;color:#fff;display:none}
</style>
<script>
  function flashToast() {
    $('#toast')
      .fadeIn(300)
      .delay(2000)            // custom helper below ▼
      .fadeOut(300);
  }

  // Tiny helper: chainable delay using setTimeout
  jFast.prototype.delay = function (ms) {
    return this.each(el => setTimeout(()=>{}, ms));
  };

  $('#saveBtn').on('click', flashToast);
</script>
    **11.2 Accordion with Slide Helpers** ```html

    Section 1

    Hidden text…

    Section 2

    More hidden text…
    ``` *** ### 12 . Event System jFast replicates jQuery’s flexible `.on()` signature, adds `.one()`, and keeps an **internal WeakMap** to clean listeners automatically. **12.1 `.on(events, [selector], handler [, capture])`** | Pattern | Use‑case | Example | | ---------------------------- | ---------------------------------- | ----------------------------------------- | | `.on('click', fn)` | Direct binding | `$('#btn').on('click', save)` | | `.on('keyup change', fn)` | Multiple events space‑separated | `$('input').on('keyup change', validate)` | | `.on('click', '.child', fn)` | Delegation (parent stays constant) | `$('#list').on('click', 'li', editItem)` | ```js function editItem(e){ // e.delegateTarget is the
  • that matched '.child' console.log('Editing', e.delegateTarget.textContent); } ``` **12.2 `.one(events, [, selector], handler)`** Runs **once**, then auto‑removes. ```js $('#modal').one('shown', () => console.log('Modal opened for the first time only')); ``` **12.3 `.off(events, [, selector], [handler])`** Removes listeners. Parameters mirror `.on()`. Omitting `handler` drops **all** listeners matching event + selector. ```js $(window).off('scroll.myNS'); // if you namespaced your events ``` **12.4 `.trigger(type, [detail])`** Dispatch custom or native events with optional `detail` payload. ```js // Somewhere deep in a component $(this).trigger('saved', { id: 42 }); // Elsewhere $(document).on('saved', (e)=> console.log('Item saved!', e.detail.id)); ``` > **Note**: Native bubbling rules apply, so you can trigger on a child and listen on ``. **12.5 Event Shortcut Methods** For convenience jFast defines **typed aliases**: ```js $('#field').focus(); // trigger focus $('#field').focus(handler); // bind $('form').submit(e => e.preventDefault()); $(document).keydown(e => e.key === 'Escape' && close()); ``` Available shortcuts: `click`, `change`, `keydown`, `keyup`, `keypress`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`. *** **12.6 Real‑World: Live Search with Debounce** ```html ``` *Techniques used* * Direct event binding (`keyup`) * Reading input value with `.val()` * Ajax shorthand `$.getJSON` * DOM diff via `.html(html)` *** #### Recap **Effects handled:** show/hide, fade, slide, toggle.\ **Events mastered:** `.on`, `.one`, `.off`, `.trigger`, plus typed shortcuts & delegation patterns. ### 13 . Form Helpers | API | Read / Write | Quick Example | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | | `.val()` / `.val(value)` | Get or set an element’s value. Works on ``, `