Tut 4 - JQuery.pptx - Tutorial 4 jQuery Web Application...

Tutorial 4: jQuery
Web Application Design and
Development
(COMP 3421)
Dr. Lei Yang
[email protected]

Tutorial 4: roadmap
•
4.1 Introduction
•
4.2 jQuery Effects
•
4.3 jQuery HTML
•
4.4 jQuery Traversing
•
4.5 jQuery AJAX

4.1 Introduction


Recall: JavaScript is one of the 3 languages of web
development

jQuery is a lightweight JavaScript library (write less,
do more)

jQuery greatly simplifies JavaScript programming

jQuery is easy to learn
What is jQuery?
jQuery is probably the most popular and extendable JavaScript
library. Many of the biggest companies on the web use jQuery,
such as Google, Microsoft and IBM. jQuery will run exactly the
same in all major browsers.


Download the jQuery library from jQuery.com

Production version - this is for your live website because
it has been minified and compressed

Development version - this is for testing and
development (uncompressed and readable code)

Include jQuery from a CDN, like Google
Add jQuery to your Web Pages
< head >
< script src ="jquery-3.4.1.min.js">< /script >
< /head >
< head >
< script src ="
jquery.min.js">< /script >
< /head >


The jQuery syntax is tailor-made for selecting
HTML elements and performing some action on
the element(s).

Basic syntax is: $(selector).action()

A $ sign to define/access jQuery

A (selector) to "query (or find)" HTML elements

A jQuery action() to be performed on the element(s)
jQuery Syntax
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

jQuery Syntax
•
You might have noticed that all jQuery methods in
our examples, are inside a document ready event
•
This is to prevent any jQuery code from running
before the document is finished loading (is ready).
•
It is good practice to wait for the document to be
fully loaded and ready before working with it. This
also allows you to have your JavaScript code before
the body of your document, in the head section.
7
$(document).ready( function (){
// jQuery methods go here...
});


jQuery selectors allow you to select and manipulate HTML
element(s). It's based on the existing CSS Selectors, and in
addition, it has some own custom selectors.

The element selector

The #id selector

The .class selector
jQuery Selectors
$(document).ready( function (){
$( "button" ).click( function (){
$( ".test" ).hide();
});
});
$(document).ready( function (){
$( "button" ).click( function (){
$( "p" ).hide();
});
});
$(document).ready( function (){
$( "button" ).click( function (){
$( "#test" ).hide();
});
});
ilename=tryjquery_hide_p
?
filename=tryjquery_hide_id
lename=tryjquery_hide_class

jQuery Selectors
9
Syntax Description Example
$("*") Selects all elements
Try it
$(this) Selects the current HTML element
Try it
$("p.intro") Selects all <p> elements with class="intro"
Try it
$("p:first") Selects the first <p> element
Try it
$("ul li:first") Selects the first <li> element of the first <ul>
Try it
$("ul li:first-child") Selects the first <li> element of every <ul>
Try it
$("[href]") Selects all elements with an href attribute
Try it