JQuery Attributes

Jquery attributes contributes to the popularity of jquery.THhe jquery get attributes, data attributes and css attributes are the most common Jquery attributes that is being used.For manipulating JQuery elements we are using DOM (Document Object Model) node properties. Manipulating the basic components we can use DOM elements and the DOM elements are the properties and attributes assigned to those elements. The common properties are,

  1. className
  2. tagName
  3. id
  4. href
  5. title
  6. rel
  7. Src

Eg: –

<img id=“myImage” src=“image.gif” alt=“An image” class=“someClass” title=“This is an image”/>

In the above HTML markup example the 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. We can change the JQuery properties by the following reasons.

1)      Easily manipulate an elements attributes

2)      It gives us access to the elements

Attribute operations

1)      Get attribute value

Either fetching the value of an attribute from the first element in the selected set or set attribute values, we used the attr() method.

Advantages:-

  1. Convenience: – This method called directly on a jQuery object and chained to other jQuery methods.
  2. Cross-browser consistency: – The values of some attributes are reported inconsistently across browsers, and even across versions of a single browser. The .attr() method reduces such inconsistencies.

Eg:-

<html>
<head>
<title>the title</title>
<script type=“text/javascript”
src=“/jquery/jquery-1.3.2.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>

2)      Set attribute value:-

To set the named attribute onto all elements in the covered set by using the passed value   we use the attr(name,value) method.

Eg: –

<html>
<head>
<title>the title</title>
<script type=“text/javascript”
src=“/jquery/jquery-1.3.2.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function()
{
$(“#myimg”).attr(“src”, “/images/jquery.jpg”);
} );
</script>
</head>
<body>
<div>
<img id=“myimg” src=“/wongpath.jpg” alt=“Sample image” />
</div>
</body>
</html>

3)      Applying styles:-

To apply specified style sheets onto all the selected elements we use the addClass(classes) method. In this operation we can use multiple classes separated by space.

Eg:-

<html>
<head>
<title>the title</title>
<script type=“text/javascript”
src=“/jquery/jquery-1.3.2.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“em”).addClass(“selected”);
$(“#myid”).addClass(“highlight”);
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<em title=“Bold and Brave”> This is first paragraph.</em>
<p id=“myid”> This is second paragraph.</p>
</body>
</html>

Methods used for manipulating attributes and properties.

1)      attr( properties ):- To set a key/value object as properties to all matched elements.

Syntax: –

 selector.attr({property1:value1, property2:value2})

The parameter “property” is the CSS property of the selected element and the parameter “value” is the value of the property to be set.

2)      attr( key, fn ): To set a single property to a computed value, on all matched elements.

Syntax: –

 selector.attr( key, func )

The key parameter is the name of the property to set and the func parameter is a function returning the value to set. This function would have one argument which is index of current element.

3)      removeAttr( name ):- To remove an attribute from each of the matched elements.

Syntax: –

selector.removeAttr( name )

The name parameter is the name of the property to be removed.

4)      hasClass( class ):- To returns true if the specified class is present on at least one of the set of matched elements.

Syntax: –

 selector.hasClass( class )

The class parameter is the name of CSS class.

5)      removeClass( class ):- To removes all or the specified class(es) from the set of matched elements.

Syntax: –

 selector.removeClass( class )

The class parameter is the name of CSS class.

6)      toggleClass( class ):- To adds the specified class if it is not present, removes the specified class if it is present.

Syntax: –

selector.toggleClass( class )

The class parameter is the name of CSS class.

7)      html( ):- To get the html contents (innerHTML) of the first matched element.

Syntax: –

 selector.html( )

8)      html( val ):- To set the html contents of every matched element.

Syntax: –

selector.html( val )

The val parameter is any string.

9)      text( ):- To get the combined text contents of all matched elements.

Syntax: –

selector.text( )

10)  text( val ):- To set the text contents of all matched elements.

Syntax: –

selector.text( val )

The val parameter is any string.

11)  val( ):- To get the input value of the first matched element.

Syntax: –

selector.val( )

12)  val( val ):- To set the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radio box would be checked.

Syntax: –

selector.val( val )

The parameter val:- If it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radio box would be checked.