Scribd
Upload
2 views

06 - jQuery

The document provides an overview of jQuery, a lightweight JavaScript library designed to simplify web programming by allowing developers to perform complex tasks with minimal code. It covers key features such as HTML/DOM manipulation, event handling, and effects, along with instructions on how to add jQuery to web pages via downloads or CDNs. Additionally, it includes examples of jQuery syntax, selectors, and event methods to demonstrate its practical applications.

Uploaded by

Kiap R14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

06 - jQuery

The document provides an overview of jQuery, a lightweight JavaScript library designed to simplify web programming by allowing developers to perform complex tasks with minimal code. It covers key features such as HTML/DOM manipulation, event handling, and effects, along with instructions on how to add jQuery to web pages via downloads or CDNs. Additionally, it includes examples of jQuery syntax, selectors, and event methods to demonstrate its practical applications.

Uploaded by

Kiap R14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

JQuery

Dr- Fatma Alrubaei


Web Programming
OUTLINE

 Introduction to jQuery
 jQuery Syntax
 jQuery Events
 jQuery Effects
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.
JQUERY LIBRARY FEATURES

 The jQuery library contains the following features:


− HTML/DOM manipulation
− CSS manipulation
− HTML event methods
− Effects and animations
− AJAX
− Utilities
ADDING JQUERY TO YOUR WEB PAGES

 There are several ways to start using jQuery on your web site.You can:
− Download the jQuery library from jQuery.com
− Include jQuery from a CDN, like Google
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)

 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-3.3.1.min.js"></script>
</head>
JQUERY CDN

 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.
 To use jQuery from Google or Microsoft, use one of the following:
− Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
− Microsoft CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
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 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".
JQUERY SELECTORS

 jQuery selectors allow you to select and manipulate HTML element(s).


 jQuery selectors are used to "find" (or select) HTML elements based on their name, 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 selectors in jQuery start with the dollar sign and parentheses: $().

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
MORE EXAMPLES OF JQUERY SELECTORS

Syntax 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
JQUERY EVENT METHODS

 All the different visitor's actions that a web page can respond to are called events.
 Examples:
− moving a mouse over an element
Mouse Events Keyboard Events Form Events Document/Wind
− selecting a radio button ow Events

− clicking on an element click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload


JQUERY SYNTAX FOR EVENT

 In jQuery, most DOM events have an equivalent jQuery method.


 To assign a click event to all paragraphs on a page, you can do this:

$("p").click(function(){
// action goes here!!
});
JQUERY EXAMPLES

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

$("#show").click(function(){ $("button").click(function(){
$("p").show(); $("p").toggle();
}); });
JQUERY EFFECTS - SLIDING

 jQuery has the following slide methods:


− slideDown()
$("#flip").click(function(){
− slideUp()
$("#panel").slideDown();
− slideToggle() });
JQUERY EFFECTS - ANIMATION

 Syntax:
$(selector).animate({params},speed,callback);

$("button").click(function(){
$("div").animate({left: '250px'});
});
JQUERY - FILTERS

 <script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

You might also like