jQuery Fundamentals Part 3: Manipulation

This is the third part of a 5 part series on jQuery fundamentals. In this part, we will look at how to make changes and manipulate HTML element selections you've made in part 2 of this series. The next post will look at events in jQuery.

Introduction

Selection

Manipulation

Events

jQueryUI

Below is an example of a common jQuery statement. You are already familier with the first half of the statement, we will now take a more in depth look at what the second half of the statement means:

The following jQuery methods can be used both as get and set methods, depending on the parameter list when using the method. These methods include .attr, .text, html, and .value

Example - .attr():

/*

 * .attr as a get method takes the name of a attribute 

 * as its parameter. It returns the attribute value of the 

 * first matched HTML element.

 */

jQuery statement: $('div').attr('id')

HTML Page: <div id='divId'>some stuff inside the div</div>

Result returned by jQuery statement: “divId”

Example - .text()

/*

 * .text as a get method takes no parameters. It returns

 * the combined text of all matching HTML elements.

 */

jQuery statement: $('p').text()

HTML Page:

<p>first paragraph</p>

<p>second paragraph</p>

<p>third paragraph</p>

Result returnd by jQuery statement: “first paragraph second paragraph third paragraph”

Example - .html()

/*

 * .html as a get method takes no parameters. It returns

 * the HTML of the first matched HTML element

 */

jQuery statement: $('.yourDiv').html();

HTML Page:

<div class="yourDiv">
  <div>Stuff in a Div</div>

</div>

Result returned by jQuery statement: <div>Stuff in a Div</div>

Example - .val()

/*

 * .html as a get method takes no parameters. It returns

 * the HTML of the first matched HTML element

 */

jQuery statement: $('input').val();

HTML Page: <div input >

Result returned by jQuery statement: whatever the user has typed into the input field

The methods we have just covered can also be used as set methods. The following methods are the exact same methods we've just covered, the only difference being the modified parameter list, changing the behavior of the method from a returning a value to setting a value.

/*

 * .attr as a set method takes two parameters. The first 

 * parameters is the name of the attribute you want to set. 

 * The second parameter is The new value you would like 

 * to set that attribute to. In this example you are setting 

 * the ID attribute of all “&lt”;Div”&gt”; elements to 'newID'.

 */

.attr() Example - $('div').attr('id', 'newID')

/*

 * .text as a set method takes a string as its parameter.

 * In this example we are setting the text of all “&lt”;p”&gt”;

 * elements to “some new text”.

 */

.text() Example - $(“p”).text(“some new text”)

/*

 * .html as a set method takes the html markup as its 

 * parameter. In this example we are setting the text of all 

 * “&lt”;p”&gt”; elements to “some new text”.

 */

.html Example - $(“div”).html(“

a new paragraph
”)

/*

 * .val as a set method takes a string as its parameter.

 * In this example we are setting the text of an input field 

 * to, “new value”.

 */

.val() Example - $(“input”).val(“new value”)

These are most of the basic jQuery methods, its important to note however that there are many many more methods available in jQuery. For example .append(), .appendTo(), .after(), .before() are all very similar to .html() but with some small differenences to where the html is inserted relative to the selected HTML element. Please refer to the jQuery API for a complete reference