Webdesign Advanced

# jQuery introduction

# What is jQuery?

  • jQuery is a lightweight JavaScript API/library
  • "Write less, do more": with jQuery, you can write a lot of common tasks that require many lines of native (also called: vanilla) JavaScript code into a single line of jQuery code
  • The jQuery library contains the following features:
    • DOM manipulation
    • Event handlers
    • Basic effects and advanced animations
    • AJAX requests
  • For almost every task you can imagine, there is a jQuery plugin available (form validation, image galleries, ...)
  • You can find more information about jQuery at the official jQuery website (opens new window)

jQuery website

# Is jQuery still relevant?

  • jQuery's relevance is a topic of debate among web developers, as
    • Javascript has become more mature as a language
    • modern browsers like Chrome and Firefox correctly/consistently implemented JavaScript (in contrast to Internet Explorer)
    • modern & advanced JavaScript frameworks (AngularJS, React, Vue) became increasingly popular
  • On the other hand, jQuery is still used

# How to use jQuery?

  • Add a <script> tag referring to the jQuery library just before the closing </body> tag. The src attribute of this <script> tag may refer to
    • a CDN link to the latest jQuery library
      • <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> or
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      • Examples: Bootstrap course page, Expect More Food exercise
    • a locally stored version of the latest jQuery library (copied in the Gulp task 'copy-js' from the node_modules folder, in which jQuery is installed as a devDependency using npm)
      • <script src=".../jquery.min.js"></script>
      • Examples: Bootstrap-Sass example, repo of the group project, repo with the ES6/jQuery examples and exercises

READING TIPS

Last Updated: 5/6/2021, 5:05:24 PM