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 tag is used to include external CSS file in web page?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicate the JavaScript property that can add HTML code into an element.
text value innerHTML
document.getElementById("someID").innerHTML = "HTML content";
Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
Get Attribute (ID, Class, Name, Title, Src) with jQuery

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (144256)
  2. Read Excel file data in PHP - PhpExcelReader (97594)
  3. Get and Modify content of an Iframe (32492)
  4. Redirects (5033)
  5. jQuery get XML data (5685)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (704)
  2. CSS cursor property - Custom Cursors (91)
  3. Read Excel file data in PHP - PhpExcelReader (71)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (67)
  5. PHP Unzipper - Extract Zip, Rar Archives (53)