Published on: 08 March, 2016

Become a jquery expert in just 10 minutes.

Posted by andy | 1321 views 1 likes 1 favourites 0 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( ":even" ).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

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Share your article with us and add your own google adsense account to earn extra money. Plus, you can promote a link back to your site.
Related Articles
Published on: 22 March, 2016
In this tutorial, you will learn how to create a category menu list using css and JQuery framework. You will also learn on how to automatically place an arrow into the LI element if it founds there is a sub menu list. The placement of the arrow is done via JQuery, this includes binding the event onclick on the LI element as well to expand and collapse the sub menu list.
Published on: 02 May, 2014
Are you lazy to google the quick jquery code snippet for your website? Look no further, we have included a quick summary list of JQuery code to help you faster coding to save your time. Starting from how to check if an object is visible or how to tick a check box programmatically using JQuery.
Related Tutorials
Published on: 25 January, 2016
So what actually an event? An event can be considered as a result of an action triggered by a process which can be a process clicking of a user or when a page is loading.
Published on: 20 December, 2015
Learn how easily to manipulate DOM element selection using JQuery. One of the cool feature from JQuery is the DOM selector. In javascript, when you want to reference an object, you can refer the object either based on ID or class name of the object by using the built in function such as getElementById or getElementByTagName or getElementsByClassName.
Published on: 15 December, 2015
Getting started by writing your first JQuery code. Learn how to create it from scratch and apply it on your site. The best way to start your first JQuery function is after the browser has completedly loaded the page content. There are two short methods to do so.
Published on: 13 December, 2015
Learn what is the JQuery framework is and why many web developers and designers love to this framework.