Jquery Kullanmadan $ (dolar) İşaretini Kullanarak Javascirpt Çalıştırma

Jquery Kullanmadan $ (dolar) İşaretini Kullanarak Javascript Çalıştırma
Malumunuz jquery 90Kb lara varan boyutu ile bazen web sitelerini ağrılaştırabilmektedir. Bunun yerine tam olarak bir jquery nin yerini tutmasada alışık olduğumuz $ işaretini kullanarak, jquery.js yi import etmeden "ki" isimli bir kod bloğu ile bu işlemi yapabiliriz.Ki ile Neler Yapılabilir
DOM Ready?
$(function () {
// this will be executed when the dom is ready!
alert('Hey the DOM is ready ;)');
});
$ instead of jquery
CSS Selectors
$('p:nth-last-of-type(2)');
$('[attribute|=value]');
$('p:not(.note)');
$('p:empty');
Events
Yes, events with the known.on()
and .off()
methods $(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 'ki.js'
};
$('button').on('click', alertMyName);
// to turn it off just use .off()
//$('button').off('click', alertMyName);
});
.each()
$(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;
});
});
Plugin Yazmak
// minified is 106 bytesPlugini kullanalım:
$.prototype.text = function (a) {
return a === a + '' ? this.each(function (b) {
b.textContent = a
}) : this[0].textContent
};
$(function () {
//hello
// get the text from the p tag
console.log($('p').text()); // hello
// set another text
$('p').text('bye'); // bye
});
Ki.js Kod Bloğu (1,7 KB)
Kaynak:https://github.com/dciccale/ki.js/*!
* ki.js - jQuery-like API super-tiny JavaScript library
* Copyright (c) 2015 Denis Ciccale (@tdecs)
* Released under MIT license
*/
!function (b, c, d, e) {
/*
* init function (internal use)
* a = selector, dom element or function
*/
function i(a) {
c.push.apply(this, a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : e)
}
/*
* $ main function
* a = css selector, dom object, or function
* http://www.dustindiaz.com/smallest-domready-ever
* returns instance or executes function on ready
*/
$ = function (a) {
return /^f/.test(typeof a) ? /c/.test(b.readyState) ? a() : $(b).on('DOMContentLoaded', a) : new i(a)
}
// set ki prototype
$[d] = i[d] = $.fn = i.fn = {
// default length
length: 0,
/*
* on method
* a = string event type i.e 'click'
* b = function
* return this
*/
on: function (a, b) {
return this.each(function (c) {
c.addEventListener(a, b)
})
},
/*
* off method
* a = string event type i.e 'click'
* b = function
* return this
*/
off: function (a, b) {
return this.each(function (c) {
c.removeEventListener(a, b)
})
},
/*
* each method
* use native forEach to iterate collection
* a = the function to call on each iteration
* b = the this value for that function
*/
each: function (a, b) {
c.forEach.call(this, a, b)
return this
},
// for some reason is needed to get an array-like
// representation instead of an object
splice: c.splice
}
}(document, [], 'prototype');