jQuery

"jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers." (jquery.com)

jQuery Learning Center: learn.jquery.com

Selecting elements

              const $button = $( '#my-id' );
              const $image = $( 'ul li:first-child' )
              const $allParagraphs = $( 'p' )
              const $allContainers = $( '.container' )
            

jQuery Learning Center: Selecting Elements

Manipulating elements

              $image.attr('src', 'other-image.png');
              $allParagraphs.text('This is now all gone!');
              $allContainers.css('border', '1px dotted gray');

              function toggleContainers() {
                // see also .show() and .hide()
                $('.container').toggle()
              }
              $button.on('click', toggleContainers);

              // as jQuery object methods return the object itself, we can even
              // chain different operations together
              $( 'article' ).find( 'li' ).eq( 9 ).text( "don't make lists too long!" );
            

jQuery Learning Center: Working with Selections

jQuery Learning Center: Manipulating Elements

Creating new elements

              $myNewElement = $( '
And a new chapter shall begin!
' )

              // now get some other element and append the new one to it
              $('article.story').append($myNewElement)

              // or append the element to some other element's content
              $myNewElement.appendTo( $('article.story') )
            

And so much more ...

https://api.jquery.com/

Including jQuery

Either load it through a CDN like code.jquery.com or go to jquery.com/download, and put the version you want to use into your project assets.

              <!-- through a CDN: -->
              <script
              src="https://code.jquery.com/jquery-3.6.1.min.js"
              integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
              crossorigin="anonymous"></script>
  
              <!-- as a project asset -->
              <script src="assets/jquery-3.6.1.min.js">
            

jQuery : document ready?

              $( document ).ready(function() {
                // initialise app
              });
  
              // $() is a shorthand for $(document).ready()
              // if you want to be nice use the upper version
              $(() => {
                // initialise app
              })
            

More on app initialisation with jQuery: $( document ).ready()

jQuery example page