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>

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 jQueryaction() 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...});

The Document Ready Event • 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

The Document Ready Event • 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: $().

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 Selectors

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

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

Append text to paragraph lemon on mouseover <script> $("#lemon").mouseover(function(){ $(this).append(" Cookie! "); }); </script> <p id='lemon'>Lemon drops biscuit chocolate…</p>

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

Change color of paragraph lemon when btnColor is clicked <script> $("#btnColor").click(function(){ $("#lemon").addClass("blue"); }); </script> <style type="text/css"> .red{ color:red; } .blue{ color:blue; } </style>

<script> • $("#btnColorCheck").click(function(){ alert($("#lemon").css("color")); • }); • </script> What color is the paragraph? Display the color of the paragraph lemon when btnColorCheck is clicked. <p id='lemon'>Lemon drops biscuit chocolate…</p>

Highlight (background-color = yellow) any paragraph that is double-clicked <script> $("p").dblclick(function(){ $(this).css("background-color", "yellow"); }); </script>

jQuery Effects

Create a toggle button that shows/hides paragraph lemon. <script> $("#btnToggle").click(function(){ $("#lemon").slideToggle("slow"); }); </script> <p id='lemon'>Lemon drops biscuit chocolate…</p>

<script> $("#btnFade").click(function(){ $("#lemon").fadeTo("slow", 0.5); }); </script> Fade paragraph lemon to 50% opacity when btnFade is clicked. <p id='lemon'>Lemon drops biscuit chocolate…</p>

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

<script> $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice cream tootsie roll donut..."); }); </script> Replace text in paragraph lemon when btnReplace is clicked. <p id='lemon'>Lemon drops biscuit chocolate…</p>

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.php http://www.w3schools.com/jquery/ajax_post.asp

Ajax show_product.php <?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

Ajax ajax.php $('#show').click(function(){ varprodId= $('#id').val(); $.post( "show_product.php", {id:prodId}, function(result) { $('#detail').html(result); } ); }); When the button is clicked Get the text box value Ajax POST Name of the PHP script The key/value to be passed Update the "detail" div With the output of the PHP script

Introduction to jQuery