k$.$

In order to operate independently from jQuery, it helps for Kickstart to have its own element selector similar to jQuery's $. Kickstart uses k$.$

This technique is what keeps kickstart.js tiny yet unobtrusive if you do decide to use jQuery.

If you're new to bare JavaScript but have some experience with jQuery, you should know You Might Not Need jQuery.

k$.$('p')       // <p></p>
k$.$('.news')   // <div class="news"></div>
k$.$('#button') // <button id="button"></div>

Keep in mind, however, that k$.$ is not a complete substitution of jQuery by any stretch of the imagination. It's really just a rudimentary shorthand for selecting elements. That's what keeps the Kickstart JS library so small.

Another gotcha is the return of k$.$. This will always return only one element.

<p>one</p>
<p>two</p>
<p>three</p>

k$.$('p') // <p>one</p>

This means, some functions will not work as you might expect with jQuery.

var $p = k$.$('p');

for(var $i=0; $i < $p.length; $i++) {
  // This will not work as you would expect.
  // $p is not an array.
}

$p.addEventListener('click', function() {
  // This will work!
});

k$.$$

This alternative to k$.$ always returns an array.

In fact, the definition for k$.$ is just k$.$$(el)[0]!

k$.$('p')

// <p></p>

k$.$$('p')

// [
//   <p></p>,
//   <p></p>,
//   <p></p>,
//   <p></p>
// ]

k$.$$ is the function you'll want to use when iterating over an unknown number of elements in your app.

<ul id="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

var $items = k$.$$('#list li');

for(var $i=0; $i < $items.length; $i++) {
  console.log($item);
}