In the class today we went over an introduction to jQuery.
Make sure you read all about jQuery for any questions you have here: http://jquery.com
For documentation on all the jQuery calls: http://api.jquery.com
We learned how to select elements by ID and by Class name. The functions we learned about are: hide, show, click, val, text, and html.
For the in class exercises refer to these links:
#1: http://plnkr.co/edit/lHOBZJEpCJIqaYngzdsz
#2: http://plnkr.co/edit/gXFKuOQjrHxPm3qd92UR
http://plnkr.co/edit/aANz8wlRVUa4dAaqub4Q?p=info
ReplyDeleteI've modified the functions to work with javascript instead of jquery for the Id elements, however it does not work with the class elements.
Hey Jensen,
ReplyDeleteI would definitely recommend using JQuery for doing this rather than making life hard for yourself, but I think it's great you are looking for alternate methods of doing things.
Ok, so.. You wan to use var myClasses = getElementsByClass('classname'); Note that you do NOT need the . here as that is just for JQuery class names.
As the name implies, you are getting element(s) by class. Since there can legally be more than one instance of a class on a page, you are going to get back a collection, or array of elements that you can use several different ways. Singly: myClasses[0] or myClasses[7], etc.. This is referencing it by index. If you pick an index that doesn't exist, Javascript will barf on you.
The other way to access the elements is safer:
var elements = document.getElementsByClassName('test');
for (var i = 0; i < elements.length; i++) {
var thisElement = elements[i];
//do something with thisElement
}
Here is how you would do something with each of the elements you selected in JQuery:
$('.test').JQueryFunction();
Was just checking out Codecademy, they have a bunch of great tutorials with JQuery here: http://www.codecademy.com/tracks/jquery
ReplyDelete