SH1804

jQuery Attributes and Content

I. Getting and Setting Attributes

A. Getting Attributes
 Attributes assigned to HTML elements (such as SRC, ID, and HREF, among others)
can be manipulated easily through jQuery.
 The attr() method is used to get any value of an existing HTML attribute.

B. Setting Attributes
 The attr() method can also be used to set values for attributes.
 This is written as part of the method syntax by specifying it as a second parameter.
 Any set value is encased in double quotes ("").

II. Removing Attributes

 As online content is never static, this fulfills the necessity of removing unnecessary
attributes for web pages.
 Involves the use of the removeAttr() method for removing element attributes.

III. Getting and Setting Content

A. Getting Content
 This basically involves changing the contents of specified element using jQuery.
 There are several methods in doing this:
o The html() method returns content of elements along with of its descendant tags.
o The text() method returns only the text content of elements, WITHOUT its
descendant tags.

B. Setting Content
 The same html() and text() methods can also be used to change HTML element content
with or without descendant tags, respectively.
 Content to be set is simply written as a parameter of the aforementioned methods.

IV. val()
 It is a separate jQuery method that can be used to get and set values from form controls,
such as textboxes, dropdowns, and other similar input.
 It is very useful when there is a need to handle form events and validation in a web page
or application.
 Particular emphasis must be given when setting values using val(): the value to be set for
the form control is provided as a parameter of the method.

V. Adding Content
 jQuery has methods that are used to add new content to a selected element without deleting
the existing content:
o append() inserts content at the end of any existing content within the selected elements.
o prepend() inserts content at the beginning of any existing the selected elements.
o after() inserts content after the selected elements as a separate, but similar content
element.

10 Handout 1 *Property of STI

 student.feedback@sti.edu Page 1 of 2
 SH1804

o before() inserts content before the selected elements as a separate, but similar content
element.

References
 SoloLearn. (n.d.). JavaScript tutorial. Retrieved on April 17, 2018 from
https://www.sololearn.com/Course/JavaScript/
 SoloLearn. (n.d.). jQuery tutorial. Retrieved on April 17, 2018 from
https://www.sololearn.com/Course/jQuery/

10 Handout 1 *Property of STI

 student.feedback@sti.edu Page 2 of 2