bhylu.com

Advertisements

jQuery API Reference

Use a practical decision map rather than memorizing an alphabetical list detached from behaviour.

Your brief

Ask what kind of work is needed. Selection returns a collection; traversal relates nodes; text and val read different content; prop reads live control state; on and off manage event ownership; effects manage presentation queues; Ajax manages an HTTP exchange. This reference fixture combines three small reads so the different result types remain visible. Follow the relevant course section for complete contracts, failure cases and working setups instead of treating a method name as a full solution.

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.

Worked solution

Show the worked solution
index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>jQuery Choose an API From the Kind of Work</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>
      <ul id="books">
        <li>River Paths</li>
      </ul>
      <label><input id="reminder" type="checkbox" checked />Bag reminder</label
      ><output></output>
    </main>
    <script src="jquery.min.js"></script>
    <script>
      jQuery(function ($) {
        $('output').text(
          'Rows: ' +
            $('#books').children('li').length +
            '; title: ' +
            $('#books li').text() +
            '; reminder: ' +
            $('#reminder').prop('checked'),
        );
      });
    </script>
  </body>
</html>

Expected result

The output separates a numeric collection count, text content and a boolean property.

jQuery properties such as length and fn.jquery are not all methods and do not take call parentheses. Use official API documentation for exact argument and return contracts, especially with deprecated or removed APIs. The full library, browser semantics and the server endpoint each own different responsibilities. A local reference map is navigation guidance, not a claim to reproduce every historical API entry.

Extend and test

Write a short maintenance note for an existing feature naming its root, data owner, event namespace, async resources and teardown operation.

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

Advertisements