Introduction to jQuery
Introduction to jQuery
Why jQuery?
If you’ve spent any time at all trying to add dynamic functionality to your pages (as well as figure out browser differences), you’ve found that you’re constantly following a pattern of selecting an element or group of elements and operating upon those elements in some fashion. You could be hiding or revealing the elements, adding a CSS class to them, animating them, or modifying their attributes.
Using raw JavaScript can result in dozens of lines of code for each of these tasks. The creators of jQuery specifically created the library to make common tasks trivial.
So the basic concept of jQuery could be described as:
1. Creating something new
2. Selecting it
3. Then doing something with it.
About jQuery
It’s one of the most popular JavaScript libraries around and was created by John Resig during his college days at the Rochester Institute of Technology. Its popularity has been helped by a number of high-profile sites using jQuery such as the BBC, Digg, Intel, MSNBC, and Technorati.
The core features of jQuery are:
• Gives developers a common set of functions for all browsers
• Uses selectors which is an expression for identifying target elements on a page that allows us to easily identify and grab the elements we need
• Gives access to page elements without having to wait for all images to load in place of using the browser’s onload event, which delays anything you do until the page is fully loaded
• Let’s you create and delete HTML.
• Has a great selection of animation and visual effect
• Contains enhancements to basic JavaScript constructs such as iteration and array manipulation.
The real power in this jQuery statement comes from the selector, an expression for
Identifying target elements on a page that allows us to easily identify and grab the elements we need; in this case, even every element in all tables.
The jQuery library provides a general-purpose abstraction layer for common web scripting, and is therefore useful in almost every scripting situation. Its extensible nature means that we could never cover all possible uses and functions in a single book, as plugins are constantly being developed to add new abilities.
Downloading jQuery
jQuery is available in two versions: a packed version for use in production sites and an uncompressed version that is more readable (if you want to review the source).
http://docs.jquery.com/Downloading_jQuery
No installation is required. To use jQuery, you just need to place it in a public location.
Since JavaScript is an interpreted language, there is no compilation or build phase to worry about. Whenever we need a page to have jQuery available, we will simply refer to the file's location from the HTML document.
Just include the file in the same location as your HTML page and you’re ready to use jQuery.
Google CDN
An alternative method for including the jQuery library that’s worth considering is via the Google Content Delivery Network (CDN). A CDN is a network of computers that are specifically designed to serve content to users in a fast and scalable manner. These servers are often distributed geographically, with each request being served by the nearest server in the network.
So, instead of hosting the jQuery files on your own web server as we did above, you have the option of letting Google pick up part of your bandwidth bill. You benefit from the speed and reliability of Google’s vast infrastructure, with the added bonus of the option to always use the latest version of jQuery.
Uncompressed or compressed?
If you had a poke around on the jQuery download page, you might have also spied a couple of different download format options: compressed (also called minified), and uncompressed (also called “development”).
Typically, you’ll want to use the minified version for your production code, where the jQuery source code is compressed: spaces and line breaks have been removed and variable names are shortened. The result is exactly the same jQuery library, but contained in a JavaScript file that’s much smaller than the original. This is great for reducing bandwidth costs for you, and speeding up page requests for the end user.
The Document Object Model
One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy.
The Document Object Model is a family-tree structure of sorts. HTML, like other markup languages, uses this model to describe the relationships of things on a page. When we refer to these relationships, we use the same terminology that we use when referring to family relationships—parents, children, and so on.
A simple example can help us understand how the family tree metaphor applies to a document:....
the title
Why jQuery?
If you’ve spent any time at all trying to add dynamic functionality to your pages (as well as figure out browser differences), you’ve found that you’re constantly following a pattern of selecting an element or group of elements and operating upon those elements in some fashion. You could be hiding or revealing the elements, adding a CSS class to them, animating them, or modifying their attributes.
Using raw JavaScript can result in dozens of lines of code for each of these tasks. The creators of jQuery specifically created the library to make common tasks trivial.
So the basic concept of jQuery could be described as:
1. Creating something new
2. Selecting it
3. Then doing something with it.
About jQuery
It’s one of the most popular JavaScript libraries around and was created by John Resig during his college days at the Rochester Institute of Technology. Its popularity has been helped by a number of high-profile sites using jQuery such as the BBC, Digg, Intel, MSNBC, and Technorati.
The core features of jQuery are:
• Gives developers a common set of functions for all browsers
• Uses selectors which is an expression for identifying target elements on a page that allows us to easily identify and grab the elements we need
• Gives access to page elements without having to wait for all images to load in place of using the browser’s onload event, which delays anything you do until the page is fully loaded
• Let’s you create and delete HTML.
• Has a great selection of animation and visual effect
• Contains enhancements to basic JavaScript constructs such as iteration and array manipulation.
The real power in this jQuery statement comes from the selector, an expression for
Identifying target elements on a page that allows us to easily identify and grab the elements we need; in this case, even every element in all tables.
The jQuery library provides a general-purpose abstraction layer for common web scripting, and is therefore useful in almost every scripting situation. Its extensible nature means that we could never cover all possible uses and functions in a single book, as plugins are constantly being developed to add new abilities.
Downloading jQuery
jQuery is available in two versions: a packed version for use in production sites and an uncompressed version that is more readable (if you want to review the source).
http://docs.jquery.com/Downloading_jQuery
No installation is required. To use jQuery, you just need to place it in a public location.
Since JavaScript is an interpreted language, there is no compilation or build phase to worry about. Whenever we need a page to have jQuery available, we will simply refer to the file's location from the HTML document.
Just include the file in the same location as your HTML page and you’re ready to use jQuery.
Google CDN
An alternative method for including the jQuery library that’s worth considering is via the Google Content Delivery Network (CDN). A CDN is a network of computers that are specifically designed to serve content to users in a fast and scalable manner. These servers are often distributed geographically, with each request being served by the nearest server in the network.
So, instead of hosting the jQuery files on your own web server as we did above, you have the option of letting Google pick up part of your bandwidth bill. You benefit from the speed and reliability of Google’s vast infrastructure, with the added bonus of the option to always use the latest version of jQuery.
Uncompressed or compressed?
If you had a poke around on the jQuery download page, you might have also spied a couple of different download format options: compressed (also called minified), and uncompressed (also called “development”).
Typically, you’ll want to use the minified version for your production code, where the jQuery source code is compressed: spaces and line breaks have been removed and variable names are shortened. The result is exactly the same jQuery library, but contained in a JavaScript file that’s much smaller than the original. This is great for reducing bandwidth costs for you, and speeding up page requests for the end user.
The Document Object Model
One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy.
The Document Object Model is a family-tree structure of sorts. HTML, like other markup languages, uses this model to describe the relationships of things on a page. When we refer to these relationships, we use the same terminology that we use when referring to family relationships—parents, children, and so on.
A simple example can help us understand how the family tree metaphor applies to a document:....
and , is also their parent. The elements are children (and descendants) of
, descendants of and , and siblings of each other.
An important point to note before we begin is that the resulting set of elements from selectors and methods is always wrapped in a jQuery object. These jQuery objects are very easy to work with when we want to actually do something with the things that we find on a page.
We can easily bind events to these objects and add slick effects to them, as well as chain multiple modifications or effects together. Nevertheless, jQuery objects are different from regular DOM elements or node lists, and as such do not necessarily provide the same methods and properties for some tasks.
The $() factory function
The fundamental operation in jQuery is selecting a part of the document. This is done with the $() construct. Typically.....
What is jQuery
0 commentaires: