Web Technology Experts Notes

Wednesday, 6 September 2017

jQuery naming convention - jQuery tutorial for beginner

JQuery A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and AJAX and do lot of more things in very simple and quick way..

For all this, Just include the jquery.js file.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JQuery most useful and very common functions used in the development

1) jQuery(this);// Current object

2) jQuery("p");// Select all the P tag

3)jQuery("p.abc");//Select all the P tag having class abc

4) jQuery("ul li:first");//select the first li of ul

5)jQuery("p").hide();// Hide the p tag

6) jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("div.toggle").toggle();
});

});:

/*When you click the button first time, it will hide the div having class toggle and when click again will show.*/

7)jQuery("div#intro .head"); // select the class having "head" under div having id "intro"

8)jQuery("[hrefjQuery='.jpg']"); //select all href having link ending with jpg

9)jQuery("p.abc").append("greatinformations");;// Add the text "greatinformations" end the div having class abc

10) jQuery("p.abc").after("greatinformations"); /*Add the text "greatinformations" after the ending the div having class abc Enter code here.
Please note: Although no board code and smiley buttons are shown, they are still usable.*/

11)jQuery("div").animate({height:300},"slow"); //change all the div height to 300px

12) jQuery(this).css("background-color"); //get the background color of current html object

13)jQuery(this).css("background-color", 'blue' ); //set the background-color to blue of current html object

14)jQuery("div").animate({left:"100px"},"slow"); // Move the div to 100px

15)/*jQuery Callback:A callback function is executed after the current work is done eg. */

jQuery("button").click(function(){
jQuery("div.class").show(300,function(){
alert("The div is display now ");
});.

16) jQuery("button.a").click(function(){
jQuery("div").load('abc.txt');
});  /* when click on button having class a will load the data from abc.text and upload to div */

17) jQuery("div").load('abc.txt','',function(){alert('hi')}); // after loading file abc.txt, alert the "hi"

How to Select / Deselect All Checkboxes using jQuery

If you are developer and looking for a jQuery code-snippet that selects and de-selects multiple checkboxes by clicking “Select All” checkbox, like in Gmail.com, rediffmail.com and yahoo.com. Then you are at right place.

This is very simple and most commonly used in web application and specially its used where there is multiple record listing.

In Admin section, this functionality is needed in every page, like User Listing, Product Listing, Album Listing & images listing etc.

When selected "Select All" checkbox, It will select all the checkbox under the main checkbox.
If you de-select the "Select All", It will de-select all the checkbox under this main checkbox.

You can use below code and do the modification as per your requirement. This code is very useful not just in current web application but also for future.

select all checkbox jquery DEMO

	Select All
	Name2
	Name3
	Name4
	Name5
	Name6

Code Snippet

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"> 

jQuery(document).ready(function() {

    jQuery('#checkbox_all').click(function(){ 
        
        if($(this).is(":checked")){ 
            jQuery('input[type="checkbox"].chk').each(function(){ 

                jQuery(this).prop("checked",true);

            });         

        }else{ 

            jQuery('input[type="checkbox"].chk').each(function(){ 

                jQuery(this).prop("checked",false);

            });                 

        } 

     

    }); 

}); 

</script> 
<table border="1" rules="groups" style="width: 200pxpx;">
<tbody>
<tr> 

        <th><input id="checkbox_all" name="checkbox" type="checkbox" /></th> 

        <th>Select All</th> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name2</td> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name3</td> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name4</td> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name5</td> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name6</td> 

    </tr>
</tbody></table>