Scribd
Upload
114 views

J Query

jQuery is a JavaScript library that allows for selecting and manipulating HTML elements, CSS styles, JavaScript effects and animations, AJAX requests, and more. The document provides examples of how to use jQuery to select elements, bind events, modify styles and content, and make AJAX requests. It also summarizes jQuery syntax, selectors, events, effects, CSS/HTML manipulation methods, and resources for further reference.

Uploaded by

viral1value
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
114 views

J Query

jQuery is a JavaScript library that allows for selecting and manipulating HTML elements, CSS styles, JavaScript effects and animations, AJAX requests, and more. The document provides examples of how to use jQuery to select elements, bind events, modify styles and content, and make AJAX requests. It also summarizes jQuery syntax, selectors, events, effects, CSS/HTML manipulation methods, and resources for further reference.

Uploaded by

viral1value
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

jQuery

CSCI 216 Tina Ostrander

What is jQuery?
A library of JavaScript functions

Features Select and manipulate HTML Manipulate CSS JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities

Getting Started
<!DOCTYPE html> <html> <head> <title>Fun with jQuery</title> </head>

Include jQuery in the

source file Define jQuery functions Save this file as index.htm in a 216/jQuery subdirectory on ned Try it!

<body> <h2>Hello, jQuery!</h2> <button id='btnOuch'>Say Ouch</button> <script src="http://code.jquery.com/jquery.js"></script> <script> $("#btnOuch").click(function(){ alert("Ouch! That hurt."); }); </script> </body> </html>

Example 1: A Closer Look


$("#btnOuch") selects the element with ID

btnOuch click() binds a click event to selected element The function executes when the click event is fired
Display an alert when the button with ID btnOuch is clicked

<script> $("#btnOuch").click(function(){ alert("Ouch! That hurt."); }); </script>

How jQuery Works


The jQuery syntax is used to select HTML elements and

perform some action on those element(s).


Basic syntax: $(selector).action() A dollar sign to define jQuery A (selector) to find HTML elements An action() to be performed on the element(s)

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

jQuery Selectors
Syntax $(this) $("p") $("p.intro") $(".intro") $("#intro") $("ul li:first") $("[href$='.jpg']") Description Current HTML element All <p> elements All <p> elements with class="intro" All elements with class="intro" The first element with id="intro" The first <li> element of each <ul> All elements with an href attribute that ends with ".jpg" All elements with class="head" inside a <div> element with id="intro"

$("div#intro .head")

For a full reference please see jQuery Selectors Reference

Comparison
Compare the following:
What are the advantages of the jQuery method?

$("a").click(function(){ alert("You clicked a link!"); });

<a href="#" onclick="alert(You clicked a link!')">Link</a>

Example 2
<script> $("h2").click(function(){ $(this).hide("slow"); }); </script>

What will this do? What happens if you have more than one h2? Try it!

Example 3
Hide all blue paragraphs when btnHideBlue is clicked

<script> $("#btnHideBlue").click(function(){ $("p.blue").hide("slow"); }); </script>

<button id='btnHideBlue'>Hide Blue</button>

jQuery Events
Event Method Description

$(selector).click(function)
$(selector).dblclick(function) $(selector).focus(function) $(selector).mouseover(function) $(selector).keypress(function)

Invokes a function when the selected elements are clicked


Invokes a function when the selected elements are double-clicked Invokes a function when the selected elements receive the focus Invokes a function when the mouse is over the selected elements Invokes a function when a key is pressed inside the selected elements

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

Example 4
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
CSS Properties $(selector).css(propertyName) $(selector).css(propertyName,value) Description Get the style property value of the first selected element Set the value of one style property for selected elements

$(selector).css({properties})
$(selector).addClass(class)

Set multiple style properties for selected elements


Apply style class to the selected elements

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

Example 5

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>

Example 6
<script> $("#btnColorCheck").click(function(){ alert($("#lemon").css("color")); What color is the paragraph? }); </script>

Display the color of the paragraph lemon when btnColorCheck is clicked.

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

<script> $("p").dblclick(function(){ $(this).css("background-color", "yellow"); }); </script>

jQuery Effects
Function $(selector).hide() $(selector).show() Description Hide selected elements Show selected elements

$(selector).toggle() $(selector).slideDown()
$(selector).slideUp()

Toggle (between hide and show) selected elements Slide-down (show) selected elements
Slide-up (hide) selected elements

$(selector).slideToggle() Toggle slide-up and slide-down of selected elements $(selector).fadeIn() $(selector).fadeOut() $(selector).fadeTo() Fade in selected elements Fade out selected elements Fade out selected elements to a given opacity

$(selector).fadeToggle()

Toggle between fade in and fade out

Example 8
Create a toggle button that shows/hides paragraph lemon.

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

Example 9

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


Fade paragraph lemon to 50% opacity when btnFade is clicked.

Manipulating HTML
Function $(selector).html(content) $(selector).append(content) $(selector).after(content) Description Changes the (inner) HTML of selected elements Appends content to the (inner) HTML of selected elements Adds HTML after selected elements

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

Example 10
<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.php
Parameter URL data Description Required. Specifies the url to send the request to. 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

Ajax
show_product.php <?php

$id = $_POST['id'];

Get this from the Ajax call

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>";

Ajax
ajax.php $('#show').click(function(){ var prodId = $('#id').val(); $.post( "show_product.php", {id:prodId},
When the button is clicked Get the text box value Ajax POST Name of the PHP script

The key/value to be passed

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

Update the "detail" div With the output of the PHP script

Resources
http://jquery.com/

http://www.w3schools.com/jquery
http://jqueryui.com/

You might also like