The jQuery library
advertisement
The jQuery library
What is jQuery ?
A javascript lightweight library
Is very easy to use
Is powerful
Is cross-browser compatible
Downloadable from jQuery.com, 2 versions (a
production version and a development version)
jQuery features
DOM structure/nodes and CSS manipulation
CSS-like selectors
Strong event handling support
Effects, transitions and animations
AJAX and simple data support
Javascript utility methods
Linking to the jQuery library
Use a downloaded version:
<head>
<script src=jquery.min.js></script>
</head>
Use an online version:
<head>
<script src=“//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
<script>
</head>
jQuery code location
$(document).ready(function() {
… jquery code ..
});
the document ready event is fired when the DOM is
fully loaded
a short-hand alternative:
$(function() {
… jquery code ..
});
jQuery method call syntax
methods called on jQuery selections are in the $.fn
namespace, and automatically receive and return the
selection as this.
Ex.: $(“p”).html(“Test paragraph”);
$(“div#id”).remove();
methods in the $ namespace are generally utility-type
methods, and do not work with selections
Ex.: $.each([ "foo", "bar", "baz" ], function( idx, val ) {
console.log( "element " + idx + " is " + val );
});
Methods called on jQuery selections
Simple syntax: $(selector).action(params)
Ex.: $(“div.class1”).hide();
Chain syntax:
$(selector).action1(params).action2(params)…
Ex.:
$( "#content" ).find( "h3" ).html( "new text for the h3!" );
or
$( "#content" )
.find( "h3" )
.html( "new text for the third h3!" );
these methods return the jQuery object
jQuery selectors
Has a CSS-like syntax for selectors:
$(“*”) – selects all elements
$(“#someid”) – selects element with ID attribute=someid
$(“.someclass”) – selects element with Class attribute=someclass
$(“div”) – selects all the DIV elements
$(“.class1.class2”) – selects elements with classes class1 and class2
$(“div p”) – selects all <p> elements that are inside a <div>
$(“p:first”) – selects the first p element
$(“p:last”) – selects the last p element
$(“tr:even”) – selects all even tr elements
$(“tr:odd”) – selects all odd tr elements
$(“ul li:eq(2)”) - selects the 3rd element from an unordered list
$(“:contains(‘some text’)”) – select all elements containing the text
jQuery Selectors (2)
$(this) – selects the current html element
$(“#div1 ul li .innerdiv”) – compound CSS selector
$(“h1,h2,h3”) – selects all h1, h2 or h3 elements
$(“div:first-child”) – selects div elements that are the first child of
their parents
$(“div:first-of-type”) - selects div elements that are the first div
child of their parents
$(“div:last-child”) - selects div elements that are the last child of
their parents
$(“div:last-of-type”) - selects div elements that are the last div child
of their parents
$(“div:nth-child(3)”) - selects div elements that are the 3rd child of
their parents
$(“div:nth-of-type(3)”) - selects div elements that are the 3rd div
child of their parents
$(“div > p”) – selects elements p which are direct child of a div
jQuery Selectors (3)
$("div + p") – selects p elements that are the nearest siblings of a
div element
$("div ~ p") – selects p elements that are siblings of div elements
$("ul li:eq(3)") – selects list elements with a list index of 3
$("ul li:gt(3)") – selects list elements with a list index greater than 3
$("ul li:lt(3)") – selects list elements with a list index less than 3
$(“[attribute]”) – selects elements with a specific attribute
$(“[attribute=value]”) – selects elements having an attribute equal
to a specific value
$(“[attribute!=value]”) - selects elements having an attribute
different than a specific value
$(“[attribute$=value]”) - selects elements with an attribute ending
with a specific value
$(“[attribute^=value]”) - selects elements with an attribute starting
with specific value
$(“[attribute*=value]”) – attribute contains value
jQuery events
has support for most html events
mouse events: click(), dblclick(), focus(), focusin(),
focusout(), blur(), hover(), mousedown(), mouseenter(),
mouseleave(), mousemove(), mouseout(), mouseover(),
mouseup()
keyboard events: keypress(), keyup(), keydown()
form events: submit(), change()
window events: load(), resize(), ready(), scroll(),
unload()
Binding events to handling functions
$(selector).event(function() { …. });
Ex.: $(“div”).dblclick(function() {
$(this).hide();
});
$(selector).bind(“event”, function() { … });
Ex.: $(“li”).bind(“click”, function() {
console.log(“list item was clicked”);
});
$(selector).unbind()
$(selector).on(“event1 event2..”, function() { …});
elements
– remove all event handlers from selected
Ex.: $(“p”).on(“click”, function() { $(this).css(“background-color: red”);
});
$(selector).off(“event”)
$(selector).one(“event”, function) – run event only once
The jquery event object
is passed to the event handling function along with this
(the selected element)
$(“form”).on(“submit”, function(eventObj) {
// cancel default functionality for specific event (e.g. form submit)
eventObj.preventDefault();
… });
properties of eventObj:
pageX, pageY – mouse position
type – type of event
data – data can be passed to handling function when evt is bound
target – DOM element that initiated the event
jQuery and css
getting css properties: $(“p”).css(“background-color”)
setting css properties: $(“p”).css(“font-size”, “14px”)
$(“p”).css({color: “red”, width: “100%”, height:
“100%”})
adding, removing, toggling css classes:
css code: .fancy {
border: 1px dotted #00eeff;
background: url(“pic.jpg”);
}
jquery code: $(“#div1”).addClass(“fancy”);
$(“#div1”).removeClass(“fancy”);
jQuery effects – hide/show
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
where speed is “slow”, “fast” or miliseconds and callback is a function
called after the effect is done; toggle() toggles between hide() and
show()
Ex.:
$("button").click(function(){
$(“p”).hide(20);
$(“p#id1”).show(“slow”);
});
$("button").click(function(){
$("p").toggle();
});
jQuery effects - fading
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
where speed is “slow”, “fast” or miliseconds and callback is a function
called after the effect is done; fadeTo() fades to an opacity
Ex.: $(“button”).click(function() {
$(“#div1”).fadeIn(“2000”);
});
jQuery effects - sliding
$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideToggle(speed,callback);
where speed is “slow”, “fast” or miliseconds and callback is a function
called after the effect is done;
Ex.: $(“button”).click(function() {
$(“#div1”).slideUp(“2000”);
});
jQuery effects - animations
$(selector).animate({params},speed,callback);
where speed is “slow”, “fast” or miliseconds and callback is a function
called after the effect is done;
Ex.: $(“button”).click(function() {
$(“#div1").animate({left:’100px’, top: ’75px’});
});
$(“button”).click(function() {
$(“#div1”).animate({
left: ‘500px’,
opacity: ‘0.3’,
height: ‘100px’,
width: ’60px’
});
});
Getting/setting html content
text() - sets or returns the text content of selected
elements
console.log($(“p”).text());
$(“p”).text(“Test..”);
html() - sets or returns the content of selected elements
(including HTML markup)
console.log($(“div”).html());
$(“div”).html(“<p>Test</p>”);
val() - sets or returns the value of form fields
attr() – get or set attribute values
console.log($(“a#id1”).attr(“href”));
$(“a#id1”).attr(“href”, “http://www.cs.ubbcluj.ro”);
Adding/removing html content
$("p").append("Some appended text.");
$("p").prepend("Some appended text.");
$("p").after(“<div>test</div>");
$("p").before(“<div>test</div>");
$("p").remove();
$("p").empty();
