Jquery Course

This tutorial shows how to get the attribute value of a clicked item with jQuery, any attribute which is added in that HTML tag (id, class, name, title, src, etc.).
- To get the attribute value of an element with jQuery, it is used attr() function.
Syntax:

$(element).attr('attribute_name')
    - If the "attribute_name" not exists in "element", the attr() function will return "undefined".

To reffer to the clicked element, you use the $(this) instruction, so, the syntax to get the value of an attribute of a clicked HTML element is:
$(element).click(function(){
  var attrval = $(this).attr('attribute_name');
});
Now, here's some code, and examples.

Get attribute value of an element by Class

In this case, the HTML element is selected by "class".
    • Get the ID:
$('.class').click(function(){
  var id = $(this).attr('id');
});

    • Get the "title" (for example, of an anchor <a> with specified class):
$('.class').click(function(){
  var title = $(this).attr('title');
});

    • Get the "name" (for example, of a form element with specified class):
$('.class').click(function(){
  var name = $(this).attr('name');
});

Example, get the ID and SRC address of a clicked image with class="imgs":
Click on this image:
<img src="imgs/webcourses.gif" alt="Courses: coursesweb.net" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript"><!--
$(document).ready(function() {
  $('.imgs').click(function(){
    var idimg = $(this).attr('id');
    var srcimg = $(this).attr('src');
    alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
  });
});
--></script>
Demo:
Click on this image: Courses: coursesweb.net

Get attribute value of an element by ID

In this case, the HTML element is selected by "id".
    • Get the "class":
$('#id').click(function(){
  var class = $(this).attr('class');
});

    • Get the "name" (for example, of a form element with specified "id"):
$('#id').click(function(){
  var name = $(this).attr('name');
});

Example, get the "class" and "alt" attributes of a clicked image with id="idimg":
Click on this image:
<img src="imgs/webcourses.gif" alt="Courses: coursesweb.net" class="clsimg" id="idimg" width="180" height="60" />
<script type="text/javascript"><!--
$(document).ready(function() {
  $('#idimg').click(function(){
    var classimg = $(this).attr('class');
    var altimg = $(this).attr('alt');
    alert('Class: '+ classimg+ '\n Alt: '+ altimg);
  });
});
--></script>
Demo:
Click on this image: Courses: coursesweb.net

Get attribute value of an item selected by Tag-Name

If you want to get the value of an attribute of a clicked item which is selected by Tag Name, you can use these codes:
    • Get the ID of clicked DIV:
$('div').click(function(){
  var id = $(this).attr('id');
});

    • Get the "class" of clicked paragraph (<p>):
$('p').click(function(){
  var class = $(this).attr('class');
});

    • Get the "name" of "input" field:
$('input').click(function(){
  var name = $(this).attr('name');
});

Example, get the "id" and "class" attributes of any clicked DIV:
<div id="idiv" class="clsdiv">Click on this text:<br/>
Free Web Programming Courses - https://coursesweb.net/</div>
<script type="text/javascript"><!--
$(document).ready(function() {
  $('div').click(function(){
    var idd = $(this).attr('id');
    var classdiv = $(this).attr('class');
    alert('ID is: '+ idd+ '\n Class: '+ classdiv);
  });
});
--></script>
Demo:
Click on this text:
Free Web Programming Courses - https://coursesweb.net/

- You can get the value of other attributes too, like "alt", "src" (in <img>), or "rel".

• To get the value of an attribute of any clicked item, use '*' as selector.
      Example, get the ID of any clicked element:
$('*').click(function(){
  var id = $(this).attr('id');
});

• In the same way you can get the attributes value of HTML items on other events, like: mouseover(), focus() .

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Get Attribute (ID, Class, Name, Title, Src) with jQuery

Last accessed pages

  1. PHP MySQL - WHERE and LIKE (25809)
  2. Node.js Move and Copy Directory (11719)
  3. Add dynamically button to scroll to top of the page (924)
  4. Read Excel file data in PHP - PhpExcelReader (84340)
  5. Add, Change, and Remove Attributes with jQuery (43067)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (528)
  2. PHP Unzipper - Extract Zip, Rar Archives (427)
  3. SHA256 Encrypt hash in JavaScript (411)
  4. Read Excel file data in PHP - PhpExcelReader (365)
  5. Create simple Website with PHP (338)