How to dynamically add a CSS class for an HTML element

Here is another wonderful feature of jQuery, you can add or remove CSS class dynamically using jQuery addClass() and removeClass() methods. For example, if you want to change the background color of a DIV element for a bit of time, you can add that CSS class property on the fly.

see the example below,
HTML

<div id ="notice" class="">Please notice this area</div>
<button>Add Class</button>

jQuery

$("button").click(function(){
    $("#notice").addClass("divcls");
    setTimeout(function() { $("#notice").removeClass("divcls") }, 1000);
 });

CSS

.divcls{background-color:red;font-weight:bold;width:150px}

How to read data from a JSON file using jQuery (getJSON() method)

Here is the example how to read a simple JSON file data using jQuery getJSON() method,

Sample JSON file structure, 

{
"news1": "This is a first sample news feed",
"news2": "This is a second sample news feed",
"news3": "This is a third sample news feed"
}

this file you can store as .js or .json extension or even .txt (for this example, I store it as .js extension in script folder)

HTML 

<ul>
  <li><div id="news1" style="height:100px;width:auto"></div> </li>
  <li><div id="news2" style="height:100px;width:auto"></div></li>
  <li><div id="news3" style="height:100px;width:auto"></div> </li>
</ul>

jQuery

<script type="text/javascript">
 $(document).ready(
  function() {
      $.getJSON('script/news1.js', function(jd) {
   $('#news1').append('<p>' + jd.news1 + '</p>');
   $('#news2').append('<p>' + jd.news2 + '</p>');
   $('#news3').append('<p>' + jd.news3 + '</p>');  
   });  
 });
</script> 

Cloning an HTML element using JQuery Clone() function.

Its just  an another amazing feature of JQuery. You can simply duplicate an HTML element using the Clone() function. for example, if you want to add new Table Row dynamically in to a Table, user can use Clone() function. Here is an example code,

HTML

<form>
    <table border="1" id="experiance">
        <tr>
            <th>Sl No</th>
            <th>Language</th>
            <th>Experiance</th>
            <th>Proficient</th>
        </tr>
        <tr>
            <td> <input type="text" /> </td>
            <td> <input type="text" /></td>
            <td> <input type="text" /></td>
            <td>
                <select>
                     <option value = "1">Beginner</option>/>
                     <option value = "2">Itermediate</option>/> 
                     <option value = "3">advanced</option>/>
                </select> 
            </td>
        </tr>
    </table>
    <input id="add" type="button" value="Add New Row" />
</form>

JQuery

$("#add").on('click', function () {
    var rows = 1;    
    var lastRow;
    lastRow = $('#experiance tr').last().clone().appendTo("#experiance");      
});

DEMO

Shadow effect on DIV when mouse Hover using CSS3

CSS 

div.shadow {
 width: 300px;
 margin: 20px;
 border: 1px solid #ccc;
 padding: 10px;
 }

div.shadow:hover {
 -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
 box-shadow: 0 0 5px rgba(0,0,0,0.5);
 }

HTML

<div class="shadow">
This Simple example, gow to make shadow effect for DIV on mouse hover.
For this example, we can use CSS3 and HTML.
</div>

DEMO

How to modify an HTML object's CSS property dynamically by using JQyery?

If user want to change the CSS property of an HTML Objects on the fly, you can use JQuery,
For example, if you want to change the color of all the text in a <DIV> element,

HTML

 <div id="change">Make Me in Red Color</div>
 <button id="color">Change Color</button>

JQuery

$(document).ready(
 function() {
  $("#color").click(
   function() {
    $("#change").css("color", "red");
   });
 });

DEMO

How to toggle two images dynamically using JQuery.?

User can toggle two images dynamically with out refresh the page, for that we can use JQuery, code snippet below,

HTML 

        <div id="pdiv" >
            <img id="slidimg" src="img1.jpg" alt="image1" width="186" height="448" />
        </div>

JQuery

                    $("#pdiv").click(
                    function() {
                        $("#pdiv").fadeToggle("slow", "swing",
                        function() {
                            $("#slidimg").attr("src", function(i, oldSrc) {
                            return oldSrc == 'img1.jpg' ? 'img2.jpg' : 'img1.jpg';                              
                            });
                            $("#pdiv").fadeToggle("slow", "swing");  
                        });
                    }
                );

DEMO
click below image to toggle the image