Jquery Course

In this tutorial you can learn how to Add, Cange, and Remove Attributes (like id, class, href, disabled, etc.) in HTML elements using jQuery.
All these actions can be performed using the attr(), and removeAttr() jQuery methods.

Add attribute

To add an attribute to a HTML element /or elements (any attribute, id, class, href, selected, etc.), apply this syntax:
$('element').attr('attribute_name', 'attribute_value');
Examples:
- Add the attribute id="value" to the clicked DIV:
$('div').click(function() { $(this).attr('id', 'value'); });

- Add disabled attribute to submit button with id="submit1":
$('submit#submit1').attr('disabled', 'disabled');

- Select the last Option in the Select lists with class="cls" (by adding "selected" to that option):
$('select.cls option:last).attr('selected', 'selected');

- Add class="value" to even <li> within HTML tag with id="idtag":
$('#idtag li:even').attr('class', 'value');

• The class attribute can also be added with the jQuery method addClass().
Syntax:
$('element').addClass('attribute_name', 'attribute_value');
Example:
- Add the class "cls" to clicked DIV:
$('div').click(function() { $(this).addClass('cls'); });

• Another useful jQuery method for working with class attribute is toggleClass(). This function adds or removes one or more classes from each element in the set of matched elements. If an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
- For example, toggle class "cls" to the clicked DIV:
$('div').click(function() { $(this).toggleClass('cls'); });

Change Attribute value

To change the value of an attribute, use the attr() method with this syntax:
$('element').attr('attribute_name', 'new_value');
Examples:
- Change the image of the IMG element with id="img1" (by changing the value of the "src" attribute):
$('img#img1').attr('src', 'new_image.jpg');

- Change the URL of the first link (<a>) in the HTML tag with id="idtag"
$('#idtag a:first').attr('href', 'http://www.courses.net');

- Change the file address added in the action of the form with id="frm1":
$('form#frm1').attr('action', 'other_file.php');

Remove attributes

To remove an attribute to a HTML element /or elements (any attribute, id, class, href, selected, etc.), apply removeAttr() method with this syntax:
$('element').removeAttr('attribute_name');
Examples:
- Remove the ID of the clicked DIV:
$('div').click(function() { $(this).removeAttr('id'); });

- Remove disabled attribute to submit button with id="submit1":
$('submit#submit1').removeAttr('disabled');

- Remove class to even <li> within HTML tag with id="idtag":
$('#idtag li:even').removeAttr('class');

• The class attribute can also be removed with the removeClass() jQuery method.
For example, remove the class attribute of the clicked DIV:
$('div').click(function() { $(this).removeClass(); });
- If you specify a parameter to removeClass() function, with the value of a class, will be removed only that class (useful if the matched element/s has multiple classes), otherwise removes al classes of that element.

The type attribute of the <input> form fields can't be removed or changed.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Add, Change, and Remove Attributes with jQuery

Last accessed pages

  1. Using v-model in form input fields (1051)
  2. jQuery UI draggable - Drag elements (11445)
  3. Display data from PHP Array, or MySQL in HTML table (26980)
  4. Redirects (4978)
  5. jsSHA - SHA Hashes and HMAC in JavaScript (3519)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (310)
  2. The Mastery of Love (48)
  3. CSS cursor property - Custom Cursors (36)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (31)