Javascript

1. JQUERY
Chapter 10

2. What is jQuery?
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
Introduced in 2006
Makes it easier for DOM manipulation

3. What is jQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on
your website.
jQuery takes a lot of common tasks that require many lines of
JavaScript code to accomplish, and wraps them into methods that you
can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript,
like AJAX calls and DOM manipulation.
The jQuery library contains the
following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
Tip: In addition, jQuery has plugins for almost any task out there.

4. Why jQuery?
◦ There are lots of other JavaScript libraries out there, but jQuery is
probably the most popular, and also the most extendable.
◦ Many of the biggest companies on the Web use jQuery, such as:
◦ Google
◦ Microsoft
◦ IBM
◦ Netflix

5. Will jQuery work in all browsers?
The jQuery team knows
all about cross-browser
issues, and they have
written this knowledge
into the jQuery library.
jQuery will run exactly
the same in all major
browsers.
Most 3rd party JS
frameworks are built on
jQuery

6. Why use a 3rd
party library?
Removes headaches associated
with cross-browser Javascript
Removes writing code that
works
Allows more programmers to
provide advanced features –
drag&drop, animations, etc

7. Why AVOID 3rd
party libraries?
Performance concerns – just consider the load time for browser to
download hundreds of routines that won’t be used
Privacy concerns – can you guarantee to your user base what will and
will not be shared with the third parties?
Security concerns – same concerns as privacy; could you be liable to a
law suite?
Unpredictability – do you understand what it does in all situations;
what happens if/when it changes?
Here’s a great tool for Chrome to
help you better understand what’s
going on under the hood
https://developers.google.com/web/tool
s/chrome-devtools
Try it out on some of your favorite
websites
Here is an EXCELLENT short
article on this issue – I highly
recommend it to you
https://medium.com/@PepsRyuu/why-
you-should-reconsider-using-third-party-
javascript-libraries-fc9787b3fb44

8. Is jQuery still
relavent?
◦ Although the library is gradually losing grounds, it is still
relevant. There are many websites that use it. JQuery is still
in use on a staggering 77 percent of the top 1 million
websites, according to BuiltWith.
◦ Current version is 3.4.1
◦ Place to go - https://jquery.com/download/
◦ Can be used without download
◦ <script
◦ src=“http://ajax.googleapis.com/ajax
/libs/jquery/3.4.1/jquery.min.js
◦ type=“text/javascript”></script>
◦ Using google’s may out perform your
own server

9. Easier to access
DOM
$(“#someElement”) – gives you access to a DOM
element named someElement
$(“.someClass”) – returns a collection of all
elements with classname of someClass
Consider: $(“.hideMe”).hide(); - will hide ALL
elements with the class name hideMe
$(“p”).append(“ powered by jQuery”); - appends
this to ALL HTML P’s
$(“p”).css(“background-color”,”yellow”)

10. Using jQuery
Either host it on your server, recommend a /js/ directory for all javascript code
Or use a hosted one like ajax.googleapis.com
Know difference of the “minified” (or just “min”) version – provides faster access – why? See page 264
Be sure to understand window.onload event and $().ready(function() { // jQuery code here });
See example 10.1 – source / open in browser, this is a client side app

11. Selecting the DOM content
◦ $(“span”); // all HTML span elements
◦ $(“#theElement”); // the HTML element having an ID of “theElement”
◦ $(“.theClassName”); // HTML elements having a class of “theClassName”
◦ $(“div#theElement”); // the <div> element with an ID of “theElement”
◦ $(us li a.theClassName”); // anchors with class “theClassName” that are within list
items
◦ $(“p > span”); // spans that are direct children of paragraphs
◦ $(“input[type=password]”); // inputs that have the specified type
◦ $(“p:first”); // the first paragraph on the page
◦ $(“p:even”); // all even numbered paragraphs

12. Selecting CSS Content
◦ $(“:header”) // all header elements (h1 to h6)
◦ $(“:button”) // all button elements
◦ $(“:radio”) // all radio buttons
◦ $(“:checkbox”) // all check boxes
◦ $(“:checked”) // all selected check boxes or radio buttons

13. How to manipulate content
Use
Use these
methods to
manipulate the
content you
selected
• html ( )
• text ( )
• attr ( )
Read
Read the chapter
for examples
Show
show ( ) – show
selected
elements
Hide
hide ( ) – hide
selected
elements
Toggle
toggle ( ) –
toggle (if on
then hide, if off
then show)
selected
elements

14. Animating Elements
fadeOut ( ) fadeIn ( ) fadeTo ( )
sideDown ( ) animate ( )
Study the example program
from the textbook
• Source – requires a github account
• Execute – open in your browser as
this is a client side app

15. Events with
jQuery
Using jQuery greatly simplifies event
handling!!
Read the chapter for more details
Know the list of events on page 276 (this is
review from chapter 9)
For more information –
http://api.jquery.com/category/events