Read All the Html Again Jquery

1. Domicile
2. Features
3. Spider web Design

Go off to a fast start with jQuery

This is an edited excerpt from Chapter 7 of Murach's JavaScript and jQuery, published by Murach Books

What jQuery is

jQuery is a free, open up-source, JavaScript library that provides dozens of methods for common web features that make JavaScript programming easier. Beyond that, the jQuery functions are coded and tested for cross-browser compatibility, so they will piece of work in all browsers.

Those are two of the reasons why jQuery is used past more than half of the x,000 about-visited web sites today. And that's why jQuery is commonly used past professional web developers. In fact, you can think of jQuery every bit one of the 4 technologies that every web developer should know how to use: HTML, CSS, JavaScript, and jQuery. But don't forget that jQuery is actually JavaScript.

How to include jQuery in your web pages

If you get to the web site that's shown in this figure, you'll find a download push that lets you download the single file that contains the jQuery core library. By default, the version that'southward downloaded is a compressed version that today is around 32KB. Equally a consequence, this version loads speedily into browsers, which is some other reason why developers like jQuery.

The other version is uncompressed and currently about 247KB. If you download this version, yous can study the JavaScript code that's used in the library. But beware, this lawmaking is extremely complicated.

In one case you lot've downloaded the compressed version of the core library, yous can include it in a web page past coding a script statement like the beginning one in this fig- ure. And then, if you lot store the file on your own computer or a local web server, you'll exist able to develop jQuery applications without being connected to the Net. For production applications, though, you'll demand to deploy the file to your Internet spider web server.

In this script argument, the file name includes the version number, just yous tin can utilise any file name yous want. However, if the file proper name doesn't include the version number, it'due south easy to lose track of which version you're using.

The other way to include the jQuery library in your web applications and the 1 nosotros recommend is to get the file from a Content Delivery Network (CDN). A CDN is a web server that hosts open-source software, and the Google, Microsoft, and jQuery web sites are CDNs for getting the jQuery libraries. In the second example in this figure, the script chemical element uses the jQuery CDN with a URL that gets the latest version of jQuery, and that's the way all of the applications in this book include the jQuery library.

The benefit to using a CDN is that you lot don't take to download the jQuery file. This works especially well with the jQuery CDN and the "latest" URL. Then, yous don't take to alter the URL when a new release becomes available. The disadvantage is that yous have to be continued to the Cyberspace to use a CDN.

What jQuery offers

• Dozens of methods that make it easier to add JavaScript features to your web pages
• Methods that are tested for cross-browser compatibility

How to include the jQuery file subsequently you lot've downloaded information technology to your computer

              <script src="jquery-1.8.two.min.js"></script>            

How to include the jQuery file from a Content Delivery Network (CDN)

              <script src="http://code.jquery.com/jquery-latest.min.js"></script>            

Description

• jQuery is a gratis, open-source, JavaScript library that provides methods that make JavaScript programming easier. Today, jQuery is used by more than l% of the ten,000 well-nigh-visited web sites, and its popularity is growing rapidly.
• The jQuery download comes in two versions. One version (min) is a compressed version that is relatively minor and loads fast. The other version is uncompressed so yous tin can employ it to study the JavaScript code in the library.
• If yous include the jQuery file from a Content Delivery Network (CDN), you don't take to provide it from your own server, only then yous can't piece of work offline.
• The jQuery CDN now provides a link that volition always evangelize the latest version of jQuery. That'south the way the script element is coded in all of the applications in this volume.
• If yous download the jQuery file to your system, you lot can change the filename so information technology's simpler, but then you may lose track of what version you're using.

How jQuery tin simplify JavaScript development

To show you how jQuery can simplify JavaScript development, figure vii-ii shows both the JavaScript and the jQuery for the FAQs application that you lot learned how to develop in chapter 6. If you're similar most people who are learning JavaScript, you probably found the JavaScript lawmaking for this application both complicated and disruptive. That's because it is.

In contrast, the jQuery code takes less than half as many lines of code. You'll also find that it is much easier to understand once you learn how to use the JQuery selectors, methods, and consequence methods. And you'll start learning those skills correct afterward this introduction. Here's the code:

The user interface for the FAQs application

The JavaScript for the application

              var $ = function (id) { render document.getElementById(id);} window.onload = function () { var faqs = $("faqs"); var h2Elements = faqs.getElementsByTagName("h2"); var h2Node; for (var i = 0; i < h2Elements.length; i++ ) { h2Node = h2Elements[i]; // Adhere event handler h2Node.onclick = function () { var h2 = this; // h2 is the electric current h2Node object if (h2.getAttribute("grade") == "plus") { h2.setAttribute("class", "minus"); } else { h2.setAttribute("class", "plus"); } if (h2.nextElementSibling.getAttribute("course") == "closed") { h2.nextElementSibling.setAttribute("course", "open up"); } else { h2.nextElementSibling.setAttribute("grade", "closed"); } } }}            

The jQuery for the application

              $(certificate).ready(function() { $("#faqs h2").toggle( role() { $(this).addClass("minus"); $(this).next().show(); }, function() { $(this).removeClass("minus"); $(this).next().hide(); } ); // finish toggle}); // end set            

Incidentally, jQuery uses CSS selectors to select the HTML elements that the methods should be practical to. For instance:

              $("#faqs h2")            

is a jQuery selector for the CSS selector

              #faqs h2            

which selects all of the h2 elements in the element with "faqs" as its id. In fact, jQuery supports all of the CSS selectors including the CSS3 selectors, even in browsers that don't support all of the CSS3 selectors. This is another reason why developers like jQuery.

How jQuery tin affect testing and debugging

When y'all use jQuery to develop applications, you can use the aforementioned testing and debugging skills that y'all learned in chapter 4. Remember, though, that a call to a jQuery method is a call to the jQuery file that you lot specify in a script element in the head section of the HTML. In other words, when your code executes a jQuery method, it is the JavaScript in the jQuery file that does the processing.

So, if the jQuery code tin't be executed, the display in Firebug or in the mistake console of the browser will bespeak to a statement in the jQuery file. This can happen, for example, because a faulty parameter is passed to a jQuery method. Unfortunately, the data in Firebug or the fault panel doesn't tell y'all which statement in your lawmaking caused the trouble. Instead, you have to use the other debugging techniques to find the problems and fix it.

In most cases, though, Firebug and the mistake panel of the browser do pro- vide data that helps you find and gear up the bug. So this is a small problem that is more than compensated for by the benefits that you go from using jQuery.

How jQuery UI and plugins can simplify JavaScript development

As well the cadre jQuery library, jQuery provides the jQuery UI (User Interface) library. The functions in this library employ the core jQuery library to build avant-garde features that tin be created with just a few lines of code. These features include themes, effects, widgets, and mouse interactions.

For instance, the browser display in figure vii-3 shows the FAQs application as a jQuery UI widget known as an accordion. To implement this widget, you just need the 3 lines of JavaScript code that are highlighted, and that also applies the formatting that's shown.

To use jQuery UI, you lot include a jQuery UI library file in your web pages in much the same way that you lot include the jQuery core library. You also include a jQuery UI CSS file that provides the themes for jQuery UI. In section 3, y'all'll acquire how to do that, and you'll acquire how to use the features of jQuery UI.

Because jQuery UI tin brand JavaScript development even easier than it is when using jQuery, it makes sense to utilise jQuery UI whenever information technology provides an effect, widget, or mouse interaction that y'all need. Go on in mind, though, that jQuery UI is limited, and so yous'll however need jQuery for most of your web applica- tions. As a result, you should retrieve of jQuery UI as an add together-on that you should learn how to use after you master jQuery.

Besides jQuery UI, the jQuery web site provides access to dozens of plugins that accept been developed for jQuery. These plugins provide college-level functions like data validation and drop-downward menus that require minimal coding for their implementation. To facilitate the evolution of plugins, jQuery provides specifications that help standardize the mode that plugins are implemented. Plugins are i more reason why developers similar jQuery.

Like jQuery UI, plugins are libraries that make utilize of the cadre jQuery library. In fact, yous tin can retrieve of jQuery UI as a plugin. To use a plugin, y'all use a script element to include the plugin file in a spider web page, and you lawmaking that script element after the script chemical element for the jQuery core library. In chapter 11, y'all'll acquire how to get the most from plugins, and you'll also learn how to create your own plugins.

In practice, information technology makes sense to await outset for a plugin that implements a characteristic that you want to add together to a spider web page. If you tin can find 1, you lot may be able to practise in a few hours what would otherwise take a few days. Next, if you lot can't find a suitable plugin, information technology makes sense to come across whether jQuery UI can facilitate the imple- mentation of the characteristic. Finally, if neither a plugin nor jQuery UI can assist you implement a feature, you accept to use jQuery to develop information technology. That's why you lot need to master all of the jQuery skills in this section.

The FAQs application as a jQuery UI accordion

The HTML for a jQuery UI accordion

              <div id="accordion"> <h3><a href="#">What is jQuery?</a></h3> <div> <!-- panel contents --> </div> <h3><a href="#">Why is jQuery becoming so popular?</a></h3> <div> <!-- console contents --> </div> <h3><a href="#">Which is harder to learn: jQuery or JavaScript?></a></h3> <div> <!-- panel contents --> </div></div>            

The JavaScript code for the jQuery UI accordion

              <script> $(document).fix(function() { $("#accordion").accordion();});</script>            

Some typical plugin functions

• Data validation
• Slide shows
• Carousels

Clarification

• jQuery UI is a free, open-source, JavaScript library that provides higher-level effects, widgets, and mouse interactions that can exist customized by using themes. In section 3, you'll acquire how to use jQuery UI.
• A plugin is a JavaScript library that provides functions that work in conjunction with jQuery to make it easier to add features to your web applications. In chapter 11, yous'll learn how to use some of the most useful plugins, and you'll also acquire how to create your ain plugins.
• In general, if you can discover a plugin or jQuery UI characteristic that does what you want information technology to do, y'all should utilize it. Oft, though, y'all won't be able to find what you want so you'll need to develop the feature with just the core jQuery library.

The basics of jQuery programming

In the side by side three figures, you're going to acquire the basics of jQuery program- ming. Then, yous'll study an application that uses these skills. That volition show you how jQuery simplifies JavaScript programming.

How to code jQuery selectors

When you use jQuery, you commencement past selecting the element or elements that you want to apply a jQuery method to. To exercise that, y'all can use jQuery selectors as shown beneath.

To lawmaking a jQuery selector, yous beginning by coding the dollar sign ($) followed by set of parentheses that contains a set of quotation marks. And then, within the quotation marks, y'all code the CSS selector for the element or elements that y'all want to select. This is shown by the syntax summary at the acme of this figure.

The HTML and the examples that follow show how piece of cake it is to select ane or more than elements with jQuery. For instance, the beginning selector in the kickoff group of examples selects all <p> elements within the entire document. The 2nd selector selects the element with "faqs" as its id. And the tertiary selector selects all elements with "plus" as the value of its grade attribute.

In the second grouping of examples, you tin can run into how other types of CSS selectors are coded with jQuery. Hither, you tin can see how descendants, adjacent siblings, general siblings, and children are coded. For example, the first selector gets all <p> elements that are descendants of the element with "faqs" equally its id. That includes all of the <p> elements in the HTML in this figure.

In contrast, the second selector gets the div elements that are adjacent siblings to the h2 elements, which includes all of the div elements. The 3rd selector gets all <p> elements that are siblings of ul elements, which selects the ane <p> chemical element in the 2nd div element. And the quaternary selector gets all ul elements that are children of div elements, which selects the ul element in the second div element.

The third group of examples shows how to code multiple selectors. To do that, you separate them with commas, just as you do with CSS.

The syntax for a jQuery selector

              $("selector")            

The HTML for the elements that are selected by the examples

              <section id="faqs"> <h1>jQuery FAQs</h1> <h2 class="plus">What is jQuery?</h2> <div> <p>jQuery is a library of the JavaScript functions that you're most likely to demand as you develop web sites. </p> </div> <h2 class="plus">Why is jQuery condign and so popular?</h2> <div> <p>3 reasons:</p> <ul> <li>It's gratis.</li> <li>It lets you become more washed in less time.</li> <li>All of its functions cross-browser compatible.</li> </ul> </div></section>            

How to select elements by element, id, and class

By chemical element type: All <p> elements in the unabridged document

              $("p")            

By id: The element with "faqs" as its id

              $("#faqs")            

By class: All elements with "plus" equally a class

              $(".plus")            

How to select elements by human relationship

Descendants: All <p> elements that are descendants of the section element

              $("#faqs p");            

Adjacent siblings: All div elements that are adjacent siblings of h2 elements

              $("h2 + div")            

General siblings: All <p> elements that are siblings of ul elements

              $("ul p")            

Children: All ul elements that are children of div elements

              $("div > ul")            

How to code multiple selectors

              $("#faqs li, div p")$("p + ul, div p")            

Description

• When you lot use jQuery, the dollar sign ($) is used to refer to the jQuery library. Then, you tin can code selectors by using the CSS syntax within quotation marks within parentheses.

How to phone call jQuery methods

Once you've selected the chemical element or elements that you lot want to apply a method to, you telephone call the method using the syntax shown at the pinnacle of the case below. This is the same way that you call a method of any object. You code the selector that gets the element or elements, the dot, the method name, and whatsoever parameters inside parentheses.

To become y'all started with jQuery, the table in this figure summarizes some of the jQuery methods that you'll use the virtually. For instance, the val method without a parameter gets the value from a selected text box or other course control, and the val method with a parameter sets the value in a selected text box or other form control. The offset ii examples afterwards the tabular array show how this works.

Similarly, the text method without a parameter tin can be used to get the text of a selected chemical element, and the text method with a parameter can be used to set the text of a selected chemical element. Methods like these are ofttimes referred to as getter and setter methods. Here, tertiary example illustrates the setter version of the text method, which sets the text of an chemical element to "Email address is required".

The fifth method in the table is the next method, which is used to get the next (or adjacent) sibling of an element. This method is ofttimes followed by some other method. To exercise that, you use object chaining, which works only every bit it does with JavaScript. This is illustrated by the 4th example. Here, the next method gets the side by side sibling after the element that has been selected, and the text method sets the text for that sibling.

The final two methods in the table are the submit and focus methods, which are just similar the JavaScript submit and focus methods. The submit method sub- mits the information for a selected form to the server, and the focus method moves the focus to the selected grade control or link.

In a moment, you'll see how these selectors and methods work in an application. Merely first, you lot need to acquire how to set up the event handlers for an application.

The syntax for calling a jQuery method

              $("selector").methodName(parameters)            

Some common jQuery methods

Examples

How to go the value from a text box

              var gallons = $("#gallons").val();            

How to set the value for an input element

              $("#gallons").val("");            

How to set the text in an chemical element

              $("#email_address_error").text("Email address is required");            

How to set the text for the next sibling with object chaining

              $("#last_name").next().text("Last proper noun is required");            

How to submit a form

              $("#join_list").submit();            

How to move the focus to a form command or link

              $("#email_address").focus();            

Clarification

• To call a jQuery method, you lawmaking a selector, the dot operator, the method name, and any parameters within parentheses. So, that method is applied to the element or elements that are selected by the selector.
• When you use object chaining with jQuery, you lot code one method after the other. This works because each method returns the advisable object.
• If the selector for a method selects more than than one chemical element, jQuery applies the method to all of the elements so you don't take to code a loop to do that.

How to use jQuery issue methods

When you lot use jQuery, you use event methods to attach event handlers to events. To do that, you lot use the syntax shown at the top of the example below. First, y'all lawmaking the selector for the chemical element that volition initiate the event like a button that will be clicked. So, yous code the name of the effect method that represents the event that you lot want to use. Terminal, you code a role that will be the event handler for the effect within parentheses.

In the table in this figure, the two event methods that yous'll apply the nigh are summarized. The ready outcome is the jQuery alternative to the JavaScript load result, except that it works better. Dissimilar the load event, the ready outcome is triggered equally soon equally the DOM is built, even if other elements similar images are still being loaded into the browser. This ways that the user tin can start using the web folio faster.

Because the DOM usually has to be built before y'all can use JavaScript or jQuery, you'll probably utilize the fix result method in every JavaScript applica- tion that you develop. The examples in this figure show ii ways to do that. In the long form, you use document equally the selector for the web page followed by the dot, the method name (ready), and the function for the consequence handler.

In the short form, yous can omit the selector and event method name and just code the function in parentheses after the dollar sign. Although this form is ofttimes used past professional developers, all of the examples in this volume use the long class. That way, it'south clear where the ready event handler starts.

The next example in this figure shows an event handler for the click event of all h2 elements. This is coded just like the event handler for the ready result except h2 is used as the selector and click is used as the name of the event method.

The last example in this effigy shows how you code an event handler within the set event handler. Note hither that the endmost brace, parenthesis, and semicolon for each effect handler is critical. As you can guess, it's easy to omit one of these marks or get them out of sequence so this is a frequent source of errors. That'due south why professional person programmers often code inline comments after the ending marks for each event handler to identify which event handler the marks are for.

The syntax for a jQuery event method

              $(selector).eventMethodName(part() { // the statements of the issue handler});            

Two mutual jQuery outcome methods

Two ways to code an event handler for the jQuery prepare event

The long way

              $(certificate).prepare(part() { alert("The DOM is ready");});            

The brusk manner

              $(function(){ // (document).ready is assumed alarm("The DOM is set");});            

An event handler for the click event of all h2 element

              $("h2").click(part() { alarm("This heading has been clicked");});            

The click event handler within the ready result handler

              $(document).set(office() { $("h2").click(role() { warning("This heading has been clicked"); }); // end of click consequence handler}); // cease of ready outcome handler            

Description

• To code a jQuery event handler, you lot code a selector, the dot operator, the name of the jQuery outcome method, and an anonymous part that handles the event within parentheses.
• The outcome handler for the prepare upshot volition run any methods that information technology contains as soon as the DOM is prepare, even if the browser is loading images and other content for the folio. This works better than the JavaScript onload event, which doesn't occur until all of the content for the page is loaded.
• In this book, the ready event is always coded the long way that's shown above. In practise, though, many programmers use the brusk way.
• When coding one issue handler within some other, the employ of the closing braces, paren- theses, and semicolons is critical. To assist get this right, many programmers code inline comments after these punctuation marks to place the ends of the handlers.

This is an edited excerpt from Chapter seven of Murach's JavaScript and jQuery, published by Murach Books

Related articles

fairleyloul1968.blogspot.com

Source: https://www.creativebloq.com/javascript/get-fast-start-jquery-6135588

Share this post