Scribd
Upload
122 views

Jquery Introduction: Previous Next Chapter

jQuery is a lightweight JavaScript library that allows for HTML element selections and manipulations. It contains methods for DOM traversal, event handling, effects/animations, and Ajax interactions. The jQuery library is stored in a single JavaScript file that can be added to a web page with a <script> tag. jQuery uses CSS selector syntax to select elements and then methods can be applied to those elements to hide, show, or modify them. Events are commonly used with jQuery to trigger functions when user interactions occur.

Uploaded by

swethavh
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
122 views

Jquery Introduction: Previous Next Chapter

jQuery is a lightweight JavaScript library that allows for HTML element selections and manipulations. It contains methods for DOM traversal, event handling, effects/animations, and Ajax interactions. The jQuery library is stored in a single JavaScript file that can be added to a web page with a <script> tag. jQuery uses CSS selector syntax to select elements and then methods can be applied to those elements to hide, show, or modify them. Events are commonly used with jQuery to trigger functions when user interactions occur.

Uploaded by

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

jQuery Introduction

« Previous Next Chapter »

The jQuery library can be added to a web page with a single line of
markup.

What You Should Already Know

Before you start studying jQuery, you should have a basic knowledge of:

 HTML
 CSS
 JavaScript

If you want to study these subjects first, find the tutorials on our Home
page.

What is jQuery?

jQuery is a library of JavaScript Functions.

jQuery is a lightweight "write less, do more" JavaScript library.

The jQuery library contains the following features:

 HTML element selections


 HTML element manipulation
 CSS manipulation
 HTML event functions
 JavaScript Effects and animations
 HTML DOM traversal and modification
 AJAX
 Utilities

Adding the jQuery Library to Your Pages

The jQuery library is stored a single JavaScript file, containing all the
jQuery methods.

It can be added to a web page with the following mark-up:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Please note that the <script> tag should be inside the page's <head>
section.

Basic jQuery Example

The following example demonstrates the jQuery hide() method, hiding


all <p> elements in an HTML document.

Example

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Try it yourself »

Downloading jQuery

Two versions of jQuery are available for downloading: one minified and
one uncompressed (for debugging or reading).

Both versions can be downloaded from jQuery.com.

Alternatives to Downloading

If you don't want to store the jQuery library on your own computer, you
can use the hosted jQuery library from Google or Microsoft.

Google

<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></
script>
</head>
Try it yourself »

Microsoft

<head>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-
1.4.2.min.js"></script>
</head>

jQuery Syntax

« Previous Next Chapter »

With jQuery you select (query) HTML elements and perform "actions"
on them.

jQuery Syntax Examples

$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML
element.

$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with
id="test".

$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.

$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with
class="test".
jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and
perform some action on the element(s).

Basic syntax is: $(selector).action()

 A dollar sign to define jQuery


 A (selector) to "query (or find)" HTML elements
 A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides current element

$("p").hide() - hides all paragraphs

$("p.test").hide() - hides all paragraphs with class="test"

$("#test").hide() - hides the element with id="test"

jQuery uses a combination of XPath and CSS selector syntax.


You will learn more about the selector syntax in the next chapter of
this tutorial.

The Document Ready Function

You might have noticed that all jQuery methods, in our examples, are
inside a document.ready() function:

$(document).ready(function(){

   // jQuery functions go here...


});

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

Here are some examples of actions that can fail if functions are run
before the document is fully loaded:

 Trying to hide an element that doesn't exist


 Trying to get the size of an image that is not loaded
 jQuery Selectors

« Previous Next Chapter »



 jQuery selectors allow you to select and manipulate HTML
elements as a group or as a single element.

 jQuery Selectors
 In the previous chapter we looked at some examples of how to
select different HTML elements.
 It is a key point to learn how jQuery selects exactly the elements
you want to apply an effect to.
 jQuery selectors allow you to select HTML elements (or groups of
elements) by element name, attribute name or by content.

In HTML DOM terms:

Selectors allow you to manipulate DOM elements as a group or as a


single node.

 jQuery Element Selectors


 jQuery uses CSS selectors to select HTML elements.
 $("p") selects all <p> elements.
 $("p.intro") selects all <p> elements with class="intro".
 $("p#demo") selects the first <p> element with id="demo".

 jQuery Attribute Selectors


 jQuery uses XPath expressions to select elements with given
attributes.
 $("[href]") select all elements with an href attribute.
 $("[href='#']") select all elements with an href value equal to "#".
 $("[href!='#']") select all elements with an href attribute NOT equal
to "#".
 $("[href$='.jpg']") select all elements with an href attribute that
ends with ".jpg".

 jQuery CSS Selectors


 jQuery CSS selectors can be used to change CSS properties for
HTML elements.
 The following example changes the background-color of all p
elements to yellow:

Example

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

Try it yourself »

 Some More Examples

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

 Use our excellent jQuery Selector Tester to experiment with the


different selectors.
 For a full reference please go to our jQuery Selectors Reference
 jQuery Events

« Previous Next Chapter »



 jQuery is tailor made to handle events.

 jQuery Event Functions


 The jQuery event handling methods are core functions in jQuery.
 Event handlers are method that are called when "something
happens" in HTML. The term "triggered (or "fired") by an
event" is often used. 
 It is common to put jQuery code into event handler methods in the
<head> section:

Example

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

Try it yourself »

 In the example above, a function is called when the click event for
the button is triggered:
 $("button").click(function() {..some code... } )
 The method hides all <p> elements:
 $("p").hide();

 Functions In a Separate File


 If your website contains a lot of pages, and you want your jQuery
functions to be easy to maintain, put your jQuery functions in a
separate .js file.
 When we demonstrate jQuery here, the functions are added
directly into the <head> section, However, sometimes it is
preferable to place them in a separate file, like this (refer to the file
with the src attribute):

Example
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

 jQuery Name Conflicts


 jQuery uses the $ sign as a shortcut for jQuery.
 Some other JavaScript libraries also use the dollar sign for their
functions.
 The jQuery noConflict() method specifies a custom name (like jq),
instead of using the dollar sign.
 Try it yourself »

 jQuery Events
 Here are some examples of event methods in jQuery: 

Event Method Description


Binds a function to the ready event of a
document
$(document).ready(function)  
(when the document is finished
loading)
Triggers, or binds a function to the
$(selector).click(function)
click event of selected elements
Triggers, or binds a function to the
$(selector).dblclick(function)
double click event of selected elements
Triggers, or binds a function to the
$(selector).focus(function)
focus event of selected elements
$ Triggers, or binds a function to the
(selector).mouseover(function) mouseover event of selected elements
 For a full jQuery event reference, please go to our jQuery Events
Reference.

You might also like