Startup with JQUERY

JQuery

jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
References:
http://jquery.com/download/
http://www.w3schools.com/jquery/jquery_examples.asp
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

<!–Include one from following library //CDNs host JQuery libraries i.e. Google & Microsoft//–>
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
<!–OR–>
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js
<!–type=”text/javascript” inside the tag is not required in HTML5–>

$(selector).action()

Examples(Types of selectors):
$(this).hide() – hides the current element.
$(“p”).hide() – hides all

elements.
$(“.test”).hide() – hides all elements with class=”test”.
$(“#test”).hide() – hides the element with id=”test”.

//The Document Ready Event
$(document).ready(function(){
// jQuery methods go here…
//This is to prevent any jQuery code from running before the document is finished loading (is ready).
});
// or you can use following, both same
$(function(){
// jQuery methods go here…
//(document).ready clause is ommited here
});

//Selector examples
//Examples : http://www.w3schools.com/jquery/trysel.asp

//When a user

content, it will be hidden
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});

//when click on , content with

will be hidden
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});

<!–
Best practice to include all JQueries in seperate file and include that as follows
http://my_jquery_functions.js
–>

<!–
jQuery Event Methods [Actions]

*Juery is tailor-made to respond to events in an HTML page.
*Event actions as follows

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave – blur unload

–>

<!–
jQuery Effects
http://www.w3schools.com/jquery/jquery_ref_effects.asp
–>

//Another hide() demonstration. How to hide parts of text.
$(document).ready(function(){
$(“.ex .hide”).click(function(){
$(this).parents(“.ex”).hide(“slow”);
});
});
//syntax: $(selector).hide(speed,callback);

//$(selector).show(speed,callback);
$(“#show”).click(function(){
$(“p”).show();
});

//Some more other JQuery Examples
//$(selector).toggle(speed,callback);
//$(selector).fadeIn(speed,callback);
//$(selector).fadeOut(speed,callback);
//$(selector).fadeToggle(speed,callback);
//$(selector).fadeTo(speed,opacity,callback)
//$(selector).slideDown(speed,callback);
//$(selector).slideToggle(speed,callback);
//$(selector).animate({params},speed,callback);

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s