j$ = Jquery.noconflict ();
j$ ("div"). addclass ("a");
Choose The root of jQuery is its ability to select and manipulate certain elements on the page. In a sense, there is a need to surround these objects to build a valid JQuery library. So, in the face of a lot of options available on a normal HTML page, you need a way to quickly and efficiently select the elements you need to use on the page, and select only the elements you need (no more or less). JQuery provides a number of powerful options as we wish, helping us find and select objects on the page. JQuery creates its own selection syntax, and this syntax is easy to master. (The functions used by most of the following examples will remain discussed in the next article, but their functionality should be straightforward). Essentially, the selection process in JQuery is a huge filtering process, with every element on the page passing through the filter, which returns a matching object, or an array of matched objects that can be traversed. The first 3 examples are the most common. They look for objects through HTML tags, ids, or CLASS. Html To get an array of all the matching HTML elements in a page, you only need to pass the HTML tags (without parentheses) to the JQuery search field. This is a "quick but rough" way to find objects. This is useful if you want to attach a property to a generic HTML element. Listing 5. HTML selection
This is the every <div> tag in the page. Note that it would show
//Every <div>, not the The "the", or the last matching.
Traversing Arrays is discussed later in the article.
$ ("div"). Show ();
This is give a red background to every <p> tag in the page.
$ ("P"). CSS ("Background", "#ff0000"); |
Id The correct page setup requires that each ID on the page be unique, although sometimes it is not (intentionally or unintentionally). When using ID selection, JQuery returns only the first matching element because it requires you to follow the correct page design. If you need to attach a tag to several elements on the same page, you should choose to use the CLASS tag. Listing 6. ID selection
This is set the InnerHTML of a SPAN element with the ID of ' sampletext ' to ' Hi '.
The initial "#" in the command. This is the syntax used by jQuery to search
//For IDs, and must be included. If It is excluded, JQuery would search for the HTML
//tag instead, and with no <sampleText> tags on a page, would Ultimately do
//No, leading to frustrating and hard-to-find bugs (not so, has ever
//happened to me Of course).
$ ("#sampleText"). HTML ("Hi"); |
CLASS The CLASS is very similar to the ID, but the difference is that it can be used for one or more elements on a page. As a result, multiple elements on the same page can still have the same CLASS, although only one ID is limited to each element of the same page. This allows you to execute functions across multiple elements on a single page, and simply pass in a CLASS name. Listing 7. CLASS selection
This would create a red background on every element in the page with a CLASS of
//"Redback". Notice that it doesn ' t matter which the HTML element this ' redback '
//CLASS tag are attached to. Also Notice the period in the front of the "Query
//term--this is the" JQuery syntax for finding the CLASS names.
$ (". Redback"). CSS ("Background", "#ff0000");
<p class= "Redback" >this is a paragraph</p> <div
"class=" Redback are a big >this
<table class= "Redback" ><tr><td>sample table</td></tr></table>
|
Merge search criteria You can combine the above 3 search criteria with all of the following filters in one search. By separating each search condition by using, the search returns a set of results that match the search terms. Listing 8. Merge Search
This'll hide every <p>, <span>, or <div>.
$ ("p, span, div"). Hide (); |
More Filters Although these 3 search parameters are undoubtedly the most common in jQuery, there are many other search parameters that can help you quickly find the elements you need on a page. These filters begin with ":" to indicate that they are filters in the JQuery search term. Although they can also be used as separate search criteria, they are designed to work with the above 3 search criteria, allowing you to adjust your search criteria to find the specific elements you need. listing 9. More Filters
This'll hide every <p> tag on a page
$ ("P"). Hide ();
This would hide the the "a" page and no matter its HTML tag
$ (": a"). Hide ();
Notice how this can be used into combination to provide more fine tuning of
//search criteria. This would hide only the <p> tag on a given page.
$ ("P:first"). Hide (); |
You can use more than one filter as a search element. While I'm not listing all of the filters here (this is the task of the API page), some of these filters are handy for working with pages and search elements. I'll focus on some of the most important filters in the Selection package, which are the form element filters. Today's rich Internet applications are more concerned with forms and the elements contained therein (text fields, buttons, check boxes, radio buttons, and so on) that collect and transmit information from the server, or gather information and transfer to the server. Because of their important role in RIA, these filters are important in today's WEB applications when working with JQuery. These filters work the same way as the filters described earlier and also begin with ":" to indicate that they are filters. Similarly, they can be used with other search filters to refine search conditions. Therefore, a ": text" search filter returns each text field on the page, and a ". Largefont:text" search filter returns only the text fields on the page that are part of the "Largefont" class. This allows you to further refine and manipulate the form elements. The form filter also includes each attribute of the element, and understanding this knowledge is beneficial to the developer. Search filters such as ": Checked", ":d isabled" and ": Selected" will further refine search conditions for specific searches. Traverse Now that you've learned how to search for and filter all the elements on a page, you need an efficient way to traverse the results and process the elements further. Naturally, JQuery provides several ways to traverse search results. The first and most commonly used traversal method is the each () function. This is the same as the "for loop" function, traversing each element and incrementing the element by iterating through the iteration. In addition, a reference to each element in the loop can be implemented through "this" (for general JavaScript syntax) or $ (this) (for JQuery commands). Let's take a look at the following example. Listing 10. Each loop
Would loop through each <p> tag on the page. Notice the use of the '
//inline function here--this is analogous with the anonymous classes in Java.
You can either call a separate function, or write a inline function as this.
var increment = 1;
$ ("P"). each (the function () {
//Now add a paragraph count in front of each of them. Notice How do we use the
//$ (this) variable to reference each of the paragraph elements individually.
$ (this). Text (increment + "." + $ (This). text ());
increment++;
}); |
Because the search results are stored in an array, you definitely want the function to traverse the array just as you would a data object in another programming language. Therefore, to find the length of a given search result, you can call $ () on the array. length. Listing 11 shows more array traversal functions that can be applied to array traversal in other programming languages. listing 11. Other array Functions
The EQ () function lets your reference an element in the array directly.
In this case, it'll get the 3rd paragraph (0 referenced of course) and hide it
$ ("P"). EQ (2). Hide ();
The slice () function lets you with the input a start and a end index in the array, to
//create a subset of the array. This would hide the 3rd through 5th paragraphs on
the//page
$ ("P"). Slice (2,5). Hide (); |
In addition to these array traversal functions, JQuery provides functions that allow you to look up elements that are nested around search terms. Why is this useful? For example, we often need to embed a text label next to the picture, or embed an error message next to the form element. Use these commands to find a specific FORM element, and then place the error message directly next to the form element by placing the form element in the next element (span tag). Listing 12 shows an example of this design: Listing 12. Example next () function
<input type=text class=validate><span></span>
function validateform ()
{
$ (". Validate:text "). each (function () {
if ($ (). val () =" ")
//We ll loop through each TextField on the page with a CL Ass of "Validate"
//And if they are blank, we'll put text in the <span> immediately afterwards
//with th e error message.
$ (this). Next (). HTML (' This field cannot is blank ');
}
|
The knowledge that is learned in general To learn how to use these knowledge together, you can view the sample applications included in this article (see Resources section). Here's a quick introduction to the sample application. I'll use this sample application in all the articles in this series because it uses a lot of different jQuery samples, and almost everyone is familiar with the application-a rich Internet application that handles Web mail. The sample application is a Simple mail client that leverages JQuery to give the user the impression that the e-mail client is very similar to a desktop application. At the end of the last article, you will see how this simple application creates this feeling for the user and how simple it is to use JQuery to implement this functionality. The focus of this article is the Select All/deselect all check box, which appears at the top of the left column of the Web Mail table (highlighted below). When the check box is selected, it selects each check box for that column, and when the check box is deselected, it cancels all the check boxes for that column. Figure 2. Select all check box
Listing 13. The knowledge that is learned in general
<!--the Creating the Select all checkbox itself. We give it a unique ID on the page--> <input type=checkbox id=selectall> <!--the "next" is giving each
The rows their own checkbox. We put each row's checkbox into the ' selectable ' class, since there can is many rows, and we want each of the rows ' checkb Oxes to have the same behavior. --> <input Type=checkbox class=selectable> <!--The final step are bringing it all together with some jQuery Code. -->//Remember so all JQuery Setup code must is in this document.ready () function,//or contained within its own
function in order to function correctly. $ (document). Ready (function () {//We use the JQuery selection syntax of the SelectAll checkbox on the page// The ' # ' which signifies ID), and we tell JQuery to call the SelectAll ()//function every time someone clicks on the CHEC
Kbox (We ll get to Events in A//future article). $ ("#selectall"). Click (SelectAll);
}); This function is called every time someone clicks on the SelectAll checkbox function SelectAll () {/ Determines if the SelectAll checkbox is checked or not. The attr ()//function, discussed in a future article, simply returns an attribute on the//given object.
In this case, it returns a Boolean if true, or a undefined if//it's not checked.
var checked = $ ("#selectall"). attr ("checked"); Now we use the JQuery selection syntax to find all the "checkboxes on the" page//with the selectable class added to th EM (each row ' s checkbox). We get a array//of results back to this selection, and we can iterate through them using the '//each () function, le Tting us work with a. Inside the//each () function, we can use the $ (this) variable to reference per individual//result.
Thus, inside each loop, it finds the value of each checkbox and matches//it to the SelectAll checkbox. $ (". Selectable"). each (function () {var subchecked = $ (this). attr ("checked");
if (subchecked!= checked) $ (this). Click ();
}); } |
Conclusion JQuery is a very popular JavaScript library in the WEB application development community and will become more important as rich Internet applications become more popular. Since many companies migrate in-house applications online and move daily desktop applications (including word processors and spreadsheets) online, simplifying the development and implementation of Cross-platform support for JavaScript libraries will be a necessary technology for designing application architectures. The first installment of this series on jquery describes the jquery syntax, how to use jquery correctly in your own JavaScript code, and how to avoid conflicts when using other libraries in conjunction. In addition, this article introduces the jquery search and selection syntax, which are the basis for other jquery features. It allows you to quickly and easily find the page elements that you want. The article also discusses how to traverse search results, allowing you to process elements individually. These two aspects of jquery are the foundation of the next article in this series, as well as the basis of all jquery code. Finally, a demo application is introduced, which is a rich client Web mail application. In this article, you create the Select all/deselect all check box with the knowledge of jQuery, and you can create a widget that is very common on many Web sites with just a few lines of code. The next article will add some interaction to this sample WEB application. You'll learn how to handle page events (click Elements, button clicks, combo box selections, and so on), get values from elements on the page, and modify the standard CSS on the page to change colors, layouts, and so on without reloading the page. |