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,
- className
- tagName
- id
- href
- title
- rel
- 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:-
- Convenience:
– This method called directly on a jQuery object and chained to other
jQuery methods.
- 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.
READ JQuery Effects
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.
READ New jQuery Interview Questions and Answers for beginners
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.
No comments:
Post a Comment