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 as 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>
<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>
Both versions can be downloaded from jQuery.com.
Google
Demonstrates the jQuery hide() method, hiding the current HTML element.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test".
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
<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>
$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with class="test".
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Basic syntax is: $(selector).action()
$(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"
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:
jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element.
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.
$("p") selects all <p> elements.
$("p.intro") selects all <p> elements with class="intro".
$("p#demo") selects all <p> elements with id="demo".
$("[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".
The following example changes the background-color of all p elements to yellow:
Use our excellent jQuery Selector Tester to experiment with the different selectors.
For a full reference please go to our :
<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>
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.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
jQuery Syntax Examples
$(this).hide()Demonstrates the jQuery hide() method, hiding the current HTML element.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test".
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
<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>
$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with class="test".
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
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)
$(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...
});
// jQuery functions go here...
});
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 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 all <p> elements 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:
Some More Examples
| Syntax | Description |
|---|---|
| $(this) | Current HTML element |
| $("p") | All <p> elements |
| $("p.intro") | All <p> elements with class="intro" |
| $("p#intro") | All <p> elements with id="intro" |
| $("p#intro:first") | The first <p> element with id="intro" |
| $(".intro") | All elements with class="intro" |
| $("#intro") | The first element with id="intro" |
| $("ul li:first") | The first <li> element of the first <ul> |
| $("ul li:first-child") | The first <li> element of every <ul> |
| $("[href$='.jpg']") | All elements with an href attribute that ends with ".jpg" |
| $("div#intro .head") | All elements with class="head" inside a <div> element with id="intro" |
For a full reference please go to our :
No comments:
Post a Comment