bhylu.com

Advertisements

jQuery Version Migration

Treat migration as a behaviour review tied to the actual supported library and browser baseline.

How it works

This course targets jQuery 4.0.0. Existing 1.x, 2.x or 3.x sites can contain removed APIs, event shortcuts and plugin assumptions that need a staged migration. Read the official upgrade guide and use the matching migration tooling in a controlled development environment when appropriate. This fixture uses on, prop and explicit class toggling rather than teaching obsolete shortcuts as new defaults. A version string alone does not prove compatibility.

Run in a separate local browser lab

Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.

Open index.html directly in a normal browser. You may also use the optional loopback fixture server with Node 22 if you want the same HTTP setup as the network lessons.

jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.

Example

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>jQuery Review Removed APIs Before Replacing a Version File</title>
    <style>
      :root {
        font:
          18px/1.6 system-ui,
          sans-serif;
        color: #16304e;
        background: #fff;
        color-scheme: light;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
      }
      main {
        max-width: 50rem;
        margin: auto;
        padding: 1.25rem;
      }
      h1 {
        font-size: 1.8rem;
        line-height: 1.2;
      }
      h2 {
        font-size: 1.3rem;
      }
      button,
      input,
      select,
      textarea {
        font: inherit;
        max-width: 100%;
      }
      button {
        margin: 0.2rem;
        padding: 0.4rem 0.7rem;
        background: #034fa0;
        color: white;
        border: 1px solid #034fa0;
        border-radius: 0.3rem;
      }
      button:disabled {
        opacity: 0.6;
      }
      label {
        display: block;
        margin: 0.5rem 0;
      }
      input:not([type='checkbox']),
      select,
      textarea {
        display: block;
        padding: 0.3rem;
      }
      a {
        color: #034fa0;
      }
      output {
        display: block;
      }
      article,
      section,
      fieldset {
        padding: 0.75rem;
        margin-block: 0.75rem;
        border: 1px solid #a9bcd1;
      }
      ul {
        padding-left: 1.5rem;
      }
      :focus-visible {
        outline: 3px solid #0078d4;
        outline-offset: 3px;
      }
      .chosen {
        border: 3px solid #0078d4;
      }
      .highlight {
        font-weight: 700;
      }
      .muted {
        opacity: 0.7;
      }
      pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      :root[data-theme='dark'] {
        color: #d6e7fb;
        background: #061d30;
        color-scheme: dark;
      }
      :root[data-theme='dark'] a {
        color: #8ecbff;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Neighbourhood book swap</h1>
      <label><input id="check" type="checkbox" />Review the local flow</label
      ><output>Review pending</output>
    </main>
    <script src="jquery.min.js"></script>
    <script>
      jQuery(function ($) {
        $('#check').on('change.upgrade', function () {
          const checked = $(this).prop('checked');
          $('output')
            .toggleClass('highlight', checked)
            .text(checked ? 'Local flow reviewed' : 'Review pending');
        });
      });
    </script>
  </body>
</html>

Expected result

The current checkbox and class behaviour works on the pinned full build.

Review plugins, Ajax parsing, boolean attributes, focus behaviour and effects completion when upgrading. The course tests this one baseline; it does not promise old browser support or compatibility with every third-party plugin. Keep a lockfile or recorded asset hash and a rollback path for the deployment. A migration warning should be understood and addressed rather than globally hidden.

Use jQuery’s official API documentation for exact method and return contracts.

Advertisements