Forked from simaovergalho/Javascript-jQuery_replacer
Last active
April 8, 2018 02:52
-
-
Save Narayon/63245048d81362b99652 to your computer and use it in GitHub Desktop.
Javascript: Stop Using jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<ul> | |
<li id="pink">Pink</li> | |
<li id="salmon">Salmon</li> | |
<li id="blue">Blue</li> | |
<li id="green">Green</li> | |
<li id="red">Red</li> | |
</ul> | |
</div> | |
<script> | |
// custom lightweight selector implementation | |
// nickname: dolla | |
window.$ = function(selector) { | |
return document.querySelector(selector); | |
}; | |
window.$$ = function(selector) { | |
var items = {}, | |
results = [], | |
length = 0, | |
i = 0; | |
// this doesn't work on IE 8- and Blackberry Browser | |
results = Array.prototype.slice.call(document.querySelectorAll(selector)); | |
length = results.length; | |
// add the results to the items object | |
for ( ; i < length; ) { | |
items[i] = results[i]; | |
i++; | |
} | |
// add some additional properties to this items object to | |
// make it look like an array | |
items.length = length; | |
items.splice = [].splice(); | |
// add an 'each' method to the items | |
items.each = function(callback) { | |
var i = 0; | |
for ( ; i < length; ) { | |
callback.call(items[i]); | |
i++; | |
} | |
} | |
return items; | |
}; | |
// end custom selector API | |
(function() { | |
// select the green item and crank up the font size | |
$("#green").style.fontSize = "2em"; | |
// select item1 by id and change it's background color to salmon | |
$$("li").each(function() { | |
this.style.backgroundColor = this.id; | |
}); | |
}()); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment