jQuery Get

jQuery - Getting Content and Attributes

jQuery simplifies accessing information stored within HTML elements, such as their text content, inner HTML structure, form field values, and attribute values.

Understanding DOM Manipulation

Manipulating the Document Object Model (DOM) is a core strength of jQuery. The DOM is the browser’s internal representation of an HTML page, structured like a tree.

| | What is the DOM? DOM stands for Document Object Model. It’s a programming interface for HTML and XML documents. It represents the page structure as a tree of objects, allowing programs (like JavaScript and jQuery) to dynamically access and update the content, structure, and style of a document. | | --- | --- |

jQuery provides concise methods to navigate this tree and interact with its elements, including retrieving data.

Getting Content: text(), html(), and val()

Three fundamental methods for retrieving content are:

• text(): Returns the combined text content of all matched elements, excluding any HTML tags. Think of it as getting the ‘visible’ text.
• html(): Returns the HTML content (innerHTML) of the first matched element, including any HTML tags.
• val(): Returns the current value of the first matched element, typically used for form elements like <input>, <textarea>, and <select>.

Example: Getting Text and HTML Content

// HTML: <div id='contentDiv'><p>This is a **paragraph**.</p></div>

$(() => {
  $('#getTextButton').on('click', () => {
    // Gets: "This is a paragraph."
    const textContent = $('#contentDiv').text();
    alert('Text Content: ' + textContent);
  });

  $('#getHtmlButton').on('click', () => {
    // Gets: "<p>This is a **paragraph**.</p>"
    const htmlContent = $('#contentDiv').html();
    alert('HTML Content: ' + htmlContent);
  });
});

Example: Getting Input Field Value

// HTML: <input type="text" id="nameInput" value="Default Name">

$(() => {
  $('#getValueButton').on('click', () => {
    // Gets the current text entered in the input field
    const inputValue = $('#nameInput').val();
    alert('Input Value: ' + inputValue);
  });
});

Getting Attributes: attr() and prop()

jQuery provides methods to read the values of element attributes (like href, src, id, class) and properties (like checked, disabled, selectedIndex).

attr(): Used to get the value of HTML attributes. It retrieves the value as defined in the HTML.

Example: Getting the href attribute of a link

// HTML: <a id="myLink" href="https://jquery.com" target="_blank">jQuery Website</a>

$(() => {
  $('#getHrefButton').on('click', () => {
    const linkUrl = $('#myLink').attr('href');
    alert('Link Href: ' + linkUrl); // Shows: https://jquery.com

    const linkTarget = $('#myLink').attr('target');
    alert('Link Target: ' + linkTarget); // Shows: _blank
  });
});

prop(): Used to get the value of DOM properties. This is particularly important for boolean attributes/properties like checked, selected, or disabled. prop() reflects the current state of the element.

Example: Checking if a checkbox is checked

// HTML: <input type="checkbox" id="agreeCheckbox" checked> Agree to terms

$(() => {
  $('#getCheckedStateButton').on('click', () => {
    // Use prop() for boolean states
    const isChecked = $('#agreeCheckbox').prop('checked');
    alert('Is checkbox checked? ' + isChecked); // Shows: true (or false if unchecked)

    // Using attr('checked') here might be unreliable across browsers/versions
    // const attrChecked = $('#agreeCheckbox').attr('checked');
    // console.log('Attribute checked:', attrChecked); // Might show "checked" or undefined, not ideal for state
  });
});

Key Difference: Use attr() for attributes defined in HTML (like id, class, href, src). Use prop() for properties reflecting the current state, especially boolean ones (checked, disabled, selected, readOnly).

The next chapter will cover how to set or change content and attributes using methods like text(), html(), val(), attr(), and prop().

jQuery HTML/CSS Reference

For a complete guide to all jQuery methods for DOM manipulation and CSS interaction, consult the official jQuery documentation.