jQuery Properties Reference

Last modified on: December 8, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">&nbsp;</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="1789221f-f20e-44f0-971a-69bdd8bbf0e5" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>jQuery Properties Reference: Understanding jQuery Object Properties and Methods</h3>
<p>In jQuery, properties and methods are used to interact with the DOM elements in a web page. Understanding the key properties and methods provided by jQuery is essential for effective DOM manipulation and AJAX handling. This guide covers the most commonly used jQuery properties, along with their usage and examples.</p>
<hr />
<h3><strong>jQuery Properties Overview</strong></h3>
<ol>
<li>
<p><strong><code>length</code></strong>:</p>
<ul>
<li><strong>Description</strong>: The number of elements matched by the jQuery selector.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>var count = $("div").length;
console.log(count); // Outputs the number of &lt;div&gt; elements
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>context</code></strong>:</p>
<ul>
<li><strong>Description</strong>: The context in which jQuery operates, typically used when working with nested selectors.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>var nestedElements = $("div", someOtherElement);
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li><strong>Explanation</strong>: The above code selects all <code>&lt;div&gt;</code> elements that are descendants of <code>someOtherElement</code>.</li>
</ul>
</li>
<li>
<p><strong><code>selector</code></strong>:</p>
<ul>
<li><strong>Description</strong>: A string containing the selector used to select elements.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>var nestedElements = $("div", someOtherElement);
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>prop()</code></strong>:</p>
<ul>
<li><strong>Description</strong>: Allows getting and setting properties for DOM elements.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>$("#myCheckbox").prop("checked", true);
var isChecked = $("#myCheckbox").prop("checked");
console.log(isChecked); // true or false
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>data()</code></strong>:</p>
<ul>
<li><strong>Description</strong>: Stores and retrieves custom data associated with DOM elements.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>$("#myElement").data("key", "value");
var value = $("#myElement").data("key");
console.log(value); // Outputs the stored data
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>css()</code></strong>:</p>
<ul>
<li><strong>Description</strong>: Retrieves or sets CSS properties of elements.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>$("#myElement").css("color", "red");
var color = $("#myElement").css("color");
console.log(color); // Outputs the current CSS color
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>attr()</code></strong>:</p>
<ul>
<li><strong>Description</strong>: Gets or sets the attributes of elements.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>$("#myElement").attr("title", "New Title");
var title = $("#myElement").attr("title");
console.log(title); // Outputs the title attribute value
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>html()</code></strong>:</p>
<ul>
<li><strong>Description</strong>: Gets or sets the HTML contents of elements.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>$("#myElement").html("&lt;strong&gt;New HTML&lt;/strong&gt;");
var content = $("#myElement").html();
console.log(content); // Outputs the HTML content
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>text()</code></strong>:</p>
<ul>
<li><strong>Description</strong>: Gets or sets the text content of elements.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>$("#myElement").text("New text content");
var text = $("#myElement").text();
console.log(text); // Outputs the text content
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>val()</code></strong>:</p>
<ul>
<li><strong>Description</strong>: Gets or sets the value of form elements like inputs, selects, and textarea.</li>
<li><strong>Usage</strong>:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>var value = $("#myInput").val();
console.log(value); // Outputs the value of the input
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ol>
<h3><strong>Practical Example</strong></h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>$(document).ready(function () {
    // Set an attribute
    $("#myElement").attr("data-custom", "customValue");

// Get the attribute
    var dataValue = $("#myElement").attr("data-custom");
    console.log(dataValue); // Outputs "customValue"

// Set a CSS property
    $("#myElement").css("color", "blue");

// Get the CSS property
    var color = $("#myElement").css("color");
    console.log(color); // Outputs "blue"

// Set HTML content
    $("#myElement").html("&lt;em&gt;New HTML content&lt;/em&gt;");

// Get the HTML content
    var htmlContent = $("#myElement").html();
    console.log(htmlContent); // Outputs "&lt;em&gt;New HTML content&lt;/em&gt;"
});
</code></pre>
</div>
</div>
</div>
</div>
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More