Home Ajax Jquery Manipulating attributes
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

Manipulating attributes

Advertisement
This page discusses - Manipulating attributes

Manipulating attributes

     

Manipulating attributes

You can manipulate two types of attributes , i.e.

  • CSS Class attribute
  • General attribute

Manipulating CSS class attribute

You can manipulate CSS class attribute using following methods :

.addClass()

You can add any css class to filtered elements through this method.

Example :

Following code add selected css class to last paragraph :

<script>$("p:last").addClass("selected");</script>

.hasClass()

Using this method , you can check any of the matched elements have provided css class or not. If it has , it will reyurn 'True' otherwise 'False'.

Example :

$('#mydiv').hasClass('foo')

Above code checks whether the div "mydiv" have 'foo' css class or not.

.removeClass()

This method remove the css class from the set of matched element.

Example :

Following code will remove 'blue' css class from all even paragraphs :

$("p:even").removeClass("blue")

.toggleClass()

This method adds or removes a class from each element in the set of matched elements depending on either the class's presence or the value of the switch argument.

Example :

Following code will change the css class of clicked element :

<script>
  $("p").click(function () {
  $(this).toggleClass("highlight");
  });
</script>

Manipulating general attributes :

Given below methods are used to get and set the Dom attributes of elements :

.attr()

This  method is used to get the attribute of the first element from the matched set of elements.

Example :

Following code will get the 'title ' attribute of the first matched 'em' :

$("em").attr("title");

.removeAttr()

This method is used to remove attribute from each element of the matched set.

Example :

Consider the following code line :

<button>Enable</button>
<input type="text" disabled="disabled" value="can't edit this" />

The following code will enables the input next to it, on button click :

$("button").click(function () {
  $(this).next().removeAttr("disabled")
  .focus()
  .val("editable now");
});

.text()

This method will get and combine the text of each matched elements by leaving their html tags.

Example :

Consider the following code :

div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
  <li>list item 1</li>
  <li>list <strong>item</strong> 2</li>
  </ul>
  </div>
 

The $('div.demo-container').text()will produce the following output :

Demonstration Box list item 1 list item 2

NOTE -The .text() method cannot be used on input elements. For input field text, use the .val() method.

.val( )

This method will get the current value of the first element in the set of matched elements.

Following are some example of '.val()' :

$('select.foo option:selected').val();  // get the value from a dropdown select
$('select.foo').val();  // get the value from a dropdown select even easier
$('input:checkbox:checked').val();  // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

Learn from experts! Attend jQuery Training classes.

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Ask Questions?    Discuss: Manipulating attributes  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com