Category Archives: Jquery
jQuery Selectors
jQuery Selectors are used to select the element. jQuery selectors play an important role in jQuery library.
JQuery Selectors
jQuery Seletors are based on such as : Name, Id, Classes and many more…
The very basic selector(Name) example :
jQuery Selctors Example :
|
Main jQuery Selectors
[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No,Selector
1, Name : The example of name tag are
2, Class :The example of class selector is –
Here class selector is “test”.
3, ID : The example of ID selector is –
Here class selector is “MainDiv”
[/table]
More jQuery Selectors
[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No,Selector,Example
1, $(“*”) : Selects all elements in the page. , See Detail & Demo »
2, $(this) :Selects current element.,See Detail & Demo »
3, $(“p.myclass”) : Selects all <p> which have class “myclass”.,See Detail & Demo »
4, $(“ol li:first”) : Selects first <li> element of the <ol>,See Detail & Demo »
5, $(“ol li:last”) : Selects last <li> element of the <ol>,See Detail & Demo »
6, $(“[href]”) : Selects all elements with “href” attributes.,See Detail & Demo »
7, $(“tr : even”) : Selects all even tr elements of the table.,See Detail & Demo »
8, $(“tr : odd”) : Selects all odd tr elements of the table.,See Detail & Demo »
[/table]
jQuery Syntax
jQuery Syntax : The Basic Idea about jQuery is to select the element(s) and perform the action on them. For selecting elements the selectors are used.
jQuery Syntax
:
The $ symbol is used to access the jQuery.
The basic example for jquery selector and action :
$(selector).action();
selector is used to select the element from the dom.
.action() performs the action on the selected element.
Example
Output
jquery basic syntax
jQuery $(document).ready method
jQuery document ready event is used to prevent code run while your document ie. page is loading. It runs the code only when your document is completely loaded and ready.
This is used because some elements ie. selectors are created later in that case your code will not work for those
elements.
Best Example can suppose your code run first in head section and your element is loaded in footer later, in this case your code will not work.
example of document ready method :
$(document).ready(function(){
// write your code here...
});
or you can also use
$(function(){
// write your code here...
});
Jquery Install
Jquery Install
There are following ways to install/add jquery in your page.
- 1. Download : You can directly download jquery from http://jquery.com/download/ and use jquery install
- 2. Use CDN:You can include from CDN example google , jQuery.com –
Download jQuery
You can download jQuery from jQuery.com there are two types of versions available.
1. Production Version : This is compressed version for the live websites.
2. Development Version : This is uncompressed and readable for development and testing purpose.
Suppose you download production version jquery-2.1.4.min.js and have put it in the root of application.
Note: jQuery jquery-2.1.4.min.js needs to be included within the
tag such as
Note : Include the jquery-2.1.4.min.js only once.
jQuery CDN Example :
Get Jquery Install & enjoy programming!
Jquery Introduction
What Is jQuery?
Jquery is lightweight and feature-rich JavaScript library which simplifies the various tasks.
Jquery is rich of inbuilt methods which reduces the developer’s effort. It enables developer to write less code and
perform more tasks.
You Should Know Before You Start
HTML , CSS and JAVASCIPRT are required before you start learning the jQuery.
Features Of jQuery
- DOM Manupulation
- HTML/CSS Manupulation
- AJAX Support
- EVENT Handling
- Effects
- Animations
- Cross Browser Compatibility
Jquery Home
JQuery is specifically JavaScript library. jQuery is very simple and easy to learn and use. jQuery is fast, small and full featured JavaScript Library. It makes easy the Html Document Traversal, Manipulation, event handling, animation and Ajax etc.
Here in this tutorial we are going to explain how you can use jQuery with examples and demos.
jQuery Tutorial
JQuery is one of the most popular & extendable javascript framework. Let us have look over some main features of jQuery-
jQuery Features
- HTML/DOM Manipulation– jQuery provides various methods to manipulate html document object model.
- Css Manipulation– jQuery Provides various inbuilt Css Manipulation Methods which can be easily used to work with css styles.
- HTML event– jQuery Provides methods to deal with different-different events.
- Animation– There are many inbuilt functions which can be used to deal with animation/effects in jQuery.
- AJAX– jQuery provides various functions to use ajax .
What You Should Know?
Before starting jQuery you should know the basic ideas about the following technologies-
- HTML
- CSS
- JavaScript
Start learning with our online editor tool.You can edit code and try it online to see the real time example and demo.
Now let us create a very basic and simple example of jQuery :
In the above example we have simply created script for jQuery basic example which will generate a alert box and write the text “”Welcome to tutorialsplane jQuery Learning Center!”” when the document is loaded. To see the output of the above example just hit the Try it button and it will display the result of the script written in jQuery $(document).ready function.
We are sure once you will learn it, you will love it.
