jQuery Basics

IT 4403 Advanced Web and Mobile

Applications

Jack G. Zheng
Fall 2019
Overview
l Client side JavaScript frameworks
l jQuery overview
l jQuery basics and examples
l jQuery family resources

2
JavaScript Library
l Why libraries/frameworks?
l “Advanced JavaScript programming (especially the
complex handling of browser differences), can often be
very difficult and time-consuming to work with.”
l Libraries or frameworks promotes reusability and best
practices
l What are the common libraries?
l http://jster.net
l http://en.wikipedia.org/wiki/List_of_JavaScript_libraries
l http://en.wikipedia.org/wiki/Comparison_of_JavaScript_fra
meworks
l https://www.similartech.com/categories/javascript
l https://www.sitepoint.com/top-javascript-frameworks-
libraries-tools-use/

3
Popularity – Why jQuery
Data source:
https://www.similartech.com/categories/javascript

Data source:
• http://w3techs.com/technologies/overview/javascript_library/all
• http://w3techs.com/technologies/cross/javascript_library/ranking 4
jQuery Overview
l What is jQuery?
l jQuery is a JavaScript library designed to simplify
and enrich the client-side scripting.
l http://jquery.com
l Quick facts
l Initial released on August 26, 2006
l Current stable versions: 3.4.1 (as of Aug 27, 2019)
l Cross platform - http://jquery.com/browser-support/
l Light weight - Only about 30KB minified and
compressed.
l http://en.wikipedia.org/wiki/JQuery

5
jQuery Features and Advantages
l Non-obtrusive scripting
l Separates JavaScript and HTML completely: Instead of using HTML attributes to call JavaScript
functions for event handling, jQuery can be used to handle events purely in JavaScript.
l jQuery provides a new paradigm for event handling. The event assignment and the event callback
function definition are done in a single step in a single location in the code.
l https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

l Eliminates cross-browser incompatibilities

l The JavaScript engines of different browsers differ slightly so JavaScript code that works for one
browser may not work for another. jQuery handles all these cross-browser inconsistencies and
provides a consistent interface that works across different browsers.

l A simple, clean, powerful syntax

l Easy to select and manipulate DOM elements and CSS styles. jQuery uses the CSS3 selector
specification for selecting elements.
l Allow you to chain actions and effects together for efficient code. It is quite common to replace a
dozen or more lines of JavaScript with a single line of jQuery code.

l Reusability
l Provides many functions that simplify highly-used JavaScript functionalities like UI effects, string
processing, parse JSON data, AJAX, etc.

l Extensible
l New events, elements, and methods can be easily added and then reused as a plugin.

6
Basic jQuery Usages
l HTML DOM/CSS manipulation
l Provide simpler ways to work with HTML and CSS
elements dynamically
l HTML event methods
l Provide a better way to handle events
l Simple effects and animations
l Provide simple function call for commonly used effects
and animations, such as show/hide, transition, etc.
l AJAX
l Provide more efficient way to handle AJAX calls
l Utility functions
l More functions to handle common tasks
7
Referencing jQuery Library
l Two basic ways used with the <script> tag
l Download the jQuery library files from jQuery.com and include it in
your website.
l Include jQuery from a CDN directly and have the CDN site to serve
jQuery library files.
l http://www.w3schools.com/jquery/jquery_get_started.asp
l CDN (content delivery network)
l A centralized service to provide commonly and publicly used script
libraries
l Faster and more reliable than self-hosting

l Common CDN for jQuery

l http://code.jquery.com
l https://cdnjs.com
l https://developers.google.com/speed/libraries/
l More: http://www.cdnperf.com

8
jQuery Basic Syntax
l Basic syntax is: $(selector).action()
l A $ sign to define/access jQuery
l A (selector) to "query (or find)" HTML elements
l A jQuery action() to be performed on the element(s)
l Examples

l jQuery syntax style statements can be mixed with

vanilla (traditional) JavaScript statements.
l http://www.w3schools.com/jquery/jquery_syntax.asp
9
Selectors
l jQuery selectors allow you to select and manipulate
HTML element(s).
l Based on CSS selectors with additional custom ones
l Apply methods to all elements that satisfy the selector
definition
l All selectors in jQuery start with the dollar sign and
parentheses: $().
l Three main types of selectors
l HTML tag based
l Class based
l Id based
l http://www.w3schools.com/jquery/jquery_selectors.asp
l Reference https://api.jquery.com/category/selectors/

10
jQuery Events
l Events represents a pre-defined action that happens with a target
l Examples – (full list of events: http://api.jquery.com/category/events/)

Mouse Events Keyboard Events Form Events Document/Window Events

click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

l jQuery provides simple methods for attaching event handlers to selections.

When an event occurs, the provided function is executed. Inside the
function, this refers to the element that was clicked.
l Use a anonymous function to handle events directly
l Or use a refereed named function

l Events
l http://www.w3schools.com/jquery/jquery_events.asp

11
Anonymous Function
l Aligned format style Mouse click event

$("p").click
( Anonymous function to
function() handle the event (when
mouse button clicked)
{
// statements goes here!!
}
);

l Shorthand format style

$("p").click(function(){
// statements goes here!!
});

12
Document Ready Event
l Better to put all scripts inside the document ready event
to prevent any jQuery code from running before the
document is finished loading (is ready).
l Except for defining functions
l https://learn.jquery.com/using-jquery-core/document-
ready/

$(document).ready(function(){ $(function(){

// jQuery methods go here... });

});

function dothis() Shorthand version

{ … } for this event
Regular JS functions
are still outside the
event handler.
13
Working with HTML DOM and CSS
l Using selectors and DOM methods can dynamically read and
change web page content and style.
l Get and set HTML elements and attributes (text, html, val, attr)
l http://www.w3schools.com/jquery/jquery_dom_get.asp
l http://www.w3schools.com/jquery/jquery_dom_set.asp
l Add and remove elements dynamically
l http://www.w3schools.com/jquery/jquery_dom_add.asp
l http://www.w3schools.com/jquery/jquery_dom_remove.asp
l Working with CSS style
l Get and set CSS attributes:
http://www.w3schools.com/jquery/jquery_css.asp
l Work with CSS class:
http://www.w3schools.com/jquery/jquery_css_classes.asp
l Work with the CSS box model:
http://www.w3schools.com/jquery/jquery_dimensions.asp

14
Effects
l jQuery provides efficient functions to add simple
effects to your page.
l Hide, show
l Slide
l Fading
l Animate

l https://learn.jquery.com/effects/intro-to-effects/

15
jQuery Examples
Some examples are provided to compare the coding with
traditional JavaScript and jQuery. The examples are provided in
D2L and hosted at http://it4203.jackzheng.net/demo/jquery/

Example file names Description

1.calculation.html Basic use and syntax (jQuery reference,
2.loop.html document ready, selector, functions)
3.function.html

4.dom-get.html Getting content and attribute values

5.click.html Event handling and dynamic content

6.css.html Styles manipulation

16
Advanced Features
l Callback
l http://www.w3schools.com/jquery/jquery_callback.asp

l Chaining
l http://www.w3schools.com/jquery/jquery_chaining.asp

l Code organization
l https://learn.jquery.com/code-organization/

l Advanced event handling

l https://learn.jquery.com/events/
l http://api.jquery.com/category/events/event-object/

17
jQuery Family
l jQuery UI
l A set of user interface interactions, effects, widgets, and themes built
on top of the jQuery
l http://jqueryui.com
l jQuery Mobile
l An HTML5-based user interface framework to build sites and apps
targeting mobile devices. This framework provides a set of touch-
friendly UI widgets and an AJAX-powered navigation system.
l http://jquerymobile.com

l jQuery Plugins
l https://www.npmjs.com/browse/keyword/jquery-plugin
l http://jquer.in
l Other projects from jQuery Foundation
l https://jquery.org/projects

18
Vanilla JavaScript
l VanillaJS is a name to refer to using plain
JavaScript without any additional libraries like
jQuery.
l See some opposite opinions on using jQuery
l https://snipcart.com/blog/learn-vanilla-javascript-
before-using-js-frameworks

l For more resources

l http://vanilla-js.com
l https://plainjs.com

19
More Resources
l Learning resources
l http://www.w3schools.com/jquery/
l http://www.codecademy.com/tracks/jquery
l http://learn.jquery.com
l http://try.jquery.com
l http://jqfundamentals.com
l http://www.jquery-tutorial.net

l Video tutorials
l https://www.youtube.com/playlist?list=PLoYCgNOIyGABdI2V8I_SWo22tFpgh2s6_
l https://www.youtube.com/playlist?list=PLIoX3-mcY80gRbIVp1CJMGG3B0mOd9kDo

l References
l http://api.jquery.com
l http://jqapi.com

l Comments and discussions

l Common Pitfalls of jQuery http://www.codeproject.com/Articles/346904/Common-
Pitfalls-of-jQuery
l http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
l http://blog.wearecolony.com/a-year-without-jquery/

20