AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery Attributes


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

jQuery Tutorial » jQuery Attributes

What are jQuery attributes?

jQuery attribute methods allows you to manipulate attributes and properties of elements. We use selector to get the reference of an element and then call jQuery attribute methods to edit it. A few important DOM manipulation methods as: html(), text(), attr(), val(), prop(), etc.

Some more common properties are −

Making more understandable.

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass"
title = "This is an image"/>

We have: tag name is img, and the markup for id, src, alt, class, and title represents the element's attributes, each of which consists of a name and a value.

jQuery gives us the means to easily manipulate the attributes of an element and gives us access to the element so that we can change its properties as well.

 

Get Attribute Value - Example

The next example will fetches title attribute of <em> tag and set <div id = "divid"> value with the same value −

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
var title = $("em").attr("title");
$("#divid").text(title);
});
</script>
</head>

<body>
<div>
<em title = "Bold and Brave">This is first paragraph.</em>
<p id = "myid">This is second paragraph.</p>
<div id = "divid"></div>
</div>
</body>
</html>

output

The result −

This is first paragraph.

This is second paragraph.

Bold and Brave

 

Related subjects:
jQuery Introduction jQuery syntax jQuery selectors

 

Tags: jquery attribute selector, value, contains, change, value selector, starts with, exists, not equal, ends with, value get
What are jQuery attributes?
What is $() in jQuery?
How do I add attributes in JQ?
How do you check if an element has an attribute in jQuery?

 

Set Attribute Value

The attr(name, value) method can be used to set the named attribute onto all elements in the wrapped set using the passed value. For example:

<html>
<head>
<title>The jQuery Example</title>
<base href="https://www.agernic.com" />
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#myimg").attr("src", "/uploads/learn-jquery.jpg");
});
</script>
</head>

<body>
<div>
<img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
</div>
</body>
</html>

In the example above, the $(document).ready() is an event that is used to manipulate a page safely with the jQuery.

 

Applying Styles Example

The next example sets class attribute of <span> tag −

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("em").addClass("em_selected");
$("#myid").addClass("span_class");
});
</script>

<style>
.em_selected { color:silver; }
.span_class { background:aqua; }
</style>
</head>

<body>
<em title = "Bold and Brave">This is first paragraph.</em>
<p> Paragraph start - <span id = "myid">This is second paragraph. background:aqua;</span> - end span</p>
<p>This is an untouched paragraph.</p>
</body>
</html>

 



jquery attribute selector, value, contains, change, value selector, starts with, exists, not equal, ends with, value get
What are jQuery attributes?
What is $() in jQuery?
How do I add attributes in JQ?
How do you check if an element has an attribute in jQuery?

JQuery Attributes - jquery

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...