Reddit -Independent Practice

Following the directions below to practice using jQuery:

  • Go to http://www.reddit.com

  • Reddit uses jQuery, so we can use our Chrome developer console to manipulate the site in real time using jQuery.

  • To do this, once Reddit.com has loaded, go to your view menu in Chrome. Select View > Developer > JavaScript Console

  • Once that's loaded, try entering the following command into the Chrome REPL:

$('img').hide()
  • Hit enter. All the images should have disappeared from the Reddit.com home page. Make sure you understand why before moving on.

  • Now try this:

    $('img').show()
    
  • That should have brought all the images back. Make sense so far?

  • Now with the chrome inspector, try to match the title of the first Reddit post and replace the text using .text() or .html().

  • Try to replace the blue background in the header by another color using the function .css().

  • Now try some of the other examples we've gone over in the Chrome REPL and see what happens to the Reddit.com website. Remember, this is your laboratory — your chance to experiment and learn. Make use of it.

Conclusion

  • jQuery makes JavaScript super friendly and easy to write. a lot of websites are using jQuery, soon you will too. Remember that it's always good to know how to use what is called vanilla JavaScript, or JavaScript without a library.

  • Please spend some time reviewing the documentation.

results matching ""

    No results matching ""