{"id":2164,"date":"2023-05-02T18:17:09","date_gmt":"2023-05-02T22:17:09","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/?p=2164"},"modified":"2023-05-02T18:17:14","modified_gmt":"2023-05-02T22:17:14","slug":"jquery-basics","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/javascript\/jquery-basics\/","title":{"rendered":"jQuery Basics"},"content":{"rendered":"\n

jQuery is the most popular JavaScript Library. Using a library allows you to quickly write code that is compatible across a range of browsers. <\/p>\n\n\n\n

It should be noted that recently browsers and JavaScript have evolved to make it possible to do a lot of the things jQuery is good at without jQuery. You may see posts and other writing recommending what is referred to as “vanilla” JavaScript. Check out the You Might not Need jQuery<\/a> site to see a comparison. Learning vanilla JS is great, will help you do other things with JS and save your users downloading the jQuery library. <\/p>\n\n\n\n

However, it does involve writing more, and more complex code, and is a bit longer to learn at first. So we’re using jQuery as an entry point in this class. If you want a lighter weight (smaller filesize) version try the Zepto<\/a> library.<\/p>\n\n\n\n

To learn JavaScript more fully, try a combination of sites like Wes Bos’s Beginner JavaScript<\/a>, LinkedIn Learning JavaScript courses, YouTube videos and Stack Overflow<\/a> for questions. Learning to use these types of resources together will help throughout your career.<\/p>\n\n\n\n

About this Post<\/h2>\n\n\n\n

This page outlines jQuery code to write in a .js file. For more info on getting the jQuery library set up and ready to go see this jQuery Setup<\/a> post.<\/p>\n\n\n\n

Comments<\/h3>\n\n\n\n

Typing two slashes \/\/ tells JavaScript to ignore what comes after it on the line. This lets you add comments to your code to help document what it does. You’ll see those below.<\/p>\n\n\n\n

\/\/ this is a comment and is ignored by JS<\/code><\/pre>\n\n\n\n
When Your Code Runs<\/h2>\n\n\n\n
There are two basic times when code runs:<\/p>\n\n\n\n
    \n
  1. Immediately (or at least as soon as the html file loads).<\/li>\n\n\n\n
  2. When the user does something.<\/li>\n<\/ol>\n\n\n\n
    Immediately<\/h3>\n\n\n\n
    To run the code as soon as the document is ready, just put it inside the document ready function. Here is an example where all elements with the .accordion-item class are hidden on page load.<\/p>\n\n\n\n
    $(document).ready(function() {\n  \/\/ do stuff immediately when DOM is ready\n  $('.accordion-item').hide();\n});<\/code><\/pre>\n\n\n\n
    When the User Does Something<\/h3>\n\n\n\n
    When the user does something in the browser it’s called an event.<\/strong>To respond to the user doing something, like clicking a button, we use what is called an event handler. An event handler<\/strong> is a function(). In the example below we’re responding to the user clicking<\/strong> an element with the .accordion-header class.<\/p>\n\n\n\n
    .click()<\/a><\/p>\n\n\n\n
    $(document).ready(function() {\n  \/\/ run when they click the \n\/ \/\/.accordion-header element\n  $('.accordion-header').click(function() {\n    \/\/ write code here for what happens on click\n    return false;\n});<\/code><\/pre>\n\n\n\n
    Note, that when responding to clicks, the return false is there to prevent the page from reloading and scrolling back to the top.<\/p>\n\n\n\n
    There are other event handlers:<\/p>\n\n\n\n