Monday, November 25, 2013

Intro to jQuery

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


3 comments:

  1. http://plnkr.co/edit/aANz8wlRVUa4dAaqub4Q?p=info

    I've modified the functions to work with javascript instead of jquery for the Id elements, however it does not work with the class elements.

    ReplyDelete
  2. Hey Jensen,
    I 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();

    ReplyDelete
  3. Was just checking out Codecademy, they have a bunch of great tutorials with JQuery here: http://www.codecademy.com/tracks/jquery

    ReplyDelete