DOM Manipulation ​

jQuery's selectors are powerful, simple, and flexible. But after obtaining a jQuery object, what can we actually do with it?

The answer is to manipulate the corresponding DOM nodes!

With jQuery, modifying CSS, text, and HTML becomes straightforward, and you don't need to worry about browser differences.

Modifying Text and HTML ​

The text() and html() methods of jQuery objects allow you to get the text content and raw HTML of nodes. For example, consider the following HTML structure:

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>

To get the text and HTML:

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'

To set the text or HTML, simply call text() or html() with parameters:

let j1 = $('#test-ul li.js');
let j2 = $('#test-ul li[name=book]');

j1.html('<span style="color: #c00">JavaScript</span>');
j2.text('JavaScript & ECMAScript');

If you set the text for multiple elements at once:

$('#test-ul li').text('JS'); // Both nodes change to JS

This shows that jQuery methods operate on all matched DOM nodes without error, even if no nodes are found:

$('#not-exist').text('Hello'); // No error, no nodes set to 'Hello'

Modifying CSS ​

jQuery's ability to handle "bulk operations" makes CSS modifications easy. Consider the following HTML structure:

<ul id="test-css">
    <li class="lang dy"><span>JavaScript</span></li>
    <li class="lang"><span>Java</span></li>
    <li class="lang dy"><span>Python</span></li>
    <li class="lang"><span>Swift</span></li>
    <li class="lang dy"><span>Scheme</span></li>
</ul>

To highlight dynamic languages, you can use:

$('#test-css li.dy>span').css('background-color', '#ff0').css('color', '#c00');

Note that all jQuery methods return a jQuery object, allowing for chainable calls:

let div = $('#test-div');
div.css('color'); // Get CSS property
div.css('color', '#336699'); // Set CSS property
div.css('color', ''); // Clear CSS property

You can use both 'background-color' and 'backgroundColor' formats for CSS properties.

To manipulate class attributes, jQuery provides:

let div = $('#test-div');
div.hasClass('highlight'); // Check if class contains highlight
div.addClass('highlight'); // Add highlight class
div.removeClass('highlight'); // Remove highlight class

Practice: Highlighting JavaScript ​

Using both css() and addClass() to highlight JavaScript:

<style>
.highlight {
    color: #c00;
    background-color: #ff0;
}
</style>

<div id="test-highlight-css">
    <ul>
        <li class="py"><span>Python</span></li>
        <li class="js"><span>JavaScript</span></li>
        <li class="sw"><span>Swift</span></li>
        <li class="hk"><span>Haskell</span></li>
    </ul>
</div>

let div = $('#test-highlight-css');
// TODO: Highlight JavaScript

Showing and Hiding DOM ​

To hide a DOM element, you can set the CSS display property to none. However, to show the element again, you need to remember the original display value.

To simplify this, jQuery provides show() and hide() methods:

let a = $('a[target=_blank]');
a.hide(); // Hide
a.show(); // Show

Hiding a DOM node does not change the structure of the DOM tree; it only affects visibility.

Getting DOM Information ​

You can easily retrieve dimensions of the DOM using jQuery:

// Browser viewport size:
$(window).width(); // 800
$(window).height(); // 600

// HTML document size:
$(document).width(); // 800
$(document).height(); // 3500

// Size of a specific div:
let div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // Set CSS property width: 400px
div.height('200px'); // Set CSS property height: 200px

Attributes and Properties ​

You can manipulate DOM attributes using attr() and removeAttr():

let div = $('#test-div');
div.attr('data'); // undefined, attribute does not exist
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // Change name attribute to 'Hello'
div.removeAttr('name'); // Remove name attribute
div.attr('name'); // undefined

The prop() method is similar to attr(), but it handles boolean attributes like checked differently:

let radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true

Using is() is often a better choice for boolean attributes:

let radio = $('#test-radio');
radio.is(':checked'); // true

Form Operations ​

For form elements, jQuery provides the val() method to get and set the corresponding value attribute:

let input = $('#test-input'),
    select = $('#test-select'),
    textarea = $('#test-textarea');

input.val(); // 'test'
input.val('abc@example.com'); // Change input to 'abc@example.com'

select.val(); // 'BJ'
select.val('SH'); // Change select to Shanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // Change textarea to 'Hi'

With val(), you can easily manage input values across different input types.