Introduction to jQuery

Introduction to jQuery

What is jQuery?

• a lightweight, "write less, do more", JavaScript library.• The purpose is to make it much easier to use

JavaScript.• takes a lot of common tasks that require many lines

of JavaScript code to accomplish, and wraps them into methods that can be called with a single line of code.

• simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

What is jQuery?

• The jQuery library contains the following features:– HTML/DOM manipulation– CSS manipulation– HTML event methods– Effects and animations– AJAX– Utilities

Using jQuery

• several ways to start using jQuery on your web site:– Download the jQuery library from jQuery.com, use

as external library, reference in HTML head (relative path)

– Include jQuery from a CDN, like Google, also use as external library, reference (via HTTP) in HTML head

Downloading jQuery

• There are two versions of jQuery available for downloading:

• 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)

Downloading jQuery

• Both versions can be downloaded from jQuery.com.

• The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):

• <head><script src="jquery-1.10.2.min.js"></script></head>

http://jquery.com/download/

Alternatives to Downloading

• If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

• Both Google and Microsoft host jQuery.

Google CDN• <head>

<script src=" //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></head>

Hello World

• Activity 1– hello1.html – local scripts– hello2.html – Google CDN

jQuery Syntax

• 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

• Examples:– $(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".

The Document Ready Event

• to prevent any jQuery code from running before the document is finished loading (is ready).

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

// jQuery methods go here...

});


• Good practice to wait for the document to be fully loaded and ready before working with it.

• Some examples of actions that can fail if methods are run before the document is fully loaded:– Trying to hide an element that is not created yet– Trying to get the size of an image that is not

loaded yet


• Tip: The jQuery team has also created an even shorter method for the document ready event:

• $(function(){

// jQuery methods go here...

});

jQuery Selectors – activity 2

• jQuery selectors allow selection and manipulation of HTML element(s).

• Enable to find elements based on their id, classes, types, attributes, values of attributes and much more.

• It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

• All type of selectors in jQuery, start with the dollar sign and parentheses: $().

http://www.w3schools.com/cssref/css_selectors.asp

Example – element selector

• select all <p> elements on a page like this:– $("p")

• When a user clicks on a button, all <p> elements will be hidden:– $(document).ready(function(){

$("button").click(function(){ $("p").hide(); });});

Example – #id selector

• #id selector uses the id attribute of an HTML tag to find the specific element.

• id should be unique within a page, so the #id selector is use to find a single, unique element– $(document).ready(function(){

$("button").click(function(){ $("#test").hide(); });});

Example – .class Selector

• finds elements with a specific class – by writing a period character, followed by the name of the class - $(".test")– $(document).ready(function(){

$("button").click(function(){ $(".test").hide(); });});

More Examples of jQuery SelectorsSyntax Description

$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"

$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"

$(":button") Selects all <button> elements and <input> elements of type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements

Important Functions

• $().parseHTML('); //createElement• $().html(); //get or set element• $().val(); //get text value• $().append(); //append text or html• $().attr(); //get or set attribute

jQuery EventsEvent Method Description

$(selector).click(function) Invokes a function when the selected elements are clicked

$(selector).dblclick(function) Invokes a function when the selected elements are double-clicked

$(selector).focus(function) Invokes a function when the selected elements receive the focus

$(selector).mouseover(function) Invokes a function when the mouse is over the selected elements

$(selector).keypress(function) Invokes a function when a key is pressed inside the selected elements

For a full jQuery event reference, please see jQuery Events Reference

http://www.w3schools.com/jquery/jquery_ref_events.asp

http://www.w3schools.com/jquery/jquery_ref_events.asp

<script> $("#lemon").mouseover(function(){ $(this).append(" Cookie! ");

});</script>

Append text to paragraph lemon on mouseover

<p id='lemon'>Lemon drops biscuit chocolate…</p>

Manipulating CSSCSS Properties Description

$(selector).css(propertyName) Get the style property value of the first selected element

$(selector).css(propertyName,value) Set the value of one style property for selected elements

$(selector).css({properties}) Set multiple style properties for selected elements

$(selector).addClass(class) Apply style class to the selected elements

For a full jQuery CSS reference, please see jQuery CSS Methods ReferenceFor more on the css function, see http://api.jquery.com/css/

http://www.w3schools.com/jquery/jquery_ref_css.asp

http://www.w3schools.com/jquery/jquery_ref_css.asp

http://api.jquery.com/css/

<script> $("#btnColor").click(function(){ $("#lemon").addClass("blue"); });</script>

Change color of paragraph lemon when btnColor is clicked

<style type="text/css">.red{

color:red;}.blue{

color:blue;}

</style>

Display the color of the paragraph lemon when

btnColorCheck is clicked.

What color is the paragraph?

<script>$("#btnColorCheck").click(function(){ alert($("#lemon").css("color"));});

</script>


<script>$("p").dblclick(function(){

$(this).css("background-color", "yellow");});

</script>

Highlight (background-color = yellow) any paragraph that is double-clicked

jQuery EffectsFunction Description$(selector).hide() Hide selected elements

$(selector).show() Show selected elements

$(selector).toggle() Toggle (between hide and show) selected elements

$(selector).slideDown() Slide-down (show) selected elements$(selector).slideUp() Slide-up (hide) selected elements

$(selector).slideToggle() Toggle slide-up and slide-down of selected elements

$(selector).fadeIn() Fade in selected elements$(selector).fadeOut() Fade out selected elements

$(selector).fadeTo() Fade out selected elements to a given opacity

$(selector).fadeToggle() Toggle between fade in and fade out

<script> $("#btnToggle").click(function(){ $("#lemon").slideToggle("slow"); });</script>

Create a toggle buttonthat shows/hides paragraph lemon.


<script> $("#btnFade").click(function(){ $("#lemon").fadeTo("slow", 0.5); });</script>

Fade paragraph lemon to 50% opacity when

btnFade is clicked.


Manipulating HTML

Function Description

$(selector).html(content) Changes the (inner) HTML of selected elements

$(selector).append(content) Appends content to the (inner) HTML of selected elements

$(selector).after(content) Adds HTML after selected elements

For a full jQuery HTML reference, please see jQuery HTML Methods Reference

http://www.w3schools.com/jquery/jquery_ref_html.asp

http://www.w3schools.com/jquery/jquery_ref_html.asp

<script> $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice

cream tootsie roll donut..."); });</script>

Replace text in paragraph lemon when btnReplace

is clicked.


Ajax• The jQuery $.post() method loads data from the server using an HTTP POST

request.• Syntax

$.post(URL, {data}, function(data){…});$.post("myScript.php", {name:txt}, function(result) { $("span").html(result); });

ajax.phpParameter DescriptionURL Required. Specifies the url to send the

request to.data Optional. Specifies data to send to the

server along with the request.function(data) •Optional. Specifies a function to run if

the request succeeds.data - contains the resulting data from the request

http://www.w3schools.com/jquery/ajax_post.asp

http://www.w3schools.com/jquery/ajax_post.asp

Ajax <?php

$id = $_POST['id'];

mysql_connect("localhost", "omuser", "omuser") or die("Error connecting"); mysql_select_db("om") or die("Error selecting DB"); $query = "SELECT * FROM items WHERE item_id = $id"; $result = mysql_query($query); if (mysql_num_rows($result) == 0) { echo "Product ID $id not found."; return; } $row = mysql_fetch_array($result); echo "<strong>Item ID:</strong> {$row['item_id']}<br>"; echo "<strong>Title:</strong> {$row['title']}<br>"; echo "<strong>Artist:</strong> {$row['artist']}<br>"; echo "<strong>Price:</strong> {$row['unit_price']}<br>";

Get this from the Ajax call

show_product.php

Ajax $('#show').click(function(){

var prodId = $('#id').val(); $.post(

"show_product.php",

{id:prodId},

function(result) { $('#detail').html(result); } ); });

When the button is clicked

Get the text box value

Name of the PHP script

The key/value to be passed

Update the "detail" divWith the output of the PHP script

Ajax POST

ajax.php

Documents

Introduction to jQuery