
Set in Jquery
In jQuery, the concept of setting typically refers to changing or assigning values to properties, attributes, or content of elements. jQuery provides various methods for setting values on HTML elements, such as modifying their attributes, text, CSS properties, and more.
Here’s an overview of set operations in jQuery:
? 1. Setting Text and HTML Content
? .text()
Used to set the text content of an element.
// Set the HTML content of an element$("#myElement").html("<strong>Bold Text</strong>");
? 2. Setting Attributes
? .attr()
Used to set the value of an attribute on an element.
// Set the 'href' attribute of a link$("a").attr("href", "https://www.example.com");
You can also set multiple attributes at once by passing an object:
$("a").attr({ "href": "https://www.example.com", "target": "_blank"});
? 3. Setting CSS Styles
? .css()
Used to set the CSS styles of an element. You can set individual CSS properties or multiple properties at once.
// Set the background color of an element$("#myElement").css("background-color", "blue");// Set multiple CSS properties$("#myElement").css({ "background-color": "blue", "font-size": "20px", "color": "white"});
? 4. Setting Form Values
? .val()
Used to set the value of form elements, like input fields, selects, and textareas.
// Set the value of an input field$("#myInput").val("New input value");// Set the value of a select dropdown$("#mySelect").val("Option 2");
? 5. Setting Data
? .data()
Used to set custom data on an element. This can be helpful for storing extra information that is associated with a DOM element.
// Set custom data$("#myElement").data("username", "JohnDoe");// Retrieve custom datavar username = $("#myElement").data("username");
? 6. Setting Properties
? .prop()
Used to set properties of DOM elements. Properties are different from attributes (e.g., checked
, disabled
, etc.).
// Set the checked property of a checkbox$("#myCheckbox").prop("checked", true);// Set the disabled property of a button$("#myButton").prop("disabled", true);
? 7. Setting Classes
? .addClass()
Used to add a class to an element.
$("#myElement").addClass("active");
? .removeClass()
Used to remove a class from an element.
$("#myElement").removeClass("active");
? .toggleClass()
Used to toggle a class (add it if it doesn’t exist, remove it if it does).
$("#myElement").toggleClass("active");
? Summary of Set Methods in jQuery
Method | Description |
---|---|
.text() | Set the text content of an element |
.html() | Set the HTML content of an element |
.attr() | Set the attributes of an element |
.css() | Set CSS styles of an element |
.val() | Set the value of form elements |
.data() | Set custom data on an element |
.prop() | Set DOM properties of an element |
.addClass() | Add a class to an element |
.removeClass() | Remove a class from an element |
.toggleClass() | Toggle a class on an element |
? Example: Setting Multiple Properties
<div "#changeBtn").click(function() { $("#myDiv") .text("New Text!") .css({ "background-color": "yellow", "font-size": "20px" }) .addClass("active") .data("info", "This is custom data"); });</script>
In this example:
The text of
#myDiv
is updated.The background color and font size are changed.
The class "active" is added.
Custom data is set on the element.