In jQuery, the term properties usually refers to the attributes, methods, and events that can be applied to elements. These properties control the behavior and state of HTML elements, such as the position, size, style, or custom data attributes.

Here’s an overview of some common properties you’ll interact with in jQuery.

? 1. DOM Element Properties

These properties are related to the attributes of HTML elements. You can get or set the value of these attributes using jQuery.

? .attr() – Get or Set Attributes

Example:

javascript
// Get the 'href' attribute of a linkvar link = $("a").attr("href");// Set the 'href' attribute of a link$("a").attr("href", "https://www.newlink.com");

? 2. CSS Properties

jQuery allows you to manipulate CSS properties using the .css() method.

? .css() – Get or Set CSS Styles

Example:

javascript
// Get the color of an elementvar color = $("#myElement").css("color");// Set the color of an element$("#myElement").css("color", "blue");

Set multiple CSS properties:

javascript
$("#myElement").css({  "background-color": "yellow",  "font-size": "18px",  "border": "2px solid black"});

? 3. DOM Properties

You can also work with DOM properties (e.g., value of form inputs, visibility, etc.) using jQuery.

? .val() – Get or Set Form Input Value

javascript
// Get the value of an inputvar value = $("#myInput").val();// Set the value of an input$("#myInput").val("New value");

? .prop() – Get or Set DOM Properties

javascript
// Get the checked status of a checkboxvar isChecked = $("#myCheckbox").prop("checked");// Set the checked status of a checkbox$("#myCheckbox").prop("checked", true);

Some common DOM properties include:

• checked

• disabled

• selected

• readonly

? 4. Event Properties

Events in jQuery come with properties that help identify how and when an event occurred. For example, the mouse position, key pressed, etc.

? Example: Mouse Event Properties

javascript
$(document).mousemove(function(event) {  console.log("Mouse X: " + event.pageX);  console.log("Mouse Y: " + event.pageY);});

This code logs the position of the mouse when it moves over the document.

? 5. Data Properties

With jQuery, you can attach custom data to any element using .data().

? .data() – Attach Data to Elements

javascript
// Set custom data$("#myElement").data("name", "John");// Get custom datavar name = $("#myElement").data("name");

? 6. Width/Height Properties

You can get or set the width and height of an element using jQuery's .width(), .height(), .innerWidth(), .innerHeight(), .outerWidth(), .outerHeight() methods.

? .width() and .height()

javascript
// Get the width/height of an elementvar width = $("#myElement").width();var height = $("#myElement").height();// Set the width/height of an element$("#myElement").width(200);$("#myElement").height(100);

? .innerWidth() and .innerHeight()

Includes padding but excludes margin and border.

? .outerWidth() and .outerHeight()

Includes padding, border, and optionally margin.

? 7. Positioning Properties

You can use jQuery to get or set the position of an element on the page.

? .offset() – Get or Set the Offset

javascript
// Get the position of an element relative to the documentvar position = $("#myElement").offset();console.log(position.top, position.left);// Set the position of an element$("#myElement").offset({ top: 50, left: 100 });

? Summary