Tag Name
Jquery Tag
Usage
Document Ready Function
Document Ready Function()
| < script > |
| $ ( document ). ready ( function ( ){ |
| $ ( "button" ). click ( function ( ){ |
| $ ( "p" ) . slideToggle( ); |
| }); |
| < /script. > |
In this example a button click will
move a paragraph up and down.
Jquery Basics
Chaining
$("#p1").css("color", "red")
.slideUp(2000).
slideDown(2000);
Chaining allows us to run multiple jQuery
methods (on the same element) with a single statement. In this example the text within
p1 div is turned red, slidesUp & slidesDown for 2 seconds.
Jquery(load);
$("#div1").load("jquery_load.html");
This example loads the div with id="p1",
inside the file "jquery_load.html", into div1
.find();
< div class="descendants">
< p >This is the paragraph element !!!
This is span element !!!
< /p >
< /div >
< script >
$(document).ready(function() {
$("div").find("span").css({
"color": "green",
"border": "2px solid green"
});
});
< script >
this example colors the span element inside the div green and the border
green.
.each();
$( function () {
var myArray =
["one", "two", "three", "four", "five"];
$.each(myArray, function (index, value) {
console.log(value);
});
});
The output of the above will be:
one,
two,
three,
four,
five
JQuery Effects
show() & hide();
$("p").show();
$("p").hide();
Shows the selected elements.
Hides the selected elements.
fadein() & fadeout()
$("p").fadeIn();
$("p").fadeOut();
Fades in the selected elements
Fades out the selected elements
fadetoggle()
$("#panel").fadeToggle();
method toggles between the fadeIn() and fadeOut() methods.
slideUp() & slideDown()
$("p").slideUp();
$("p").slideDown();
method is used to slide up an element.
method is used to slide down an element.
slidetoggle()
$("#panel").slideToggle();
method toggles between the slideDown() and slideUp() methods.
Jquery & Css
css() method
$("div").css({"background-color":"red});
the background becomes red when the css is applied.
hasClass()
$("button").click(function(){
alert($("p").hasClass("intro"));
});
checks if any of the selected paragraph have the .intro class name.
if found the css attributes the paragraphs with the .intro class are applied.
addClass()
$("button").click(function(){
$("p:first").addClass("intro");
});
Adds selected paragraph have the .intro class name.
removeClass()
$("button").click(function(){
$("p:first").removeClass("intro");
Removes selected paragraph have the .intro class name.
toggleClass()
$("button").click(function(){
$("p").toggleClass("main");
});
Toggles between adding/removing selected paragraph have the .intro class name.
Creating Content
html();
< h2 >She loves me< /h2 >
< button >She loves me < /button >
< script >
$(document).ready(function () {
$("button").click(function () {
$("h2").html
("Hello She loves teddy bears!");
});
});
< /script >
is used to return or change the html and text content of an element.
She loves teddy bears now appears in between the h2 tag.
text();
< button >Show all text content which contain p elements< /button>
< p >This is a paragraph.< /p >
< p >This is another paragraph.< /p >
< script >
$(document).ready(function(){
$("button").click(function(){
alert($("p").text());
});
});
< /script >
can only return or change the text content of an element.
An alert appears and shows text in paragraphs.
Inserting Content
.append();
$("button").click(function(){
$("p").append("< b >Appended text< /b >");
});
Insert content at the end of all < p > elements:
.appendTo();
$("button").click(function(){
$("< span >Hello World!< /span >").appendTo("p");
});
Insert a < span > element at the end of each < p > element:
.prepend();
$("button").click(function(){
$("p").prepend("Prepended text");
});
Insert content at the beginning of all < p > elements:
.prependTo();
$("button").click(function(){
$("< span >Hello World!< /span >").prependTo("p");
});
Insert a element at the beginning of each < p > element:.
.insertBefore();
$("button").click(function(){
$("Hello world!").insertBefore("p");
});
Insert a < span > element before each < p > element.
.insertAfter();
$("button").click(function(){
$("Hello world!").insertAfter("p");
});
Insert a < span > element after each < p > element.
Maniplulating Content
.wrap();
$("button").click(function(){
$("p").wrap("
");
});
Wrap a < div > element around each < p > element
.wrapAll();
$("button").click(function(){
$("p").wrapAll("
");
});
Wrap a < div > element around all < p > elements:.
.empty();
$("button").click(function(){
$("div").empty();
});
Remove the content of all < div > elements:.
.remove();
$("button").click(function(){
$("p").remove();
});
Remove all < p > elements:.
.replaceAll();
$("button").click(function(){
$("< h2 >Hello world!< /h2> ").replaceAll("p");
});
Replace all < p > elements with < h2 > elements:.
.replaceWith();
$("button").click(function(){
$("p:first").replaceWith("Hello world!");
});
Replace the first < p > element with new text:
Jquery Events
.on();
$("p").on("click", function(){
alert("The paragraph was clicked.");
});
Attach a click event to the < p > element:
off();
$("button").click(function(){
$("p").off("click");
});
Remove the click event for all < p > elements:.
.click();
$("div").css({"background-color":"red});
the background becomes red when the css is applied.
dbclick();
$("p").dblclick(function(){
alert("The paragraph was double-clicked");
});
Double-click on a < p > element to alert a text:.
mouseenter();
$("p").mouseenter(function(){
$("p").css("background-color", "yellow");
});
Set the background color to yellow,
when the mouse pointer enters a < p > element:
mouseleave();
$("p").mouseleave(function(){
$("p").css("background-color", "gray");
);
Set the background color to gray, when the mouse
pointer leaves a < p > element:
keyup();
$("input").keyup(function(){
$("input").css("background-color", "pink");
});
Set the background color of an < input >
field when a keyboard key is pressed up:
keydown);
$("input").keydown(function(){
$("input").css("background-color", "yellow");
});
Set the background color of an < input >
field when a keyboard key is pressed down:
hover();
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
Change the background color of a
< p > element when the mouse pointer hovers over it:.
Jquery Form Events
.focus();
$("input").focus(function(){
$("span").css("display", "inline").fadeOut(2000);
});
Attach a function to the focus event.
The focus event occurs when the < input > field gets focus:
blur();
$("input").blur(function(){
alert("This input field has lost its focus.");
});
Attach a function to the blur event.
The blur event occurs when the < input > field loses focus:.
change();
$("input").select(function(){
alert("Text marked!");
});
Alert a text when an < input > field is changed:.
select();
$("input").select(function(){
alert("Text marked!");
});
Alert a message when a text is selected inside a text field:.
submit();
$("form").submit(function(){
alert("Submitted");
});
Display an alert when a form is submitted: