• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Working with DOM Attributes using jQuery

February 26, 2013 //  by Ganesh Prakhya//  Leave a Comment

In the previous article we learned about manipulating CSS class using jQuery. In this article, we discuss about dealing with DOM attributes using jQuery. jQuery provides flexible methods to get or set DOM attributes and values of the matched elements, and to get or set property values of the matched elements and also to get or set matched element’s HTML content. We can also remove an attribute or a property using these methods. The following is the summary of jQuery methods we can use to manipulate DOM attributes or properties dynamically to a achieve variety of functionality.

  • Buy: jQuery in Action

also read:

  • Introduction to jQuery
  • jQuery Ajax Introduction
  • Refreshing DIV Content with jQuery

DOM Attributes using jQuery

The following are the methods jQuery supports to work with DOM Attributes. A working example and output screen capture is provided for each of the methods. The following code snippet reads and sets the attribute values.

[java] <html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log("div id is: " + $("#mainDiv").attr("id"));
console.log("strong text title is: " + $("strong").attr("title"));

$("#updateAttr").click(function(){
$("strong").attr("title","UPDATED TITLE");
});
});
</script>
</head>
<body>
<h1>.attr() Demo</h1>
<div id="mainDiv">
<strong title="Title for strong text.">
This text is inside mainDiv.
</strong><br/>
<input type="button" id="updateAttr" value="Update"/>
</div>
</body>
</html>
[/java]

The following screen describes how we can read element’s attributes.
dom-attributes-get-attr

Once we click on the Update button, the title of the strong text has been updated. Please see the following screen capture for the updated title.

dom-attributes-set-attr

.attr()

The .attr() method either gets or sets the value of the attribute from the matched elements.

[java] $("strong").attr("title")
$("strong").attr("title", "Updated Title")
[/java]

.removeAttr()

The .removeAttr() method removes the attribute from the matched elements.

[java] $("strong").removeAttr("title");
[/java]

.prop()

The .prop() method gets or sets the value of the property from the matched elements.

[java] $(“#myChkBox”).prop("checked")
$(“#myChkBox”).prop("checked",”true”)
[/java]

.removeProp()

The .removeProp() method removes the property from the matched elements.

[java] $("#myChkBox").removeProp("checked");
[/java]

.html()

The .html() method gets or sets HTML content of the matched elements.

[java] $("#mainDiv").html();
$("#mainDiv").html("&lt;h1&gt;Heading1&lt;/h1&gt;");
[/java]

.val()

The .val() method gets or sets the value of the matched elements.

[java] $("#myTextInput").val()
$("#myTextInput").val(‘New value’)
[/java]
  • Buy: jQuery in Action

The DOM manipulation method .attr() is very useful to read or to dynamically set the attributes along with values. Also .prop() method is useful to deal with properties. For instance, using .prop() method we can verify the checked property of checkbox. We use .removeAttr() and .removeProp() methods to remove attributes and properties respectively. The .html() method is flexible in either getting or setting full HTML content of the matched elements. The .html() is particularly useful in setting HTML content from AJAX response. Lastly, the .val() method is used to get or set the value of matched element, for instance we can either read or set the text input value.

also read:

  • Introduction to jQuery
  • jQuery Ajax Introduction
  • Refreshing DIV Content with jQuery

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

Category: jQueryTag: jQuery

About Ganesh Prakhya

Previous Post: « Creating Simple Web Application Using Apache Maven
Next Post: jQuery Effects – Hide, Show and Toggle jquery»

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

np.zeros

A Complete Guide To NumPy Functions in Python For Beginners

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact