- To get the most out of jQuery, it is essential to understand how an HTML document is structured. You have to know how your code is built before you can start changing it.
- An HTML document has what is called the Document Object Model (DOM). This is the way that JavaScript is able to access and modify the HTML page.
- The DOM consists of every element on the page, laid out in a heirarchical way that reflects the way that they were laid out in the original file.
- Relationships between elements are referred to with a vocabulary similar to that of a geneologist. Elements have parents, children, and siblings.
- jQuery is most useful when used to refer to elements of your HTML page via their DOM attributes.
Last active
December 18, 2015 03:19
-
-
Save skopp/5717550 to your computer and use it in GitHub Desktop.
JavaScript vs jQuery: a 1:1 comparison adapted by skopp from various sources, biggest influence - cocecademy. enjoy.
This file contains hidden or 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
| <html> | |
| <head> | |
| <script src="script.js"></script> | |
| </head> | |
| <body> | |
| <div id="myElement"></div> | |
| <div><a href="#">something is horribly wrong! help me fix it</a></div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| //dom ready | |
| $('document').ready(function(){ | |
| /* | |
| *Select an element from the page and make it invisible | |
| */ | |
| //javascript: | |
| document.getElementById('myElement').style.display = "none"; | |
| //jquery: | |
| $('#myElement').hide(); | |
| /* | |
| * Creating and adding a new heading to the body | |
| */ | |
| //javascript: | |
| var newHeading = document.createElement("h1"); | |
| newHeading.innerHTML = "Javascript"; | |
| document.getElementsByTagName('body')[0].appendChild(newHeading); | |
| //jQuery | |
| $('body').append( $('<h1/>').html("jQuery") ); | |
| /* | |
| * Add a CSS class to every div that is the child of a link | |
| */ | |
| //javascript | |
| var links = document.getElementsByTagName('a'); | |
| var link; | |
| for (i=0;i<links.length;i++) { | |
| link = links[i]; | |
| for (j=0;j<link.children.length;j++) { | |
| if (link.children[j].tagName === "DIV") { | |
| var currentClassName = link.children[j].className; | |
| var newClassName; | |
| if (currentClass === "") { | |
| newClassName = "newClass"; | |
| } else { | |
| newClassName = currentClassName + " newClass"; | |
| } | |
| link.children[j].className = newClassName; | |
| } | |
| } | |
| } | |
| //jquery | |
| $('a > div').addClass("newClass"); | |
| // OK, now which one do you like better??? | |
| iPrefer = "jquery"; | |
| alert("I prefer " + iPrefer +"!"); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
via codecademy