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>

About jQuery

offers the 'jQuery' function
short version of this function - $
when you call $() - it returns a jQuery object

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() – remove all event handlers from selected elements

$(selector).on(“event1 event2..”, function() { …});
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”);
$(“#div1”).toggleClass(“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();