Published on: 08 March, 2016

Become a jquery expert in just 10 minutes.

Posted by andy | 1905 views 1 likes 1 favourites 1 comments
Tumblr Digg Google Plus

Do you need to learn the quick tips about JQuery? Well, we have compiled a quick list of tips to learn JQuery tricks in just 10 minutes. For you that is completely newbie about JQuery script, we would suggest you to read the JQuery tutorial on our site. It covers the introduction and basic information about JQuery framework script.

1. Performing some scripts after the DOM is ready.
	$( document ).ready(function() {
		console.log( "I am ready!" );
	});
	
	$(function(){
		console.log( "I am ready!" );
	});
2. How to get a value of text box or select combo box using the ID or class
	//Sample using textbox
	$("#txtName").val();
	$(".txtName").val();
	
	//Sample using select combo box
	$("#cboCountry").val();
	$(".cboCountry").val();
3. How to add and remove a css class.
	//removing a class
	$("#myDiv").removeClass("className");
	
	//adding a class
	$("#myDiv").addClass("className");
4. How to check if a checkbox is checked.
	//check if a checkbox is ticked
	$("#chkAgree").is(":checked");
5. How to check if an object is visible.
	//check if an object is visible
	$("#myDiv").is(":visible");
6. How to check if an object exists.
	//check if an object is exists
	if($("#myObject").length > 0){
	}
7. How to set an attribute to a html object.
	//set an data attribute to an object
	$("#myID").attr("data-id", "1");
8. How to set a specific style to an object.
	//set a height of an object to 100px
	$("#myID").css("height", "100px");
9. How to hide or show an object.
	//hide an object
	$("#myID").show();
	
	//show an object
	$("#myID").hide();
10. How to get an object based on partial id.
	//get an object contains any keyword myID
	$("[id*=myID");
	
	//get an object where the ID is end up with keyword myID
	$("[id$=myID");
11. How to empty items in select combo box and append new items.
	//empty combo box items
	$("#cboCountry").empty();
	
	//add a new item option into combo box
	$("#cboCountry").append("<option value='AU'>Australia</option>");
12. How to bind and unbind an event to a button.
	//attach event click
	$("#btnSubmit").on("click", function(event){});
	$("#btnSubmit").click(function(event){});
	
	//remove event click
	$("#btnSubmit").off("click");
	$("#btnSubmit").unbind("click");
13. How to get a href link value using attr keyword.
	$("#myLink").attr("href");
14. How to disable or enable a html input button or text box.
	//disable button or text box
	$("#myButton").attr("disabled", true);
	$("#txtName").attr("disabled", true);
	
	//enable button or text box
	$("#myButton").attr("disabled", false);
	$("#txtName").attr("disabled", false);
15. Getting on input text only from a html DOM.
	$("input [type=text]");
16. Attach multiple events to a button.
	$("#btnSubmit").bind("blur keypress", function (event){
	});
17. Check if a li tag contains specific word and hide it.
	$("li:contains('my word')).hide();
18. For loop of JSON object in JQuery.
	var obj = { banana: 1, apple: 2, orange: 3, grape: 4, mango: 5 };
	jQuery.each( arr, function( i, val ) {
	   console.log(val);
	});
19. Avoiding conflict with other script libraries that use JQuery.
	var $jq = jQuery.noConflict();
	$jq(document).ready(function(){
	  
	});  
20. Change the background color for even and odd position only for ul li list.
	//for even position
	$("li").filter( ":even" ).css("background-color", "blue");
	
	//for odd position
	$("li").filter( ":odd" ).css("background-color", "red");
21. Remove an element of DOM.
	//This will remove any div tag that contains align css class.
	$( "div.align" ).remove();

More tips will be added on the list, if you have any tips that need to be added, please adds it to the following comment.

Comments
Burak
Commented on: 20 Feb, 2018 09:42:54 AM
Good to see all of these in one page :) The line below should change... //for odd position $( "li" ).filter( ":odd" ).css( "background-color", "red" ); cheers,
andy
Commented on: 21 Feb, 2018 12:58:38 PM
Thanks Burak for correcting the error.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.