Basic Syntax Is: $ (Selector) .Action : $ (Document) .Ready (Function (// Jquery Methods Go Here... ) )
Basic Syntax Is: $ (Selector) .Action : $ (Document) .Ready (Function (// Jquery Methods Go Here... ) )
Basic Syntax Is: $ (Selector) .Action : $ (Document) .Ready (Function (// Jquery Methods Go Here... ) )
Examples:
$(document).ready(function(){
});
This is to prevent any jQuery code from running before the document is finished
loading (is ready).
Syntax Description
$("ul li:first") Selects the first <li> element of the first <ul>
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$("p").click();
Ex-
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr
ipt>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
</body>
</html>
Ex-2
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "cyan");
});
$("input").blur(function(){
$(this).css("background-color", "yellow");
});
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
With jQuery, you can toggle between the hide() and show() methods with the
toggle() method.
$(selector).toggle(speed,callback);
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
The jQuery fadeTo() method allows fading to a given opacity (value between 0
and 1).
$(selector).fadeTo(speed,opacity,callback);
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
Ex- <!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr
ipt>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: block;
}
</style>
</head>
<body>
</body>
</html>
$(selector).animate({params},speed,callback);
$("div").animate({left: '250px'});
The stop() method works for all jQuery effect functions, including sliding, fading
and custom animations.
$(selector).stop(stopAll,goToEnd);
Ex- $("#stop").click(function(){
$("#panel").stop();
});
Practise Example-
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();});
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
$(document).ready(function(){
$(".d").on({mouseenter:function(){
$(this).css("background","lightgray");},
mouseleave:function(){
$(this).css("background","lightblue");},
click: function(){
$(this).css("background-color", "yellow");
});
});
$(document).ready(function(){
$("#hideb").click(function(){
$(".hide").hide(function(){
});});
$("#showb").click(function(){
$(".hide").show();});
$("#hideb1").click(function(){
$(".hide").hide(1000);});
$("#showb1").click(function(){
$(".hide").show(1000);});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<br/>
<hr>
<hr>
<hr>
<hr>
<button id ="hideb">Hidebutton</button>
<button id="showb">Showbut</button>
<button id ="hideb1">Hidebutton1</button>
<button id="showb1">Showbut1</button>
</body>
</html>
Add New HTML Content
We will look at four jQuery methods that are used to add new content:
Remove Elements/Content
To remove elements and content, there are mainly two jQuery methods:
The following example returns all <p> elements with class name "intro":
Example
$(document).ready(function(){
$("p").filter(".intro");
});
The following example returns all <p> elements that do not have class name
"intro":
Example
$(document).ready(function(){
$("p").not(".intro");
});
Method Description
clearQueue() Removes all remaining queued functions from the selected elements
delay() Sets a delay for all queued functions on the selected elements
dequeue() Removes the next function from the queue, and then executes the function
finish() Stops, removes and completes all queued animations for the selected elements
The following table lists all the jQuery methods used to handle events.
delegate() Attaches a handler to current, or future, specified child elements of the matching elements
die() Removed in version 1.9. Removes all event handlers added with the live() method
error() Deprecated in version 1.8. Attaches/Triggers the error event
event.currentTarget The current DOM element within the event bubbling phase
event.data Contains the optional data passed to an event method when the current executing handler is bound
event.delegateTarget Returns the element where the currently-called jQuery event handler was attached
event.isDefaultPrevent Returns whether event.preventDefault() was called for the event object
ed()
event.isImmediateProp Returns whether event.stopImmediatePropagation() was called for the event object
agationStopped()
event.isPropagationSto Returns whether event.stopPropagation() was called for the event object
pped()
event.namespace Returns the namespace specified when the event was triggered
event.pageX Returns the mouse position relative to the left edge of the document
event.pageY Returns the mouse position relative to the top edge of the document
event.result Contains the last/previous value returned by an event handler triggered by the specified event
event.stopPropagation Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notifie
()
event.timeStamp Returns the number of milliseconds since January 1, 1970, when the event is triggered
event.which Returns which keyboard key or mouse button was pressed for the event
live() Removed in version 1.9. Adds one or more event handlers to current, or future, selected elements
load() Deprecated in version 1.8. Attaches an event handler to the load event
one() Adds one or more event handlers to selected elements. This handler can only be triggered once per ele
$.proxy() Takes an existing function and returns a new one with a particular context
toggle() Removed in version 1.9. Attaches two or more functions to toggle between for the click event
unload() Deprecated in version 1.8. Attaches an event handler to the unload event