Getting Started with jQuery: Core Concepts and Selectors

jQuery is a lightweight, cross-browser JavaScript library designed to simplify HTML document traversal, event handling, animation, and Ajax interactions. Its core philosophy is "Write less, do more." This article covers essential jQuery concepts and selector techniques.

jQuery Object

The jQuery object is a wrapper produced by wrapping a DOM element with jQuery. It provides access to jQuery-specific methods. For example, $("#i1").html() retrieves the HTML content of the element with id i1, which is equivalent to document.getElementById("i1").innerHTML. jQuery objects cannot use DOM methods, and DOM objects cannot use jQuery methods. To distinguish them, variable names for jQuery objects are conventionally prefixed with $:

var $variable = jQueryObject;
var variable = DOMObject;
$variable[0]; // Converts jQuery object to DOM object

Usage example:

$("#i1").html(); // jQuery method
$("#i1")[0].innerHTML; // DOM method

Basic Syntax

The general syntax is:

$(selector).action()

Selecting Elements by Selectors

Basic Selectors

ID selector: $("#id")
Tag selector: $("tagName")
Class selector: $(".className")
Combined: $("div.c1") (div with class c1), $('div#d1') (div with id d1)
All elements: $("*")
Group selector: $("#id, .className, tagName")

Hierarchy Selectors

Descendant: $('div span') (all <span> inside <div>)
Child: $('div > span') (direct children only)
Adjacent sibling: $('div + span') (next <span> immediately after <div>)
General sibling: $('div ~ span') (all <span> following <div>)

Basic Filters

:first – first element
:last – last element
:eq(index) – element at index
:even – eelments at even indices (0-based)
:odd – elements at odd indices
:gt(index) – elements with index greater than specified
:lt(index) – elements with index less than specified
:not(selector) – removes elements matching selector
:has(selector) – selects elements containing at least one descendant matching selector

Attribute Selectors

[attribute] – elements with attribute
[attribute=value] – attribute equals value
[attribute!=value] – attribute not equal to value

Example:

$("input[type='checkbox']"); // selects checkboxes
$("input[type!='text']"); // selects inputs not of type text

Form Selectors

Shorthand selectors for form elements:

:text, :password, :file, :radio, :checkbox
:submit, :reset, :button

Examples:

$(":checkbox"); // all checkboxes
$(":text"); // equivalent to $('input[type="text"]')

Form object properties:

:enabled – enabled form elements
:disabled – disabled form elements
:checked – checked checkboxes/radio buttons
:selected – selected <option> elements

Note that :checked includes both checked and selected, while :selected only targets <option> elements.

Filtering Methods

Once you have a jQuery object, you can traverse or filter:

Next elements: .next(), .nextAll(), .nextUntil(selector)
Previous elements: .prev(), .prevAll(), .prevUntil(selector)
Parent elements: .parent(), .parents(), .parentsUntil(selector)
Children and siblings: .children(), .siblings()
Find descendants: .find(selector) (equivalent to $(parent).find(selector))
Filter current set: .filter(selector) (e.g., .filter('.c1'))

Additional methods:

.first() – first element in set
.last() – last element in set
.not(selector) – remove elements matching selector
.has(selector) – retain elements containing given descendant
.eq(index) – element at index

Example: Custom Modal

Below is a jQuery implementation of a modal window with show/hide behavior:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Custom Modal</title>
  <style>
    .cover {
      position: fixed;
      left: 0; right: 0; top: 0; bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
      width: 600px; height: 400px;
      background-color: white;
      position: fixed;
      left: 50%; top: 50%;
      margin-left: -300px; margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="Show" id="showBtn">
<div class="cover hide"></div>
<div class="modal hide">
  <label for="name">Name</label>
  <input id="name" type="text">
  <label for="hobby">Hobby</label>
  <input id="hobby" type="text">
  <input type="button" id="closeBtn" value="Close">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  $('#showBtn').on('click', function() {
    $('.cover, .modal').removeClass('hide');
  });
  $('#closeBtn').on('click', function() {
    $('.cover, .modal').addClass('hide');
  });
</script>
</body>
</html>

Example: Left Menu Navigation

This example demonstrates toggling nested menu items with jQuery chaining:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Left Menu</title>
  <style>
    .left { position: fixed; left: 0; top: 0; width: 20%; height: 100%; background-color: #2f353d; }
    .right { width: 80%; height: 100%; }
    .menu { color: white; }
    .title { text-align: center; padding: 10px 15px; border-bottom: 1px solid #23282e; }
    .items { background-color: #181c20; }
    .item { padding: 5px 10px; border-bottom: 1px solid #23282e; }
    .hide { display: none; }
  </style>
</head>
<body>
<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">Menu 1</div>
      <div class="items">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
      </div>
    </div>
    <div class="item">
      <div class="title">Menu 2</div>
      <div class="items hide">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
      </div>
    </div>
    <div class="item">
      <div class="title">Menu 3</div>
      <div class="items hide">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
      </div>
    </div>
  </div>
</div>
<div class="right"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  $('.title').click(function() {
    $(this).next().removeClass('hide')
           .parent().siblings().find('.items').addClass('hide');
  });
</script>
</body>
</html>

Tags: jquery javascript DOM selectors web development

Posted on Thu, 06 Aug 2026 16:08:53 +0000 by fangorn

Freaks City