jQuery

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".

$("#test").hide() - hides the element with id="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!!
});

dblclick()

$("p").dblclick(function(){
    $(this).hide();
});

mouseenter()

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

mouseleave()

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});

Mousedown()

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});

mouseup()

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});

hover()

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});

focus()

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});

blur()

$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});

on()

$("p").on("click", function(){
    $(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");
    }
});

jQuery hide() and show()

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});