JQuery is a library for JavaScript (browser based JavaScript technically). Think of JQuery as something that extends JavaScript's functions and features. JQuery improves any program that must work with web page elements by allowing the programmer to use less code, and avoid some possibilities for bugs and other difficulties (in theory a
nyway). On the other hand, if your JavaScript code doesn't interact with the web page much, if it is all math or string handling, then JQuery won't be worth adding to the project.
AJAX with JQuery
When using asynchronous connections to the server it is recommended that you use JQuery. These connections can be done with JQuery's ajax() function which provides many features in a convenient format. You can define functions as part of the ajax() call to handle success and failure of the connection. A typical application of this system is to first prepare data for the server connection, send the data with ajax(), wait for the response from the server, and finally you may perform other tasks that are set up to run on completion. While waiting for a response from the server the browser is not locked and can perform other tasks, unless you specifically set it to be non-asynchronous. Some examples of ways that this system can be used are:
Checking if a username exists
Searching a database
Getting a specific time period of records from a database
Saving user preferences to the server
Fetching the next section of items in a product catalog
HTML Elements and JQuery
A major reason to use JQuery is that it helps manipulate HTML elements. Even if it's only a little easier to do things the JQuery it's often worth it, and there are many reasons including cross-browser compatibility. HTML elements are anything you see on a web page, and of course it also includes elements in HTML that you don't see like the page description meta tag. You can edit, create, delete, and sometimes move these elements and change the web page completely. For a simplified example, suppose you wanted to take a particular <div> tag and put red text inside it. In your JavaScript code, first you would find the div tag and assign it to a variable. You now have the variable div_tag, and you can add text to it in JQuery with the html() function (note that this function replaces the current contents of the tag rather than appending). It has the text now but it isn't red. Use JQuery's css() function to add a color to div_tag (basically you are editing it's style attribute). I skipped over the part about how we find a particular div, and we're going to cover that now, because that's the really important thing to learn about JQuery.
Selectors and JQuery
Selectors are a syntax entered as strings into JQuery functions to find something. By default it searches the current HTML document, but selectors can be used on any text. To get you started with the selector syntax let's go back to the previous example where we want to assign a particular div to the variable div_tag so we can manipulate it. I'm using the $ sign in place of the word JQuery, because this is a common and acceptable way to abbreviate JQuery in code, but it's the same, JQuery() or $().
div_tag = $('div');
This assigns a div element to the variable div_tag right? Almost right, it actually selects all div tags and now div_tag is basically equal to all div tags. It's normal to be able to treat a group of elements as a variable like this, but we want to reduce that group to 1 element.
div_tag = $('div').eq(0);
That basically says, find all div tags, and give us the first, which is the one at index 0. That might work fine, but let's assume the div we want is the following HTML, and at an unknown position in the document:
<div id="message"></div>
Selecting an element with a particular id is easy, if you've used CSS this may not surprise you.
div_tag = $('#message');
That returns the element with the id attribute set to message, similar to the above example. There is only supposed to be 1 of each id in a document, and if that rule is broken then you will get multiple tags selected this way. The complete code for our example is:
div_tag = $('#message');
div_tag.html("Our new message...");
div_tag.css("color", "red");
Other Things to Do With JQuery
Events
Javascript can have code defined for events such as key presses. You can more easily make an action occure when a user presses a key if you are using JQuery.
Effects
Setting black text to red is just the beginning, JQuery can automate various effects that can make your web page animated and interactive.
jQuery UI
JQuery UI can give you greatly enhanced forms and other user interfaces providing widgets, themes, and more in a single package.
Plug-ins
If JQuery alone can't do something there's probably a plug-in for it that can. Extending JQuery can give you a powerful toolkit and may allow you to simplify your on page JavaScript to just a few lines. You can easily extend JQuery yourself with JavaScript code.
nyway). On the other hand, if your JavaScript code doesn't interact with the web page much, if it is all math or string handling, then JQuery won't be worth adding to the project.
AJAX with JQuery
When using asynchronous connections to the server it is recommended that you use JQuery. These connections can be done with JQuery's ajax() function which provides many features in a convenient format. You can define functions as part of the ajax() call to handle success and failure of the connection. A typical application of this system is to first prepare data for the server connection, send the data with ajax(), wait for the response from the server, and finally you may perform other tasks that are set up to run on completion. While waiting for a response from the server the browser is not locked and can perform other tasks, unless you specifically set it to be non-asynchronous. Some examples of ways that this system can be used are:
Checking if a username exists
Searching a database
Getting a specific time period of records from a database
Saving user preferences to the server
Fetching the next section of items in a product catalog
HTML Elements and JQuery
A major reason to use JQuery is that it helps manipulate HTML elements. Even if it's only a little easier to do things the JQuery it's often worth it, and there are many reasons including cross-browser compatibility. HTML elements are anything you see on a web page, and of course it also includes elements in HTML that you don't see like the page description meta tag. You can edit, create, delete, and sometimes move these elements and change the web page completely. For a simplified example, suppose you wanted to take a particular <div> tag and put red text inside it. In your JavaScript code, first you would find the div tag and assign it to a variable. You now have the variable div_tag, and you can add text to it in JQuery with the html() function (note that this function replaces the current contents of the tag rather than appending). It has the text now but it isn't red. Use JQuery's css() function to add a color to div_tag (basically you are editing it's style attribute). I skipped over the part about how we find a particular div, and we're going to cover that now, because that's the really important thing to learn about JQuery.
Selectors and JQuery
Selectors are a syntax entered as strings into JQuery functions to find something. By default it searches the current HTML document, but selectors can be used on any text. To get you started with the selector syntax let's go back to the previous example where we want to assign a particular div to the variable div_tag so we can manipulate it. I'm using the $ sign in place of the word JQuery, because this is a common and acceptable way to abbreviate JQuery in code, but it's the same, JQuery() or $().
div_tag = $('div');
This assigns a div element to the variable div_tag right? Almost right, it actually selects all div tags and now div_tag is basically equal to all div tags. It's normal to be able to treat a group of elements as a variable like this, but we want to reduce that group to 1 element.
div_tag = $('div').eq(0);
That basically says, find all div tags, and give us the first, which is the one at index 0. That might work fine, but let's assume the div we want is the following HTML, and at an unknown position in the document:
<div id="message"></div>
Selecting an element with a particular id is easy, if you've used CSS this may not surprise you.
div_tag = $('#message');
That returns the element with the id attribute set to message, similar to the above example. There is only supposed to be 1 of each id in a document, and if that rule is broken then you will get multiple tags selected this way. The complete code for our example is:
div_tag = $('#message');
div_tag.html("Our new message...");
div_tag.css("color", "red");
Other Things to Do With JQuery
Events
Javascript can have code defined for events such as key presses. You can more easily make an action occure when a user presses a key if you are using JQuery.
Effects
Setting black text to red is just the beginning, JQuery can automate various effects that can make your web page animated and interactive.
jQuery UI
JQuery UI can give you greatly enhanced forms and other user interfaces providing widgets, themes, and more in a single package.
Plug-ins
If JQuery alone can't do something there's probably a plug-in for it that can. Extending JQuery can give you a powerful toolkit and may allow you to simplify your on page JavaScript to just a few lines. You can easily extend JQuery yourself with JavaScript code.
No comments:
Post a Comment