Skip to content
/ jqSlim Public
forked from dciccale/ki.js

jqSlim (forked 🍋 ki.js) is a super-tiny jQuery-like API JavaScript library

License

Notifications You must be signed in to change notification settings

pwFoo/jqSlim

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 

Repository files navigation

jqSlim

jqSlim is a super-tiny jQuery-like API JavaScript library (781 bytes minified | 449 bytes gzipped)

Browser support

jqSlim version is supported by the following browsers: IE9+, Chrome 6+, Safari 5+, Firefox 6+, Opera 11.5+.

What can I do with jqSlim?

With jqSlim you can do the basic stuff jQuery can, for example:

DOM Ready?

$(function () {
  // this will be executed when the dom is ready!
  alert('Hey the DOM is ready ;)');
});

This was just jqSlim, no jQuery

CSS Selectors

Use any CSS selector that exists to get elements from the DOM.

$('p:nth-last-of-type(2)');
$('[attribute|=value]');
$('p:not(.note)');
$('p:empty');

See a list of all CSS selectors

Events

Yes, events with the known .on() and .off() methods

<button>jqSlim</button>
$(function () {
  // ok now that the dom is ready i would like to add some events
  var alertMyName = function () {
    alert('My name is ' + this.textContent); // will allert 'jqSlim'
  };

  $('button').on('click', alertMyName);
  // to turn it off just use .off()
  //$('button').off('click', alertMyName);
});

You can add any JavaScript event even touch events for mobile, under the hood jqSlim uses addEventListener, so feel free to use any valid DOM event.

.each()

The each() method is also included in the core of jqSlim for easy iteration on a DOM collection.

$(function () {

  // get all p tags
  $('p').each(function (elem, i) {

    // change color to red
    elem.style.color = 'red';

    // append the index to the text
    elem.textContent += i;
  });
});

Keep the chain!

All jqSlim methods are chainable, just like jQuery.

Plugins?

Yeah, you can write plugins for jqSlim if you want, fork the project, keep them super super xxs and I promise to merge them into the official repo.

ki.extend

Check out a lot of already made extensions for ki.js here: ki.extend.js (thanks to james2doyle)

Ajax plugin

The great ajax module from fdaciuk is converted to jqSlim ajax plugin.

jqSlim plugins

Updated ki.extend plugins some additional plugins are added to the plugin directory.

  • fadeIn() / fadeOut
  • closest()

How to make plugins?

Just add your methods to the prototype of jqSlim and you're done. For example, let's add a text() method for setting or getting the text of an element, in the tiniest way I can think of:

// minified is 106 bytes
$.prototype.text = function (a) {
  return a === a + '' ? this.each(function (b) {
    b.textContent = a
  }) : this[0].textContent
};

Now use the plugin just like the other methods:

$(function () {
  // <p>hello</p>

  // get the text from the p tag
  console.log($('p').text()); // hello

  // set another text
  $('p').text('bye'); // bye
});

Create your own plugin and let's make the tiniest JavaScript Library ever! Remember to write byte-saving code, see this [useful resource for JavaScript byte-saving techniques](https://github.com/jed/140bytes/wiki/Byte-saving-techniques) written by 140byt.es community

Where can I use jqSlim?

In every cool and modern browser.

License

See LICENSE.txt

About

jqSlim (forked 🍋 ki.js) is a super-tiny jQuery-like API JavaScript library

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%