jQuery Introduction | Selecting Elements | Accessing Selected Elements (Getter, Setter)

Getter and Setter Methods

To read or set the value of an element selected by a selector, you can access that element through jQuery methods.

A getter method accesses a selected element and reads its value. Getter methods are called without passing any arguments.

A setter method accesses a selected element and sets its value. Setter methods are called by passing the value to assign as an argument.

The following example accesses an <h1> element, reads its value, and then sets the value of the element whose ID is "text" to that value.

var newText = $("#hello").html();
$("#newText").html(newText);

Run code

In the first line of the example above, the .html() method is called without arguments, so it is used as a getter method that reads the value from the HTML element. In contrast, the .html() method call on the second line has an argument, so it is used as a setter method that sets a new sentence on the HTML element.

Representative Getter and Setter Methods

Representative getter and setter methods that let you access elements and read or set their values are as follows.

Method Chaining

A getter method reads the value of the selected element and returns that value. If multiple elements are selected, a getter method returns only the value of the first element.

A setter method, however, sets the value passed as an argument on all selected elements. It then returns another jQuery object that can access all selected elements.

Using the returned jQuery object, you can call another jQuery method immediately without using a semicolon (;) after each method call. Calling multiple methods consecutively in this way is called method chaining.

The following example calls .find(), .eq(), and .append() consecutively on selected elements.

$("ul").find("li").eq(1).append(" - Recommended menu.");

It finds <li> elements inside a <ul> element and adds a string to the element whose index is 1.

<ul>
  <li>Espresso</li>
  <li>Americano</li>
  <li>Caffe latte</li>
</ul>

Run code

The .eq() method selects the element that corresponds to the specified index among the selected elements.

If you use the .end() method during method chaining, you can reselect the set of elements selected immediately before.

$("ul").find("li").eq(1).append(" - Recommended menu.")
  .end().eq(2).append(" - Recommended menu.");

It finds <li> elements inside a <ul> element, adds a string to the element whose index is 1, then uses .end() to return to the state before the append() method, selects the element whose index is 2, and adds a string.

Run code

.width() and .height() Methods

jQuery provides the .width() and .height() methods to return (getter) or set (setter) the width and height of selected elements.

// setter
$("img").width(300);
$("img").height(300);

// getter
var imgWidth = $("img").width();
var imgHeight = $("img").height();
$("p").html("Width: " + imgWidth + ", height: " + imgHeight);

Run code

In the example above, the first .width() and .height() method calls are used as setter methods by passing arguments to set the width and height values. The second .width() and .height() method calls are used as getter methods.

.attr() Method

The .attr() method is used to return or set a specific attribute value of a selected element.

// setter
$("img").attr("width", "300");

// getter
var imgWidth = $("img").attr("width");
$("p").html("Changed image width: " + imgWidth);

Run code

In the example above, the first .attr() method call passes two arguments and is used as a setter method that sets the attribute value named by the first argument to the value passed as the second argument. The second .attr() method call passes only one argument and is used as a getter method that reads the value of the attribute named by the argument from the HTML element.