jQuery Fundamentals

Gil FinkSenior Architect

SELA

jQuery Fundamentals

www.devconnections.com

JQUERY FUNDAMENTALS

AGENDA

Introduction to jQuery Selectors DOM Interactions Ajax Support Plugins

www.devconnections.com

JQUERY FUNDAMENTALS

WHAT IS JQUERY?

Open-Source and lightweight JavaScript library

Cross-browser support

DOM interaction

Ajax

Provides useful alternatives for common programming tasks (CSS, HTML)

Rich plugins eco-system

3

www.devconnections.com

JQUERY FUNDAMENTALS

JQUERY USAGE STATISTICS

4

http://trends.builtwith.com/javascript/jQuery

Websites using jQuery

www.devconnections.com

JQUERY FUNDAMENTALS

5

GETTING STARTED

Download the latest version from http://www.jquery.com

Reference the jQuery script

jQuery can be found on major CDNs (Google, Microsoft)

<script type=‘text/javascript’ src=‘jquery.min.js’></script>

<script type=‘text/javascript’ src=‘http://ajax.googleapis.com/ajax/libs/jquery/[version –number]/jquery.min.js’></script>

www.devconnections.com

JQUERY FUNDAMENTALS

DEMO

Setting up the environment

www.devconnections.com

JQUERY FUNDAMENTALS

7

JQUERY SYNTAX

$.func(…);

or

$(selector).func1(…).func2(…).funcN(…);

jQuery Object, can be used instead of jQuery

Selector syntax, many different selectors allowed

Chainable, most functions return a jQuery object

Function parameters

$

selector

func

(…)

www.devconnections.com

JQUERY FUNDAMENTALS

8

THE MAGIC $() FUNCTION

Create HTML elements on the fly Manipulate existing DOM elements Selects document elements The full name of $() function is jQuery()

may be used in case of conflict with other frameworks

var el = $(“<div/>”)$(window).width()$(“div”).hide();

www.devconnections.com

JQUERY FUNDAMENTALS

9

JQUERY’S PROGRAMMING PHILOSOPHY

GET >> ACT

$(“div”).hide()$(“<span/>”).appendTo(“body”)$(“:button”).click()

www.devconnections.com

JQUERY FUNDAMENTALS

10

FLUENT API

Almost every function returns the jQuery object

Enables the chaining of function calls

$(“div”).show() .addClass(“main”) .html(“Hello jQuery”);

www.devconnections.com

JQUERY FUNDAMENTALS

11

THE READY FUNCTION

Use $(document).ready() to detect when a page is loaded and ready to use

Called once the DOM hierarchy is loaded to the browser memory

// First option$(document).ready(function() {

// perform the relevant action after the page is ready to use});

// Second option$(function() {

// perform the relevant action after the page is ready to use});

www.devconnections.com

JQUERY FUNDAMENTALS

DEMO

The ready Function

www.devconnections.com

JQUERY FUNDAMENTALS

13

JQUERY SELECTORS

Selectors allow the selection of page elements

Single or multiple elements are supported

A selector identifies an HTML element that will be manipulated later on with jQuery code

www.devconnections.com

JQUERY FUNDAMENTALS

14

BASIC SELECTORS

$(‘#id’) – get element by id $(‘.className’) – get element/s by a

class name $(‘elementTagName’) – get element/s

by a tag name

www.devconnections.com

JQUERY FUNDAMENTALS

15

MORE SELECTOR OPTIONS

$(‘element element’) - descendants $(‘element > element’) - children $(‘element1+ element2’) – next

element $(‘element:first’) - first element $(‘element:last’) - last element

www.devconnections.com

JQUERY FUNDAMENTALS

16

MORE SELECTOR OPTIONS

$(“element[attributeName]”) - has attribute $(“element[attributeName=‘attributeValue’]”) -

equals to $(“element[attributeName^=‘attributeValue’]”)

- starts with $(“element[attrinuteName$=‘attributeValue’]”)

- ends with $(“element[attributeName*=‘attributeValue’]”)

- contains

www.devconnections.com

JQUERY FUNDAMENTALS

DEMO

Selectors

www.devconnections.com

JQUERY FUNDAMENTALS

18

DOM TRAVERSAL

jQuery has a variety of DOM traversal functions

The functions help to select DOM elements

Offer a great deal of flexibility

Allow to act upon multiple sets of elements in a single chain

Can be combined with Selectors to create an extremely powerful selection toolset

www.devconnections.com

JQUERY FUNDAMENTALS

19

TRAVERSING THE DOM

There are many jQuery functions to traverse elements

.next(expr) // next sibling

.prev(expr) // previous sibling

.siblings(expr) // siblings

.children(expr) // children

.parent(expr) // parent

.find(selector) // find inner elements with the given selector

www.devconnections.com

JQUERY FUNDAMENTALS

DEMO

DOM Traversal

www.devconnections.com

JQUERY FUNDAMENTALS

21

DOM CREATION

Passing a HTML snippet string as the parameter to $() will result in new in-memory DOM element/s

Then, a jQuery object that refers to the element/s is created and returned

$('<p>My new paragraph</p>').appendTo('body'); // append a new paragraph to the html

body

$('<a></a>'); // create a new anchor$('<img />'); // create a new image$('<input>'); // create a new input type

www.devconnections.com

JQUERY FUNDAMENTALS

DEMO

DOM Creation

www.devconnections.com

JQUERY FUNDAMENTALS

23

DOM MANIPULATION

jQuery includes ways to manipulate the DOM

The manipulation can be: To change one of the element’s attributes

Set an element's style properties

And even modify the entire elements

www.devconnections.com

JQUERY FUNDAMENTALS

24

DOM MANIPULATION BASIC FUNCTIONS

.html(“html”) – set the element/s innerHTML to the given html

.text(“text”) – set the element/s textContent to the given text

.val(“value”) - set the current value of the element/s to the given value

.append, .prepend – append or prepend the given element to the selected element

.empty() – remove all children .remove() – removes the selected element from

the DOM

www.devconnections.com

JQUERY FUNDAMENTALS

DEMO

DOM Manipulation

www.devconnections.com

JQUERY FUNDAMENTALS

26

EVENTS

jQuery includes cross-browser ways to bind events to event listeners

.bind() – event is bound to an element

.on() – event is bound to an element

Specific event registration .click(callback)

.dblclick(callback)

And many other specific event functions

www.devconnections.com

JQUERY FUNDAMENTALS

DEMO

Working with Events

www.devconnections.com

JQUERY FUNDAMENTALS

28

AJAX

Ajax – Asynchronous JavaScript and XML

www.devconnections.com

JQUERY FUNDAMENTALS

29

JQUERY AJAX FUNCTIONS

jQuery allows Ajax requests: Allow partial rendering

Cross-browser support

Simple API

GET and POST support

Load JSON, XML, HTML or even scripts

www.devconnections.com

JQUERY FUNDAMENTALS

30

JQUERY AJAX FUNCTIONS – CONT.

jQuery provides functions for sending and receiving data:

$(selector).load – load HTML data from the server

$.get() and $.post() – get raw data from the server

$.getJSON() – get/post and return data in JSON format

$.ajax() – provide core functionality for Ajax requests

jQuery Ajax functions work with web services, REST interfaces and more

www.devconnections.com

JQUERY FUNDAMENTALS

DEMO

Ajax

www.devconnections.com

JQUERY FUNDAMENTALS

32

PLUGINS

jQuery eco-system includes a big variety of plugins

jQueryUI – widgets/animation/UI interaction

jqGrid – grid based on jQuery

jqTree – tree based on jQuery

And more

You can write your own plugin by assigning it to $.fn

Remember to return jQuery in order to allow chaining

www.devconnections.com

JQUERY FUNDAMENTALS

DEMO

Writing a Simple Plugin

www.devconnections.com

JQUERY FUNDAMENTALS

34

PERFORMANCE TIPS

Use chaining as much as possible DOM manipulation is expensive Cache selected elements if you need to use

them later Selector performance (from fastest to

slowest): Id

Element

Class

Pseudo

www.devconnections.com

JQUERY FUNDAMENTALS

QUESTIONS

www.devconnections.com

JQUERY FUNDAMENTALS

SUMMARY

jQuery is an open source, cross-browser and lightweight JavaScript library

It includes a huge plugins eco-system It brings a lot of fun for JavaScript

development

www.devconnections.com

JQUERY FUNDAMENTALS

RESOURCES

Session slide deck and demos – http://sdrv.ms/1e4J2sM

jQuery Website – http://www.jquery.com

My Website – http://www.gilfink.net Follow me on Twitter – @gilfink

www.devconnections.com

JQUERY FUNDAMENTALS

THANK YOUGil FinkSenior Architect gilf@sela.co.il@gilfinkhttp://www.gilfink.net