垦荒学园

English

简体中文

English

简体中文

Toggle theme

jQuery Basic Syntax and Selectors ​

After successfully including jQuery, we can start learning jQuery's basic syntax and selectors. jQuery's syntax is simple and clear, easy to learn and use.

jQuery Syntax Basics ​

1. jQuery Factory Function $ ​

The core of jQuery is the $ function (also called the jQuery function), which is jQuery's factory function used to select elements and create jQuery objects.

javascript
// Basic syntax
$(selector).action();
  • $: jQuery's factory function
  • selector: Selector used to select HTML elements
  • action(): Operation to perform on selected elements

2. Document Ready Function ​

Before manipulating DOM elements, you need to ensure the document is fully loaded. jQuery provides the document ready function for this:

javascript
// Full syntax
$(document).ready(function() {
    // Your code
});

// Shorthand form
$(function() {
    // Your code
});

// Using arrow function (ES6)
$(() => {
    // Your code
});

jQuery Selectors ​

jQuery selectors allow you to select and manipulate HTML elements. jQuery selectors are based on CSS selectors but are more powerful.

1. Basic Selectors ​

Element Selector ​

Select all HTML elements of a specified type:

javascript
// Select all div elements
$('div');

// Select all p elements
$('p');

// Select all input elements
$('input');

ID Selector ​

Select an element with a specified ID:

javascript
// Select element with id "myId"
$('#myId');

Class Selector ​

Select all elements with a specified class name:

javascript
// Select all elements with class "myClass"
$('.myClass');

Universal Selector ​

Select all elements:

javascript
// Select all elements
$('*');

2. Hierarchy Selectors ​

Descendant Selector ​

Select all descendants of a specified element:

javascript
// Select all p elements inside div
$('div p');

// Select all .item elements inside .container
$('.container .item');

Child Selector ​

Select direct children of a specified element:

javascript
// Select direct child p of div
$('div > p');

// Select direct child .item of .container
$('.container > .item');

Adjacent Sibling Selector ​

Select the element immediately following a specified element:

javascript
// Select p element immediately after h1
$('h1 + p');

// Select .content immediately after .header
$('.header + .content');

General Sibling Selector ​

Select all siblings after a specified element:

javascript
// Select all p elements after h1
$('h1 ~ p');

// Select all .content elements after .header
$('.header ~ .content');

3. Basic Filter Selectors ​

:first Selector ​

Select the first matched element:

javascript
// Select first p element
$('p:first');

// Select first .item element
$('.item:first');

:last Selector ​

Select the last matched element:

javascript
// Select last p element
$('p:last');

// Select last .item element
$('.item:last');

:even Selector ​

Select elements with even index (starting from 0):

javascript
// Select even-indexed tr elements
$('tr:even');

:odd Selector ​

Select elements with odd index (starting from 0):

javascript
// Select odd-indexed tr elements
$('tr:odd');

:eq(index) Selector ​

Select element with specified index:

javascript
// Select li element with index 2
$('li:eq(2)');

:gt(index) Selector ​

Select elements with index greater than specified value:

javascript
// Select li elements with index greater than 2
$('li:gt(2)');

:lt(index) Selector ​

Select elements with index less than specified value:

javascript
// Select li elements with index less than 2
$('li:lt(2)');

4. Content Filter Selectors ​

:contains(text) Selector ​

Select elements containing specified text:

javascript
// Select div elements containing "Hello" text
$('div:contains("Hello")');

:empty Selector ​

Select elements without child elements:

javascript
// Select empty td elements
$('td:empty');

:has(selector) Selector ​

Select elements containing specified child elements:

javascript
// Select div elements containing p elements
$('div:has(p)');

:parent Selector ​

Select elements that contain child elements:

javascript
// Select td elements that have children
$('td:parent');

5. Visibility Filter Selectors ​

:hidden Selector ​

Select hidden elements:

javascript
// Select hidden elements
$(':hidden');

:visible Selector ​

Select visible elements:

javascript
// Select visible elements
$(':visible');

6. Attribute Selectors ​

[attribute] Selector ​

Select elements with specified attribute:

javascript
// Select elements with title attribute
$('[title]');

// Select elements with href attribute
$('[href]');

[attribute=value] Selector ​

Select elements with attribute equal to specified value:

javascript
// Select input elements with type="text"
$('input[type="text"]');

// Select elements with class="button"
$('[class="button"]');

[attribute!=value] Selector ​

Select elements with attribute not equal to specified value:

javascript
// Select input elements with type not equal to "submit"
$('input[type!="submit"]');

[attribute^=value] Selector ​

Select elements with attribute starting with specified value:

javascript
// Select elements with href starting with "https"
$('[href^="https"]');

[attribute$=value] Selector ​

Select elements with attribute ending with specified value:

javascript
// Select elements with src ending with ".jpg"
$('[src$=".jpg"]');

[attribute*=value] Selector ​

Select elements with attribute containing specified value:

javascript
// Select elements with title containing "image"
$('[title*="image"]');

7. Child Element Filter Selectors ​

:first-child Selector ​

Select elements that are first child of their parent:

javascript
// Select li elements that are first child
$('li:first-child');

:last-child Selector ​

Select elements that are last child of their parent:

javascript
// Select li elements that are last child
$('li:last-child');

:nth-child(index) Selector ​

Select elements that are nth child of their parent:

javascript
// Select li elements that are second child
$('li:nth-child(2)');

// Select li elements at odd positions
$('li:nth-child(odd)');

// Select li elements at even positions
$('li:nth-child(even)');

8. Form Selectors ​

:input Selector ​

Select all input, textarea, select, and button elements:

javascript
// Select all form controls
$(':input');

:text Selector ​

Select input elements with type="text":

javascript
// Select text input boxes
$(':text');

:password Selector ​

Select input elements with type="password":

javascript
// Select password input boxes
$(':password');

:radio Selector ​

Select input elements with type="radio":

javascript
// Select radio buttons
$(':radio');

:checkbox Selector ​

Select input elements with type="checkbox":

javascript
// Select checkboxes
$(':checkbox');

:submit Selector ​

Select input elements with type="submit":

javascript
// Select submit buttons
$(':submit');

:enabled Selector ​

Select all enabled elements:

javascript
// Select all enabled input elements
$('input:enabled');

:disabled Selector ​

Select all disabled elements:

javascript
// Select all disabled input elements
$('input:disabled');

:selected Selector ​

Select all selected option elements:

javascript
// Select all selected option elements
$('option:selected');

:checked Selector ​

Select all checked radio and checkbox elements:

javascript
// Select all checked radio buttons and checkboxes
$(':checked');

jQuery Objects and DOM Objects ​

1. jQuery Object ​

Objects obtained through jQuery selectors are jQuery objects that can use jQuery methods:

javascript
// jQuery object
var $div = $('div');
$div.css('color', 'red'); // Use jQuery method

2. DOM Object ​

Objects obtained through native JavaScript are DOM objects that can only use native JavaScript methods:

javascript
// DOM object
var div = document.getElementsByTagName('div')[0];
div.style.color = 'red'; // Use native JavaScript method

3. Converting Between the Two ​

jQuery object to DOM object: ​

javascript
// Method 1: Through index
var $div = $('div');
var div = $div[0]; // Get first element

// Method 2: Using get() method
var div = $div.get(0); // Get first element

DOM object to jQuery object: ​

javascript
// Convert DOM object to jQuery object
var div = document.getElementById('myDiv');
var $div = $(div); // Convert to jQuery object

Complete Example ​

Here's a complete example demonstrating jQuery basic syntax and selectors:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Basic Syntax and Selectors Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight { background-color: yellow; }
        .hidden { display: none; }
        .container { border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <h1>jQuery Basic Syntax and Selectors Example</h1>
    
    <div class="container">
        <h2>Basic Selectors</h2>
        <p id="para1">This is a paragraph (ID: para1)</p>
        <p class="content">This is a paragraph (Class: content)</p>
        <p>This is another paragraph</p>
        <div>This is a div element</div>
    </div>
    
    <div class="container">
        <h2>Hierarchy Selectors</h2>
        <div class="parent">
            <p>Paragraph 1 in parent div</p>
            <p>Paragraph 2 in parent div</p>
            <span>Span in parent div</span>
        </div>
        <p>Paragraph at same level as parent div</p>
    </div>
    
    <div class="container">
        <h2>Filter Selectors</h2>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
            <li>List item 4</li>
            <li>List item 5</li>
        </ul>
    </div>
    
    <div class="container">
        <h2>Attribute Selectors</h2>
        <input type="text" name="username" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
        <input type="submit" value="Submit">
        <a href="https://www.example.com">External link</a>
        <a href="/local/page.html">Internal link</a>
    </div>
    
    <script>
        $(function() {
            // Basic selector examples
            $('#para1').css('color', 'red'); // ID selector
            $('.content').addClass('highlight'); // Class selector
            
            // Hierarchy selector examples
            $('.parent p').css('font-weight', 'bold'); // Descendant selector
            $('.parent > span').css('color', 'green'); // Child selector
            
            // Filter selector examples
            $('li:first').css('color', 'red'); // First element
            $('li:last').css('color', 'blue'); // Last element
            $('li:even').css('background-color', '#eee'); // Even elements
            $('li:odd').css('background-color', '#ddd'); // Odd elements
            
            // Attribute selector examples
            $('input[type="text"]').css('background-color', '#ffffcc');
            $('a[href^="https"]').css('color', 'purple');
            $('a[href$=".html"]').css('color', 'orange');
            
            // Form selector examples
            $(':text').css('width', '200px');
            $(':password').css('width', '200px');
            $(':submit').css('background-color', '#4CAF50');
        });
    </script>
</body>
</html>

Through this chapter, you should have mastered jQuery's basic syntax and selector usage. In the next chapter, we'll learn how to use jQuery for DOM manipulation.

Content is for learning and research only.

Copyright 2026 Kenhuang Academy. All Rights Reserved. About