What is jQuery?
jQuery is a concise and fast JavaScript library that can be used to simplify event handling, HTML document traversing, Ajax interactions and animation for speedy website development.
jQuery Syntax
Basic syntax is : $(selector).action()
- A $ sign to define/access jQuery
- A (selector)to "query (or find)" HTML elements
- A jQuery action() to be performed on the elements(s)
Examples :
- $ (this).hide() - hides the current elements.
- $ ("p").hide() - hides all <p> elements.
- $ (".test").hide() - hides all elements with class="test".
- $ ("#test").hide() - hides the elements with id="test".
Commonly Used jQuery Event Methods
- $(document).ready()
- click()
- dblclick()
- mouseenter()
- mouseleave()
- mousedown()
- mouseup()
- hover()
- focus()
- blur()
- on()
Examples :
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
< /script>
jQuery Effects
- jQuery Hide/Show
- hide()
- show()
- toggle()
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("#toggle").click(function(){
$("p").toggle();
});
});
</script>
- jQuery Fade
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
Examples :
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
- jQuery Slide
- slideDown()
- slideUp()
- slideToggle()
Examples :
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
- jQuery Animate
Examples :
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
- jQuery stop()
Examples :
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
- jQuery Callback
Examples :
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
jQuery HTML
jQuery Get
Three simple, but useful, jQuery methods for DOM manipulation are :- text ( ) - Sets or returns the text content of selected elements.
- html ( ) - Sets or returns the content of selected elements.
- val ( ) - Sets or returns the value of form fields.
Example :
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
jQuery Add
We will look at four jQuery methods that are used to add new content :
- append ( ) - Inserts content at the end of the selected elements.
Example : $("p").append("append");
- prepend ( ) - Inserts content at the beginning of the selected elements.
Example : $("p").prepend("prepend");
- after ( ) - Inserts content after the selected elements.
Example : $("img").after("after");
- before ( ) - Inserts content before the selected elements.
Example : $("img").before("before");
jQuery Remove
To remove elements and content, there are mainly two jQuery methods :
- remove ( ) - Removes the selected element.
Example : $("#div1").remove();
- empty ( ) - Removes the child elements from the selected element.
Example : $("#div1").empty();
jQuery CSS Classes
jQuery has several methods for CSS manipulation. We will look at the following methods :
});
});
jQuery has several methods for CSS manipulation. We will look at the following methods :
- addclass ( ) - Adds one or more classes to the selected elements.
Example : $("button").click(function(){
$("#div1").addClass("add");});
- removeclass ( ) - Removes one or more classes from the selected elements.
Example : $("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
$("h1, h2, p").removeClass("blue");
});
- toggleclass ( ) - Toggles between adding/removing classes from the selected elements.
Example : $("button").click(function(){
$("h1, h2, p").toggleClass("blue");});
- css ( ) - Sets or returns the style attribute.
Example : $("p").css("background-color", "yellow");
jQuery Dimension
jQuery has several important methods for working with dimensions :
- width ( )
- height ( )
- innerWidth ( )
- innerHeight ( )
- outerWidth ( )
- outerHeight ( )
No comments:
Post a Comment