jQuery Fundamentals
Post on 10-May-2015
3059 Views
Preview:
DESCRIPTION
Transcript
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
top related