jquery fundamentals

Gil FinkSenior Architect

SELA

jQuery Fundamentals

www.devconnections.com

JQUERY FUNDAMENTALS

AGENDA

Introduction to jQuery Selectors DOM Interactions Ajax Support Plugins


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


JQUERY FUNDAMENTALS

JQUERY USAGE STATISTICS

4

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

Websites using jQuery


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>

http://www.jquery.com/



JQUERY FUNDAMENTALS

DEMO

Setting up the environment


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

(…)


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();


JQUERY FUNDAMENTALS

9

JQUERY’S PROGRAMMING PHILOSOPHY

GET >> ACT

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


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”);


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});


JQUERY FUNDAMENTALS

DEMO

The ready Function


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


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


JQUERY FUNDAMENTALS

15

MORE SELECTOR OPTIONS

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

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


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


JQUERY FUNDAMENTALS

DEMO

Selectors


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


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


JQUERY FUNDAMENTALS

DEMO

DOM Traversal


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


JQUERY FUNDAMENTALS

DEMO

DOM Creation


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


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


JQUERY FUNDAMENTALS

DEMO

DOM Manipulation


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


JQUERY FUNDAMENTALS

DEMO

Working with Events


JQUERY FUNDAMENTALS

28

AJAX

Ajax – Asynchronous JavaScript and XML


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


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


JQUERY FUNDAMENTALS

DEMO

Ajax


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


JQUERY FUNDAMENTALS

DEMO

Writing a Simple Plugin


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


JQUERY FUNDAMENTALS

QUESTIONS


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


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

http://sdrv.ms/1e4J2sM

http://sdrv.ms/1e4J2sM


http://www.gilfink.net/


JQUERY FUNDAMENTALS

THANK YOUGil FinkSenior Architect [email protected]@gilfinkhttp://www.gilfink.net

jquery fundamentals

Technology

jquery script jquery

jquery functions

htmlhello jquery

jquery code

jquery fundamentals

jquery selector syntax

funcn jquery object

memory dom elements