1. An introduction to jQuery
Jeremy Shafer
Department of MIS
Fox School of Business
Temple University

2. Roadmap We are here. Part 2 JavaScript jQuery Part 1 MVC PDO Bootstrap
Ajax, JSON
APIs

3. Advisory
Like most programming technologies, jQuery offers a robust set of features that can be combined and rearranged with endless variation.
In it’s original form, jQuery was created to make the long, difficult JavaScript syntax more concise, and to make common repetitive coding tasks easier to write.
That’s the essence of our approach to jQuery today.
We want to learn the basic structure of jQuery commands… and then use them to do some very specific things. Over the next few weeks we will use jQuery to do the following.
Write some client-side form validation as simply and clearly as we can.
Pull data into our web pages (views) from something called a web service (a.k.a. an API)
Send data to an API

4. Objectives Describe jQuery.
Describe how to include the jQuery library in your web pages.
Understand the role of jQuery selectors, methods, and events.
Repeat and recall the syntax of a simple jQuery selector.
Apply the pattern of jQuery syntax to val, html, and append methods.
Understand the role of the ready event, the click event, and the submit event.

5. How do I get jQuery?
Surprise! You have had jQuery available to you for most of the semester.
Try opening jq01.php in Chrome. Try opening it with and without line 9.

6. Linking to the jQuery library
Pro tip! Knowing what a CDN URL is, and how to add one to your solution, is a powerful way to extend the options available to you, the programmer.

7. jQuery Described
So… Just like Bootstrap is a framework created to simplify CSS, jQuery is a library created to simplify JavaScript. It’s the same sort of idea: make the developer’s life easier, not harder!
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
jQuery is the most popular JavaScript library in use today.
jQuery is free, open-source software licensed under the MIT License.
Initial release date: August 26, 2006; 13 years ago
Created by American software engineer and entrepreneur, John Resig.
John Resig is an alumni of the Rochester Institute of Technology.
He was going to call it jSelect, but that name was already taken. That would have been a *great* name, because “selecting” is a fundamental concept in jQuery

8. What do you mean by “selecting”?
jQuery relies heavily on the notion of selecting.
When we say:
$('#mymessage').html('Hello world!’);
The browser selects the tag with the id “mymessage”
#mymessage is called the selector !
We take action on the tags found.
So, the basic structure of a jQuery command is: $(“some selector goes here”).SomeMethod();

9. jQuery selectors
DISCUSS: These are the most simple examples of jQuery selectors. What does this syntax/convention remind you of?

10. Once you find the tag(s)
Again, the basic structure of a jQuery command is: $(“some selector goes here”).SomeMethod();
.html(value)
.append(value)
.val()
.val(value)
Putting content in to a tag
Retrieve and assign the value of a tag
See jq02.php jq03.php and jq04.php

11. Make sure you catch this…
Notice that we are passing “30” into the value of the #gallons tag.
Here, #gallons is the id of an <input> tag.
We assign the value 30 that by passing is as an argument to the val method.
We don’t use the assignment operator ( = ) here!

12. Events
You can think of events as like triggers. They are instructions for something that is anticipated. They are code that is waiting to be run.

13. Three events we care about

14. The jQuery ready event
Typically we use the ready() event to hold a logic that gets applied after the page is loaded. The logic will be used to govern things like click() events and submit() events)
See jq05.php

15. Events – the jQuery click event
We typically see code like this nested inside of a document ready() event.
See jq06.php

16. Events – the jQuery submit event
We typically see code like this nested inside of a document ready() event.
See jq07.php

17. Why this is a big deal… PHP Server The URL you asked for …
JavaScript and jQuery give us a way to introduce decision-making code on the client (the browser)
They give us an alternative to the costly process of reaching out to a server (in the cloud) and retrieving a completely new copy of a page.
They allow use to reduce the number of “round trips” made by our application.
PHP Server
The URL you asked for …
The response you got back.

18. jQuery Summary Methods Selectors .html() . for classes .append()
.val()
Selectors
. for classes
# for id
No prefix for tags
Events
.ready()
.click()
.submit()
We will use this list as our core jQuery reference. When I need to add a new event or method I’ll draw your attention to it!

19. Next time…
Next time we meet, we will use JavaScript and our new jQuery building blocks to improve our RentZen application.
We will be working with HTML forms, collecting data, checking the data, and either appending HTML data on to the page or submitting the form data to the server.
We will focus our attention on property_add.php
and app_submit.php