Get Attribute (ID, Class, Name, Title, Src) with jQuery

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:

    - 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:

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:

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:
- 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() .

<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>

h2 {
  font-family:"Calibri",sans-serif;
}

var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);

$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10