Resources

Get jQuery
Download jquery-3.4.1.min.js file: jquery.zip
Download jQuery 3.4.1 from jquery.com (Note: jQuery version 3.5.0 caused problems with the mobile menu of the Bootstrap nav-bar. Avoid that version. Version 3.5.1 is now available, but has not been tested for this problem.

jQuery CDN
jQuery can be downloaded using a CDN if you prefer:
Instructions for using jQuery with a CDN: jQuery CDN instructions.
jQuery's CDN links: jQuery CDN Links Page (code.jquery.com)
jQuery CDN links are also found here: jQuery CDN Page (cdnjs.com)

Package Managers
The JAMS will not deal with implementing package managers, but if you are interested in working with Composer, information about using jQuery with Composer can be found here: The Packagist jQuery components.
If you need to know more about using the The Packagist, see this: Getting Started with The Packageist
The Composer Page is here: Get Composer Page
Information about using Composer with CodeIgniter is here: CodeIgniter 3 Documentation: Auto-loading Resources

jQuery Setup. Add this file to your site's js folder:

  • jquery-3.4.1.min.js

Note: If you have a version update or other variation that changes the file name, that's OK as long as you make sure the link for loading the file works.

Link to the files in the "<head>" section of your HTML document. 

 <DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
            <title>Full Stack Amp Jam Site Project</title>
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <link href="css/your_custom.css" rel="stylesheet">
    
            <script src="js/jquery-3.4.1.min.js" type="application/javascript"></script>
            <script src="js/bootstrap.min.js" type="application/javascript"></script>
            <script src="js/bootstrap.min.js.map" type="application/javascript"></script>
            <script src="js/your_custom.js" type="application/javascript"></script>            
        </head>

The sequence of the links is important. Be sure jQuery is the first JS script, followed by the Bootstrap files, then any custom JS.

What is jQuery? jQuery is a Javascript library that makes difficult Javascript tasks simple - and it does it in a cross-browser safe way. The library is extensive, and it has been built on by many other projects, including Bootstrap. If you aren't using jQuery, you should be. The foundational concept behind jQuery is the CSS selector. By passing an element (or set of elements) to jQuery, all sorts of processes can be run on them. The shortcut symbol for jQuery is usually the "$" symbol, and the structure of a jQuery call is generally the selector followed by chaining some number of jQuery functions together. It looks like this: 

$("#my_div_id").css("background-color", "red");
The function (in this case, the css function setting the background-color property red) would be run on the "#my_div_id" element, but if the selector had been a class, all elements with that class assigned would be set to "red".

Some jQuery functions are simply Javascript shorthand, while others cover the gamut from animation to AJAX. The list is much too long to learn. Your best resource is the massive user base which covers everything you will ever need to know in StackOverflow. If StackOverflow doesn't have your answer, you are probably asking the wrong question.

How to best use jQuery. The starting place for using jQuery is usually with the page load process. jQuery's $(document).ready() function runs earlier than the Javascript "window.onLoad()" function, and is a good place to put functions you want to run when the page first loads. This usually includes any updates/customization for the page elements, initializing JS plug-ins, and attaching event listeners (mouseovers, onclicks, etc.). For example, forms that use AJAX to submit data will generally have "submit" handlers defined in the $(document).ready() function. You can see an example of using $(document).ready() here.

The way you use jQuery will follow the functionality needs of the site you build.

  • Respond or listen to DOM and window events, such as $(document).ready().
  • Animation functions will usually be attached to event listeners. jQuery has a very simple way of attaching and removing event listener handlers with the "on()" and "off()" functions. Events such as "mouseover", "keypress", "click", etc. can be used to trigger animation or other functions.
  • All sorts of page element manipulation is possible with functions that add or remove classes such as, addClass() and removeClass(), set CSS properties directly (css()), and set (or append) text, HTML, and element attributes such as text(), html(), append(), attr(), etc.
  • You can iterate through sets of elements with the each() function, applying a function to each element.
  • AJAX, POST, and GET operations are done with specialized objects and shorthand functions (ajax(), get(), post(), etc.). These include AJAX callback functions that provide asynchronous interaction with the server. It is possible to redraw page sections or even the entire page with data returned from the server after an AJAX call.

There is much, much more. You can see the entire jQuery API here.

From a practical standpoint, beyond general familiarization with the jQuery functions and features, the pragmatic approach is to use search engines to learn how to do what you need to do. A good search result will almost always include StackOverflow, where people who have already encountered your problem have asked your question, and experienced coders will show you exactly how to accomplish the task you need to do.