As you've learned from CSS, not all browsers are created equal. There are properties specific to each browser, and code you have to write so that designs and features are cross-browser compatible. Even though things have improved drastically from the earlier versions of browsers (Internet Explorer 6, etc.), we still have to pay attention to browser differences.
We'll be working with the following HTML (which is also in
html/index.html for you to test yourself with the console) for this example.
This HTML renders as a white page with black text displaying
"HEY HEY HEY HEY HEY" in the top left corner of the page.
Let's say we want to change the font color to blue and the background color of the
document.getElementById("hey").style.color = "blue"; document.getElementById("hey").style.backgroundColor = "#ccc";
getElementById() selects an HTML element by an ID. In this case we're passing in the ID
"hey" which will select the
style.property = "value" function which allows us to change the CSS of an element.
For earlier versions of Firefox and Chrome, you could achieve that with the following JS:
document.getElementById("header").style.cssFloat = "left";
But this code wouldn't work with earlier versions of Internet Explorer. Instead, you would have to write:
document.getElementById("header").style.styleFloat = "left";
jQuery was created to solve this problem of needing different lines of code for different browsers. If you include the jQuery library in your code, you can write one single line of code that handles each browser on its own. AMAZING!
jQuery provides us with immense convenience methods that make our jobs as developers much easier, especially when dealing with AJAX and API calls. We can write significantly fewer lines of code and still achieve the same effect. jQuery is also an open source library and has a tremendous community around it. At the time of this writing, over 78% of the top million sites on the web use jQuery — crazy! There are many, many jQuery plugins that provide additional functionality and that allow us to build complex applications very quickly.
View JS Libraries on Learn.co and start learning to code for free.