Look Inside
Hello there! You’ve come to the right place if you wish to learn more about jQuery framework! Or perhaps you should check out some jQuery slider showcase if you don’t know what jQuery framework is! Anyway, if you’re not a jQuery beginners, then you should definitely take a look at this post and see whether you have missed out any useful jQuery’s tips. =)
Anyway, we all know that jQuery has quickly become the most famous JavaScript framework among the Web Development community due to its simplicity and ease of use. As we all know, jQuery is a free, fast and lightweight JavaScript library that create amazing effects and add incredible functionality to our website and blogs. Life of web developers and designers has become easier with the birth of jQuery.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. -by jQuery.com
In following, I have listed 10 jQuery basics and methods for beginners. Some of them you certainly shouldn’t miss out due to its usability. Okie, let’s get started with the 10 jQuery basics and methods for beginners! Have fun with jQuery!
1. Include jQuery
First of all, before you can use any jQuery method, you have to include jQuery to your website.
<!-- Include jQuery --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'></script> ...
#Tips: You should let Google host jQuery for you rather than host it yourself! You may refer to article 3 reasons why you should let Google host jQuery for you.
2. Get Started – .Ready()
Get Started when DOM is READY! This method will be executed as soon as DOM is ready. It is different from JavaScript .onload() event since it don’t have to wait until all images are finished downloading. Normally this method will be used before other event handlers executed.
<script>
$(document).ready(function() {
/* Your function here */
alert('Hello World!');
});
</script>
Your references: jQuery .Ready()
3. Element Selectors – :first :last :even :odd
Through jQuery selectors, you can select any HTML elements you want. It’s pretty similar to JavaScript document.getElementById('element') but with more powerful extension.
:first – selects first matched element
:last – selects last matched element
:even – select even elements
:odd – select odd elements
:nth-child() – selects all elements that are the nth-child of their parent
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
/* target first li - Example 1 */
$('ul.#list li:first').css('font-size', '14pt');
/* target last li - Example 5 */
$('ul.#list li:last').css('font-size', '10pt');
/* target even li */
$('ul.#list li:even').css('background-color', '#fafafa');
/* target odd li */
$('ul.#list li:odd').css('color', 'blue');
/* target third li - Example 3 */
$('ul.#list li:nth-child(3)').css('font-style', 'italic');
/* target odd li - same as :odd */
$('ul.#list li:nth-child(2n)').css('font-weight', 'bold');
});
</script>
</head>
<body>
<ul id="list">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
<li>Example 5</li>
</ul>
</body>
</html>
#Tips: You may use .filter() to enhance jQuery selectors by providing additional matched elements such as Regular Expressions matching.
Your references: jQuery Selectors, jQuery .filter()
4. Tree Selectors – .children() .parent()
jQuery allow us to search through the elements in DOM tree and construct a new jQuery object.
.children() – Get the children of matched elements
.parent() – Get the parent of matched elements
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(function(){
/* #obj3 > h3 & #obj3 > div affected */
$('#obj3').children().css('border', '1px solid');
/* #obj2 > h2 affected */
$('div').children('h2').css('color', 'blue');
/* #obj1 affected */
$('span').parent().css('background-color', '#fafafa');
});
</script>
</head>
<body>
<div id="obj1">
<h1>Example 1</h1>
<span>Example text with span... </span>
</div>
<div id="obj2">
<h2>Example 2</h2>
<p>Example text with p... </p>
</div>
<div id="obj3">
<h3>Example 3</h3>
<div>Example text with div... </div>
</div>
</body>
</html>
Your References: jQuery Tree Travelsal
5. CSS classes – .addClass() .removeClass() .toggleClass()
You can set and remove CSS classes at anytime through jQuery CSS classes methods.
.addClass() – Adds specified class(es) to matched elements.
.removeClass() – Remove specified class(es) from matched elements.
.rtoggleClass() – Toggle the specified class(es) of matched elements.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
margin: 10px;
float: left;
background-color: #000;
}
span {
cursor: pointer;
border: 1px solid #ccc;
}
.divClass {
background-color: blue;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('div').addClass('divClass');
});
$('#remove').click(function(){
$('div').removeClass('divClass');
});
$('#toggle').click(function(){
$('div').toggleClass('divClass');
});
$('div').click(function(){
$(this).toggleClass('divClass');
});
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<span id="add">Click here to add '.divClass' class to all div</span><br/><br/>
<span id="remove">Click here to remove all div '.divClass' class</span><br/><br/>
<span id="toggle">Click here to toggle '.divClass' class for all div</span><br/><br/>
<span><< Click on div to toggle '.divClass' class</span>
</body>
</html>
References: jQuery CSS
6. CSS – .css()
You can set and remove CSS classes at anytime through jQuery CSS classes methods.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* set #obj style */
$('#obj').css({'width':'200px', 'height':'200px', 'background':'#000'});
/* set and get #obj css */
$('#obj').click(function(){
var color = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
$(this).css('background', color);
$('#txt').html('Color Hex: '+ $(this).css('background-color'));
});
});
</script>
</head>
<body>
<div id="obj"></div>
<div id="txt"></div>
</body>
</html>
References: jQuery .css()
7. Create DOM elements
You can create DOM elements and insert it to other DOM elements using jQuery.
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
border:1px solid #000;
margin:3px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i = 0;
$('#foo').click(function(){
i+=1;
/* Create DIV */
$('<div/>', {
id: 'obj'+ i,
text: 'Object '+ i + ' created...',
'class': 'myclass'
}).appendTo('body');
});
});
</script>
</head>
<body>
<input id="foo" type="button" value="Generate DIV"></input>
</body>
</html>
#Tips: If you need to creates a lot of DOM element through script, you should use $(document.createElement('div')) rather than $('<div/>') or $('<div></div>') for better speed.
References: .jQuery()
8. Element Attribute – .attr()
Get and set attributes for DOM elements.
<!DOCTYPE html>
<html>
<head>
<style>
.myobj {
width:150px;
height:150px;
background:#ccc;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#foo').click(function(){
$('#txt').empty();
/* Get #obj attribute */
$('#txt').append('<div>#Obj name: '+$('#obj').attr('name')+'</div>');
$('#txt').append('<div>#Obj rel: '+$('#obj').attr('rel')+'</div>');
$('#txt').append('<div>#Obj class: '+$('#obj').attr('class')+'</div>');
$('#txt').append('<div>#Obj text: '+$('#obj').html()+'</div>');
/* Set new #obj attribute */
$('#obj').attr('name', 'random_name'+Math.ceil(Math.random()*5));
$('#obj').html('Random Text: '+Math.ceil(Math.random()*10));
});
});
</script>
</head>
<body>
<input id="foo" type="button" value="Get Obj Attribute">
<div id="obj" name="obj-name" rel="obj-rel">Obj</div>
<div id="txt"></div>
</body>
</html>
References: jQuery .attr()
9. jQuery Events – .hover() .click()
Other than CSS, you can also control the behaviors of elements by binding the Javascript event handlers to it.
<!DOCTYPE html>
<html>
<head>
<style>
#obj {
background:#ccc;
padding:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* Set Click event for #obj */
$('#obj').click(function(){
alert('You have CLICKED on the area');
});
/* Set Mouseover and Mouseout events for #obj */
$('#obj').hover(function(){
$('#txt').html('You have HOVER OVER the area on top!');
}, function(){
$('#txt').html('You have HOVER OUT the area on top!');
});
});
</script>
</head>
<body>
<div id="obj">Mouseover and click on this section!</div>
<div id="txt"></div>
</body>
</html>
References: jQuery Events
10. Animation – .animate()
Animation – the most exciting feature of jQuery. You can easily add animation effects to your web page without using Flash or any other advanced coding.
<!DOCTYPE html>
<html>
<head>
<style>
#obj {
width:100px;
height:100px;
background:#ccc;
position:absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#obj').animate({left: '400px'}, 1000)
.animate({top:'200px'}, 'slow')
.animate({width:'+=150px', height:'+=150px'}, 2000)
.animate({opacity:'0'}, 'fast');
});
</script>
</head>
<body>
<div id="obj"></div>
</body>
</html>
References: jQuery .animate()
Conclusion of jQuery Basics and Methods
These are some jQuery basics and methods for beginners. However, with combination of these basics and methods, you can actually build a lot of advanced jQuery effects such as animated navigation menu and image hover effects. There are a ton of jQuery tutorials available out there in internet, you should try to create a jQuery application or website, and you will know how simple and fun jQuery is! You are welcome to share us your creation in here too! Cheer…