jQuery
What is jQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.
The jQuery library contains the following features:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
Adding jQuery to Your Web Pages
<script
src="jquery-1.12.0.min.js"></script>
OR
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
OR
<script
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
jQuery Syntax
$(this).hide() - hides the current element.$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
jQuery Selectors
|
$("*")
|
Selects all elements
|
|
$("#p")
|
Selects id=”p” elements
|
|
$(".p")
|
Selects class=”p” elements
|
|
$(this)
|
Selects the current HTML element
|
|
$("p.intro")
|
Selects all <p> elements
with class="intro"
|
|
$("p:first")
|
Selects the first <p>
element
|
|
$("ul li:first")
|
Selects the first <li>
element of the first <ul>
|
|
$("ul li:first-child")
|
Selects the first <li>
element of every <ul>
|
|
$("[href]")
|
Selects all elements with an href
attribute
|
|
$("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"
|
|
$(":button")
|
Selects all <button>
elements and <input> elements of type="button"
|
|
$("tr:even")
|
Selects all even <tr>
elements
|
|
$("tr:odd")
|
Selects all odd <tr>
elements
|
jQuery Event
|
Mouse Events
|
Keyboard Events
|
Form Events
|
Document/Window
Events
|
|
click
|
keypress
|
submit
|
load
|
|
dblclick
|
keydown
|
change
|
resize
|
|
mouseenter
|
keyup
|
focus
|
scroll
|
|
mouseleave
|
|
blur
|
unload
|
Click()
$("p").click(function(){
// action goes here!!
});
// action goes here!!
});
dblclick()
$("p").dblclick(function(){
$(this).hide();
});
$(this).hide();
});
mouseenter()
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
alert("You entered p1!");
});
mouseleave()
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
alert("Bye! You now leave p1!");
});
Mousedown()
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
alert("Mouse down over p1!");
});
mouseup()
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
alert("Mouse up over p1!");
});
hover()
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus()
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$(this).css("background-color", "#cccccc");
});
blur()
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
$(this).css("background-color", "#ffffff");
});
on()
$("p").on("click", function(){
$(this).hide();
});
$(this).hide();
});
Multiple
Function
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
jQuery hide() and show()
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
