IMG-LOGO

Become a jquery expert in just 10 minutes.

andy - 08 Mar, 2016 6312 Views 3 Comment

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
20 Feb, 2018
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
21 Feb, 2018
Thanks Burak for correcting the error.
Nikunj Patel
12 May, 2019
Very useful for me. Thanks once again.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles