It's true. Using jQuery is likely to make you forget how to do fundamental things in javascript. Some people get all riled up about this because jQuery is just a library, meaning its only javascript anyway. The way jQuery allows selectors to be written is reason enough to utilize it. Compare these examples:
A) $("#first_paragraph").text("Booya");
B) document.getElementbyId("first_paragraph").innerHTML = "Booya";
jQuery accomplishes the same thing in half as many characters.
There are times when a customer wants something written in pure javascript. I suppose they're trying to avoid licensing and compatibility issues that might come with using libraries.
Anyway, long story short, here are the javascript equivalents of some of my favorite jQuery functions:
// works like the $(".classname") selector
function getElementsByClassName(classname, node) {
if(!node) node = document.getElementsByTagName("body")[0];
var a = [];
var re = new RegExp('\\b' + classname + '\\b');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
// same as $.inArray()
function contains (needle,haystack) {
for (var i=0; i < haystack.length; i++) {
if (needle == haystack[i]) {
return true;
}
}
return false;
}
// counts the frequency of identical indices in an array
// I'm not sure if there is a jQuery equivalent of this but I love the function in PHP!
function arrayFreq(myArray) {
var myBlocks = new Object ;
for (var i=0; i<myArray.length; i++) {
var aBlock = myArray[i] ;
if (myBlocks.hasOwnProperty(aBlock)) {
myBlocks[aBlock]++ ;
} else {
myBlocks[aBlock] = 1 ;
}
}
return(myBlocks);
}
Snippets of code and tricks that would otherwise be forgotten. Useful for me, hopefully for you too.
Friday, August 31, 2012
Wednesday, August 29, 2012
Raphael - javascript library for SVGs
I don't have the time to research this now but I intend to: http://raphaeljs.com/
Thursday, August 23, 2012
CSS rounding X-Browser
I've probably visited this guy's site 40 times to get this syntax:
http://css-tricks.com/snippets/css/rounded-corners/ - and a great resources for all other things CSS.
"
Standard Rounding:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
Individual Corners:
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
"
Tuesday, August 21, 2012
Javascript fallback for jQuery $.inArray
Sometimes, for whatever reason, someone doesn't want you to use jQuery. It helps to know this from the beginning, so ask first.
Here is the javascript fallback for one of my favorite jQuery methods, $.inArray();
function contains (needle,haystack) {
for (var i=0; i < haystack.length; i++) {
if (needle == haystack[i]) {
return true;
}
}
return false;
}
Sending your two values, needle and haystack, to this function will return true on success ( the value is in the array ) or false if it is not.
Example
var favBeers = ["Laguinitas IPA", "Bear Republic Racer 5 IPA", "Deschutes Mirror Pond Pale Ale"];
var aBeer = "Corona";
if (contains(aBeer, favBeers)) {
// nothing happens here because Corona sucks.
}
Here is the javascript fallback for one of my favorite jQuery methods, $.inArray();
function contains (needle,haystack) {
for (var i=0; i < haystack.length; i++) {
if (needle == haystack[i]) {
return true;
}
}
return false;
}
Sending your two values, needle and haystack, to this function will return true on success ( the value is in the array ) or false if it is not.
Example
var favBeers = ["Laguinitas IPA", "Bear Republic Racer 5 IPA", "Deschutes Mirror Pond Pale Ale"];
var aBeer = "Corona";
if (contains(aBeer, favBeers)) {
// nothing happens here because Corona sucks.
}
Subscribe to:
Posts (Atom)