From 19d5d889f82c22285ab4040ffc250567f3b315b9 Mon Sep 17 00:00:00 2001 From: Rebecca Murphey Date: Sun, 3 Mar 2013 16:59:28 -0600 Subject: [PATCH 1/2] first pass at fixing up references to $.fn methods see #291 --- page/ajax/ajax-and-forms.md | 10 +-- page/ajax/jquery-ajax-methods.md | 32 ++++---- page/effects/custom-effects.md | 12 +-- page/effects/intro-to-effects.md | 80 +++++++++---------- page/events/event-basics.md | 56 ++++++------- page/events/event-helpers.md | 14 ++-- page/events/introduction-to-custom-events.md | 12 +-- page/events/triggering-event-handlers.md | 16 ++-- .../detach-elements-before-work-with-them.md | 4 +- page/performance/optimize-selectors.md | 4 +- .../use-stylesheets-for-changing-css.md | 4 +- page/using-jquery-core/attributes.md | 8 +- .../css-styling-dimensions.md | 6 +- page/using-jquery-core/data-methods.md | 10 +-- .../dollar-object-vs-function.md | 9 ++- .../manipulating-elements.md | 34 ++++---- page/using-jquery-core/traversing.md | 8 +- page/using-jquery-core/utility-methods.md | 18 +++-- .../working-with-selections.md | 10 +-- 19 files changed, 177 insertions(+), 170 deletions(-) diff --git a/page/ajax/ajax-and-forms.md b/page/ajax/ajax-and-forms.md index ce733210..5a54bd0f 100644 --- a/page/ajax/ajax-and-forms.md +++ b/page/ajax/ajax-and-forms.md @@ -2,16 +2,16 @@ title: Ajax and Forms level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- jQuery’s ajax capabilities can be especially useful when dealing with forms. There are several advantages, which can range from serialization, to simple client-side validation (e.g. "Sorry, that username is taken"), to [prefilters](http://api.jquery.com/extending-ajax/#Prefilters) (explained below), and even more! ### Serialization -Serializing form inputs in jQuery is extremely easy. Two methods come supported natively - `$.fn.serialize` and `$.fn.serializeArray`. While the names are fairly self-explanatory, there are many advantages to using them. +Serializing form inputs in jQuery is extremely easy. Two methods come supported natively: `.serialize()` and `.serializeArray()`. While the names are fairly self-explanatory, there are many advantages to using them. -The `serialize` method serializes a form's data into a query string. For the element's value to be serialized, it **must** have a `name` attribute. Please note that values from inputs with a type of `checkbox` or `radio` are included only if they are checked. +The `.serialize()` method serializes a form's data into a query string. For the element's value to be serialized, it **must** have a `name` attribute. Please note that values from inputs with a type of `checkbox` or `radio` are included only if they are checked. ``` // Turning form data into a query string @@ -21,7 +21,7 @@ $("#myForm").serialize(); // field_1=something&field2=somethingElse ``` -While plain old serialization is great, sometimes your application would work better if you sent over an array of objects, instead of just the query string. For that, jQuery has the `serializeArray` method. It's very similar to the `serialize` method listed above, except it produces an array of objects, instead of a string. +While plain old serialization is great, sometimes your application would work better if you sent over an array of objects, instead of just the query string. For that, jQuery has the `.serializeArray()` method. It's very similar to the `.serialize()` method listed above, except it produces an array of objects, instead of a string. ``` // Creating an array of objects containing form data @@ -61,7 +61,7 @@ $("#form").submit(function( event ) { // usually show some kind of error message here // this prevents the form from submitting - return false; + return false; } else { diff --git a/page/ajax/jquery-ajax-methods.md b/page/ajax/jquery-ajax-methods.md index 41a1c6ff..2f84965a 100644 --- a/page/ajax/jquery-ajax-methods.md +++ b/page/ajax/jquery-ajax-methods.md @@ -2,21 +2,21 @@ title : jQuery's Ajax-Related Methods level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- While jQuery does offer many Ajax-related convenience methods, the core -`$.ajax` method is at the heart of all of them, and understanding it is +`$.ajax()` method is at the heart of all of them, and understanding it is imperative. We'll review it first, and then touch briefly on the convenience methods. -I generally use the `$.ajax` method and do not use convenience methods. As +I generally use the `$.ajax()` method and do not use convenience methods. As you'll see, it offers features that the convenience methods do not, and its syntax is more easily understandable, in my opinion. -### `$.ajax` +### `$.ajax()` -jQuery’s core `$.ajax` method is a powerful and straightforward way of creating +jQuery’s core `$.ajax()` method is a powerful and straightforward way of creating Ajax requests. It takes a configuration object that contains all the instructions jQuery requires to complete the request. The `$.ajax` method is particularly valuable because it offers the ability to specify both success and @@ -27,7 +27,7 @@ documentation of the configuration options, visit documentation on api.jquery.com"). ``` -// Using the core $.ajax method +// Using the core $.ajax() method $.ajax({ // the URL for the request @@ -78,9 +78,9 @@ you're asking for, and verify that the Content-type header is accurate for the data type. For example, for JSON data, the Content-type header should be `application/json`. -### `$.ajax` Options +### `$.ajax()` Options -There are many, many options for the `$.ajax` method, which is part of its +There are many, many options for the `$.ajax()` method, which is part of its power. For a complete list of options, visit [http://api.jquery.com/jQuery.ajax/](http://api.jquery.com/jQuery.ajax/ "$.ajax documentation on api.jquery.com"); here are several that you will use @@ -108,7 +108,7 @@ the request. The scope in which the callback function(s) should run (i.e. what `this` will mean inside the callback function(s)). By default, `this` inside the callback -function(s) refers to the object originally passed to `$.ajax`. +function(s) refers to the object originally passed to `$.ajax()`. #### data @@ -157,17 +157,17 @@ all browsers. The URL for the request. -The `url` option is the only required property of the `$.ajax` configuration +The `url` option is the only required property of the `$.ajax()` configuration object; all other properties are optional. This can also be passed as the first -argument to $.ajax, and the options object as the second argument. +argument to `$.ajax()`, and the options object as the second argument. ### Convenience Methods -If you don't need the extensive configurability of `$.ajax`, and you don't care +If you don't need the extensive configurability of `$.ajax()`, and you don't care about handling errors, the Ajax convenience functions provided by jQuery can be useful, terse ways to accomplish Ajax requests. These methods are just -"wrappers" around the core `$.ajax` method, and simply pre-set some of the -options on the `$.ajax` method. +"wrappers" around the core `$.ajax()` method, and simply pre-set some of the +options on the `$.ajax()` method. The convenience methods provided by jQuery are: @@ -250,8 +250,8 @@ $.getJSON( "/details.php", function( resp ) { ### `$.fn.load` -The `$.fn.load` method is unique among jQuery’s Ajax methods in that it is -called on a selection. The `$.fn.load` method fetches HTML from a URL, and +The `.load()` method is unique among jQuery’s Ajax methods in that it is +called on a selection. The `.load()` method fetches HTML from a URL, and uses the returned HTML to populate the selected element(s). In addition to providing a URL to the method, you can optionally provide a selector; jQuery will fetch only the matching content from the returned HTML. diff --git a/page/effects/custom-effects.md b/page/effects/custom-effects.md index 0d460c33..60e235bb 100644 --- a/page/effects/custom-effects.md +++ b/page/effects/custom-effects.md @@ -1,16 +1,16 @@ --- -title : Custom Effects with $.fn.animate +title : Custom Effects with .animate() level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- jQuery makes it possible to animate arbitrary CSS properties via the -`$.fn.animate` method. The `$.fn.animate` method lets you animate to a set +`.animate()` method. The `.animate()` method lets you animate to a set value, or to a value relative to the current value. ``` -// Custom effects with `$.fn.animate`"> +// Custom effects with `.animate()`"> $("div.funtimes").animate({ left : "+=50", opacity : 0.25 @@ -25,7 +25,7 @@ $("div.funtimes").animate({ ```
-Color-related properties cannot be animated with `$.fn.animate` using jQuery +Color-related properties cannot be animated with `.animate()` using jQuery out of the box. Color animations can easily be accomplished by including the [color plugin](http://github.com/jquery/jquery-color). We'll discuss using plugins later in the book. @@ -39,7 +39,7 @@ jQuery includes only two methods of easing: swing and linear. If you want more natural transitions in your animations, various easing plugins are available. As of jQuery 1.4, it is possible to do per-property easing when using the -`$.fn.animate` method. +`.animate()` method. ``` // Per-property easing"> diff --git a/page/effects/intro-to-effects.md b/page/effects/intro-to-effects.md index a04cf3fc..bb884836 100644 --- a/page/effects/intro-to-effects.md +++ b/page/effects/intro-to-effects.md @@ -5,7 +5,7 @@ level: beginner ## Showing and Hiding Content -jQuery can show or hide content instantaneously with `$.fn.show` or `$.fn.hide`: +jQuery can show or hide content instantaneously with `.show()` or `.hide()`: ``` // Instantaneously hide all paragraphs @@ -15,12 +15,12 @@ $("p").hide(); $("div.hidden").show(); ``` -When jQuery hides an element, it sets its CSS `display` property to `none`. This means the content will have +When jQuery hides an element, it sets its CSS `display` property to `none`. This means the content will have zero width and height; it does not mean that the content will simply become transparent and leave an empty area on the page. -jQuery can also show or hide content by means of animation effects. You can tell -`$.fn.show` and `$.fn.hide` to use animation in a couple of ways. One is to pass -in a string-valued argument of `slow`, `normal`, or `fast`: +jQuery can also show or hide content by means of animation effects. You can tell +`.show()` and `.hide()` to use animation in a couple of ways. One is to pass +in a string-valued argument of `'slow'`, `'normal'`, or `'fast'`: ``` // Slowly hide all paragraphs @@ -30,8 +30,8 @@ $("p").hide("slow"); $("div.hidden").show("fast"); ``` -If you prefer more direct control over the duration of the animation effect, you -can pass the desired duration in milliseconds to `$.fn.show` and `$.fn.hide`: +If you prefer more direct control over the duration of the animation effect, you +can pass the desired duration in milliseconds to `.show()` and `.hide()`: ``` // Hide all paragraphs over half a second @@ -46,10 +46,10 @@ over the duration. ##Fade and Slide Animations -You may have noticed that `$.fn.show` and `$.fn.hide` use a combination of slide and fade effects -when showing and hiding content in an animated way. If you would rather show or hide content with -one effect or the other, there are additional methods that can help. `$.fn.slideDown` and `$.fn.slideUp` -show and hide content, respectively, using only a slide effect. Slide animations are accomplished by +You may have noticed that `.show()` and `.hide()` use a combination of slide and fade effects +when showing and hiding content in an animated way. If you would rather show or hide content with +one effect or the other, there are additional methods that can help. `.slideDown()` and `.slideUp()` +show and hide content, respectively, using only a slide effect. Slide animations are accomplished by rapidly making changes to an element's CSS `height` property. ``` @@ -58,9 +58,9 @@ $("p").slideUp( 800 ); // Show all hidden divs using a slide down animation over 0.6 seconds $("div.hidden").slideDown( 600 ); -``` +``` -Similarly `$.fn.fadeIn` and `$.fn.fadeOut` show and hide content, respectively, by means of a fade +Similarly `.fadeIn()` and `.fadeOut()` show and hide content, respectively, by means of a fade animation. Fade animations involve rapidly making changes to an element's CSS `opacity` property. ``` @@ -69,13 +69,13 @@ $("p").fadeOut( 1500 ); // Show all hidden divs using a fade in animation over 0.75 seconds $("div.hidden").fadeIn( 750 ); -``` +``` ##Changing Display Based on Current Visibility State -jQuery can also let you change a content's visibility based on its current visibility state. `$.fn.toggle` -will show content that is currently hidden and hide content that is currently visible. You can pass the -same arguments to `$.fn.toggle` as you pass to any of the effects methods above. +jQuery can also let you change a content's visibility based on its current visibility state. `.toggle()` +will show content that is currently hidden and hide content that is currently visible. You can pass the +same arguments to `.toggle()` as you pass to any of the effects methods above. ``` // Instantaneously toggle the display of all paragraphs @@ -88,8 +88,8 @@ $("img").toggle("slow"); $("div").toggle( 1800 ); ``` -`$.fn.toggle` will use a combination of slide and fade effects, just as `$.fn.show` and `$.fn.hide` do. You can -toggle the display of content with just a slide or a fade using `$.fn.slideToggle` and `$.fn.fadeToggle`. +`.toggle()` will use a combination of slide and fade effects, just as `.show()` and `.hide()` do. You can +toggle the display of content with just a slide or a fade using `.slideToggle()` and `.fadeToggle()`. ``` // Toggle the display of all ordered lists over 1 second using slide up/down animations @@ -102,34 +102,34 @@ $("blockquote").fadeToggle( 400 ); ##Doing Something After an Animation Completes A common mistake when implementing jQuery effects is assuming that the execution of the next method in your -chain will wait until the animation runs to completion. +chain will wait until the animation runs to completion. ``` // Fade in all hidden paragraphs; then add a style class to them (not quite right) $("p.hidden").fadeIn( 750 ).addClass("lookAtMe"); ``` -It is important to realize that `$.fn.fadeIn` above only *kicks off* the animation. Once started, the -animation is implemented by rapidly changing CSS properties in a JavaScript `setInterval()` loop. When -you call `$.fn.fadeIn`, it starts the animation loop and then returns the jQuery object, passing it along -to `$.fn.addClass` which will then add the `lookAtMe` style class while the animation loop is just +It is important to realize that `.fadeIn()` above only *kicks off* the animation. Once started, the +animation is implemented by rapidly changing CSS properties in a JavaScript `setInterval()` loop. When +you call `.fadeIn()`, it starts the animation loop and then returns the jQuery object, passing it along +to `.addClass()` which will then add the `lookAtMe` style class while the animation loop is just getting started. To defer an action until after an animation has run to completion, you need to use an animation callback -function. You can specify your animation callback as the second argument passed to any of the +function. You can specify your animation callback as the second argument passed to any of the animation methods discussed above. For the code snippet above, we can implement a callback as follows: ``` // Fade in all hidden paragraphs; then add a style class to them (correct with animation callback) $("p.hidden").fadeIn( 750, function(){ - // this = DOM element which has just finished being animated + // this = DOM element which has just finished being animated $( this ).addClass("lookAtMe"); }); ``` Note that you can use the keyword `this` to refer to the DOM element being animated. Also note -that the callback will be called for each element in the jQuery object. This means that if your -selector returns no elements, your animation callback will never run! You can solve this problem by +that the callback will be called for each element in the jQuery object. This means that if your +selector returns no elements, your animation callback will never run! You can solve this problem by testing whether your selection returned any elements; if not, you can just run the callback immediately. ``` @@ -151,9 +151,9 @@ if ( $someElement.length ) { jQuery provides some additional features for controlling your animations: -### `$.fn.stop` +### `.stop()` -`$.fn.stop` will immediately terminate all animations running on the elements in your selection. You might give +`.stop()` will immediately terminate all animations running on the elements in your selection. You might give end-users control over page animations by rigging a button they can click to stop the animations. ``` @@ -166,20 +166,20 @@ $("input").attr({ }).appendTo( document.body ); ``` -### `$.fn.delay` +### `.delay()` -`$.fn.delay` is used to introduce a delay between successive animations. For example: +`.delay()` is used to introduce a delay between successive animations. For example: ``` -// Hide all level 1 headings over half a second; then wait for 1.5 seconds +// Hide all level 1 headings over half a second; then wait for 1.5 seconds // and reveal all level 1 headings over 0.3 seconds $("h1").hide( 500 ).delay( 1500 ).show( 300 ); ``` ### `jQuery.fx` -The `jQuery.fx` object has a number of properties that control how effects are implemented. `jQuery.fx.speeds` maps -the `slow`, `normal`, and `fast` duration arguments mentioned above to a specific +The `jQuery.fx` object has a number of properties that control how effects are implemented. `jQuery.fx.speeds` maps +the `slow`, `normal`, and `fast` duration arguments mentioned above to a specific number of milliseconds. The default value of `jQuery.fx.speeds` is: ``` @@ -199,11 +199,11 @@ jQuery.fx.speeds.blazing = 100; jQuery.fx.speeds.excruciating = 60000; ``` -`jQuery.fx.interval` controls the number of frames per second that are -displayed in an animation. The default value is 13 milliseconds between -successive frames. You can set this a lower value for faster browsers -to make the animations run smoother. However this will mean more frames -per second and thus a higher computational load for the browser, so you +`jQuery.fx.interval` controls the number of frames per second that are +displayed in an animation. The default value is 13 milliseconds between +successive frames. You can set this a lower value for faster browsers +to make the animations run smoother. However this will mean more frames +per second and thus a higher computational load for the browser, so you should be sure to test the performance implications of doing so thoroughly. Finally, `jQuery.fx.off` can be set to true to disable all animations. Elements diff --git a/page/events/event-basics.md b/page/events/event-basics.md index 685d390c..44d4ef45 100644 --- a/page/events/event-basics.md +++ b/page/events/event-basics.md @@ -9,15 +9,15 @@ level: beginner ### Setting Up Event Responses on DOM Elements -jQuery makes it straightforward to set up event-driven responses on page elements. -These events are often triggered by the end user's interaction with the page, -such as when text is entered into a form element or the mouse pointer is moved. -In some cases, such as the page load and unload events, the browser itself will +jQuery makes it straightforward to set up event-driven responses on page elements. +These events are often triggered by the end user's interaction with the page, +such as when text is entered into a form element or the mouse pointer is moved. +In some cases, such as the page load and unload events, the browser itself will trigger the event. -jQuery offers convenience methods for most native browser events. These methods — -including `$.fn.click`, `$.fn.focus`, `$.fn.blur`, `$.fn.change`, etc. — are shorthand -for jQuery's `$.fn.on` method. The on method is useful for binding the same handler +jQuery offers convenience methods for most native browser events. These methods — +including `.click()`, `.focus()`, `.blur()`, `.change()`, etc. — are shorthand +for jQuery's `.on()` method. The on method is useful for binding the same handler function to multiple events, when you want to provide data to the event hander, when you are working with custom events, or when you want to pass an object of multiple events and handlers. @@ -30,7 +30,7 @@ $('p').click(function() { ``` ``` -// Equivalent event setup using the `$.fn.on` method +// Equivalent event setup using the `.on()` method $('p').on('click', function() { console.log('click'); }); @@ -38,9 +38,9 @@ $('p').on('click', function() { ### Extending Events to New Page Elements -It is important to note that `$.fn.on` can only create event listeners -on elements that exist *at the time you set up the listeners*. Similar elements created -after the event listeners are established will not automatically pick up event behaviors +It is important to note that `.on()` can only create event listeners +on elements that exist *at the time you set up the listeners*. Similar elements created +after the event listeners are established will not automatically pick up event behaviors you've set up previously. For example: ``` @@ -51,13 +51,13 @@ $(document).ready(function(){ console.log('A button with the alert class was clicked!'); }); // Now create a new button element with the alert class. This button - // was created after the click listeners were applied above, so it + // was created after the click listeners were applied above, so it // will not have the same click behavior as its peers $('button').addClass('alert').appendTo(document.body); }); ``` -Consult the article on event delegation to see how to use `$.fn.on` so that +Consult the article on event delegation to see how to use `.on()` so that event behaviors will be extended to new elements without having to rebind them. ### Inside the Event Handler Function @@ -85,9 +85,9 @@ The button or key that was pressed. Any data that was passed in when the event was bound. For example: ``` -// Event setup using the `$.fn.on` method with data +// Event setup using the `.on()` method with data $('input').on( - 'change', + 'change', {foo : 'bar'}, // associate data with event binding function(eventObject) { console.log('An input value has changed! ', eventObject.data.foo); @@ -139,9 +139,9 @@ $('a').click(function(eventObject) { ### Setting Up Multiple Event Responses -Quite often elements in your application will be bound to multiple events. If -multiple events are to share the same handling function, you can provide the event types -as a space-separated list to `$.fn.on`: +Quite often elements in your application will be bound to multiple events. If +multiple events are to share the same handling function, you can provide the event types +as a space-separated list to `.on()`: ``` // Multiple events, same handler @@ -153,8 +153,8 @@ $('input').on( ); ``` -When each event has its own handler, you can pass an object into `$.fn.on` with one or -more key/value pairs, with the key being the event name and the value being the function +When each event has its own handler, you can pass an object into `.on()` with one or +more key/value pairs, with the key being the event name and the value being the function to handle the event. ``` @@ -180,7 +180,7 @@ $('p').off('.myNamespace'); // unbind all events in the namespace ### Tearing Down Event Listeners -To remove an event listener, you use the `$.fn.off` method and pass in +To remove an event listener, you use the `.off()` method and pass in the event type to off. If you attached a named function to the event, then you can isolate the event tear down to just that named function by passing it as the second argument. @@ -203,28 +203,28 @@ $('p').off('click', bar); // foo is still bound to the click event Sometimes you need a particular handler to run only once — after that, you may want no handler to run, or you may want a different handler to run. jQuery -provides the `$.fn.one` method for this purpose. +provides the `.one()` method for this purpose. ``` -// Switching handlers using the `$.fn.one` method +// Switching handlers using the `.one()` method $('p').one('click', firstClick); function firstClick(){ console.log('You just clicked this for the first time!'); - // Now set up the new handler for subsequent clicks; + // Now set up the new handler for subsequent clicks; // omit this step if no further click responses are needed $(this).click(function() { console.log('You have clicked this before!'); }); } ``` Note that in the code snippet above, the `firstClick` function will be executed for -the first click on *each* paragraph element rather than the function being removed from +the first click on *each* paragraph element rather than the function being removed from *all* paragraphs when *any* paragraph is clicked for the first time. -`$.fn.one` can also be used to bind multiple events: +`.one()` can also be used to bind multiple events: ``` -// Using $.fn.one to bind several events +// Using .one() to bind several events $('input[id]').one('focus mouseover keydown', firstEvent); function firstEvent(eventObject){ @@ -233,5 +233,5 @@ function firstEvent(eventObject){ ``` In this case, the `firstEvent` function will be executed once *for each event*. For the snippet above, this means -that once an input element gains focus, the handler function will still execute for the first keydown event on that +that once an input element gains focus, the handler function will still execute for the first keydown event on that element. diff --git a/page/events/event-helpers.md b/page/events/event-helpers.md index 59a5e698..acfcbfd8 100644 --- a/page/events/event-helpers.md +++ b/page/events/event-helpers.md @@ -2,20 +2,20 @@ title: Event Helpers level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- jQuery offers two event-related helper functions that save you a few keystrokes. -### `$.fn.hover` +### `.hover()` -The `$.fn.hover` method lets you pass one or two functions to be run when the +The `.hover()` method lets you pass one or two functions to be run when the `mouseenter` and `mouseleave` events occur on an element. If you pass one function, it will be run for both events; if you pass two functions, the first will run for `mouseenter`, and the second will run for `mouseleave`.
-Prior to jQuery 1.4, the `$.fn.hover` method required two functions. +Prior to jQuery 1.4, the `.hover()` method required two functions.
``` @@ -27,11 +27,11 @@ $("#menu li").hover(function() { }); ``` -### `$.fn.toggle` +### `.toggle()` -The `$.fn.toggle` method is triggered by the "click" event and accepts two or +The `.toggle()` method is triggered by the "click" event and accepts two or more functions. Each time the click event occurs, the next function in the -list is called. Generally, `$.fn.toggle` is used with just two functions; +list is called. Generally, `.toggle()` is used with just two functions; however, it will accept an unlimited number of functions. Be careful, though: providing a long list of functions can be difficult to debug. diff --git a/page/events/introduction-to-custom-events.md b/page/events/introduction-to-custom-events.md index 0811c310..2543ff69 100644 --- a/page/events/introduction-to-custom-events.md +++ b/page/events/introduction-to-custom-events.md @@ -2,7 +2,7 @@ title: Introducing Custom Events level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- @@ -169,25 +169,25 @@ changeState custom event to all `$(".light")` elements is akin to having a class called `Light` with a method of `changeState`, and then instantiating new `Light` objects for each element with a classname of light. -### Recap: $.fn.on and $.fn.trigger +### Recap: `.on()` and `.trigger()` In the world of custom events, there are two important jQuery methods: -`$.fn.on` and `$.fn.trigger`. In the Events chapter, we saw how to use these +`.on()` and `.trigger()`. In the Events chapter, we saw how to use these methods for working with user events; for this chapter, it's important to remember two things: -- `$.fn.on` method takes an event type and an event handling function as +- `.on()` method takes an event type and an event handling function as arguments. Optionally, it can also receive event-related data as its second argument, pushing the event handling function to the third argument. Any data that is passed will be available to the event handling function in the `data` property of the event object. The event handling function always receives the event object as its first argument. -- `$.fn.trigger` method takes an event type as its argument. Optionally, it can +- `.trigger()` method takes an event type as its argument. Optionally, it can also take an array of values. These values will be passed to the event handling function as arguments after the event object. -Here is an example of the usage of `$.fn.on` and `$.fn.trigger` that uses +Here is an example of the usage of `.on()` and `.trigger()` that uses custom data in both cases: ``` diff --git a/page/events/triggering-event-handlers.md b/page/events/triggering-event-handlers.md index 0ef21fc0..c48b5cd1 100644 --- a/page/events/triggering-event-handlers.md +++ b/page/events/triggering-event-handlers.md @@ -2,20 +2,20 @@ title : Triggering Event Handlers level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- -jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the +jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the `.trigger()` method. ## What handlers can be .trigger()'d -jQuery's event handling system is a layer on top of native browser events. When an event handler is added using -`.on("click",function() {...})`, it can be triggered using jQuery's `.trigger("click")`because jQuery stores a -reference to that handler when it is originally added. Additionally, it will trigger the javascript inside the -"onclick" attribute. The `.trigger()` function cannot be used to mimic native browser events, such as -clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's +jQuery's event handling system is a layer on top of native browser events. When an event handler is added using +`.on("click",function() {...})`, it can be triggered using jQuery's `.trigger("click")`because jQuery stores a +reference to that handler when it is originally added. Additionally, it will trigger the javascript inside the +"onclick" attribute. The `.trigger()` function cannot be used to mimic native browser events, such as +clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events. ``` @@ -83,5 +83,5 @@ foo(); // instead of $("p").trigger("click") ``` A more complex architecture can built on top of trigger using the [publish-subscribe pattern](http://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) using [jQuery plugins](https://gist.github.com/661855). -With this technique, `$.fn.trigger` can be used to notify other sections of code that an application specific event has happened. +With this technique, `.trigger()` can be used to notify other sections of code that an application specific event has happened. diff --git a/page/performance/detach-elements-before-work-with-them.md b/page/performance/detach-elements-before-work-with-them.md index 6cc161a9..46e25744 100644 --- a/page/performance/detach-elements-before-work-with-them.md +++ b/page/performance/detach-elements-before-work-with-them.md @@ -2,12 +2,12 @@ title: Detach Elements to Work with Them level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- The DOM is slow; you want to avoid manipulating it as much as possible. jQuery -introduced `$.fn.detach` in version 1.4 to help address this issue, allowing you +introduced `.detach()` in version 1.4 to help address this issue, allowing you to remove an element from the DOM while you work with it. ``` diff --git a/page/performance/optimize-selectors.md b/page/performance/optimize-selectors.md index de55d4c6..9ce80e39 100644 --- a/page/performance/optimize-selectors.md +++ b/page/performance/optimize-selectors.md @@ -2,7 +2,7 @@ title: Optimize Selectors level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- @@ -22,7 +22,7 @@ $("#container div.robotarm"); $("#container").find("div.robotarm"); ``` -The `$.fn.find` approach is faster because the first selection is handled +The `.find()` approach is faster because the first selection is handled without going through the Sizzle selector engine — ID-only selections are handled using `document.getElementById()`, which is extremely fast because it is native to the browser. diff --git a/page/performance/use-stylesheets-for-changing-css.md b/page/performance/use-stylesheets-for-changing-css.md index 08c5969e..f7adbb76 100644 --- a/page/performance/use-stylesheets-for-changing-css.md +++ b/page/performance/use-stylesheets-for-changing-css.md @@ -2,11 +2,11 @@ title: Use Stylesheets for Changing CSS on Many Elements level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- -If you're changing the CSS of more than 20 elements using `$.fn.css`, consider +If you're changing the CSS of more than 20 elements using `.css()`, consider adding a style tag to the page instead for a nearly 60% increase in speed. ``` diff --git a/page/using-jquery-core/attributes.md b/page/using-jquery-core/attributes.md index af75f0c4..4a94520c 100644 --- a/page/using-jquery-core/attributes.md +++ b/page/using-jquery-core/attributes.md @@ -4,11 +4,11 @@ level : beginner --- An element's attributes can contain useful information for your application, so it's important to be able to get and set them. -## `$.fn.attr` +## `.attr()` -The `$.fn.attr` method acts as both a getter and a setter. As a setter, `$.fn.attr` can accept either a key and a value, or an object containing one or more key/value pairs. +The `.attr()` method acts as both a getter and a setter. As a setter, `.attr()` can accept either a key and a value, or an object containing one or more key/value pairs. -`$.fn.attr` as a setter: +`.attr()` as a setter: ``` // Setting attributes @@ -20,7 +20,7 @@ $("a").attr({ }); ``` -`$.fn.attr` as a getter: +`.attr()` as a getter: ``` // Getting attributes diff --git a/page/using-jquery-core/css-styling-dimensions.md b/page/using-jquery-core/css-styling-dimensions.md index 2901da43..7ab0e160 100644 --- a/page/using-jquery-core/css-styling-dimensions.md +++ b/page/using-jquery-core/css-styling-dimensions.md @@ -23,13 +23,13 @@ $("h1").css({ Note the style of the argument on the second line — it is an object that contains multiple properties. This is a common way to pass multiple arguments to a function, and many jQuery setter methods accept objects to set multiple values at once. -CSS properties that normally include a hyphen need to be camelCased in JavaScript. For example, the CSS property `font-size` is expressed as `fontSize` when used as a property name in JavaScript. However, this does not apply when passing the name of a CSS property to the `$.fn.css()` method as a string — in that case, either the camelCased or hyphenated form will work. +CSS properties that normally include a hyphen need to be camelCased in JavaScript. For example, the CSS property `font-size` is expressed as `fontSize` when used as a property name in JavaScript. However, this does not apply when passing the name of a CSS property to the `.css()` method as a string — in that case, either the camelCased or hyphenated form will work. -It's not recommended to use `$.fn.css()` as a setter in production-ready code, but when passing in an object to set CSS, CSS properties will be camelCased instead of using a hyphen. +It's not recommended to use `.css()` as a setter in production-ready code, but when passing in an object to set CSS, CSS properties will be camelCased instead of using a hyphen. ## Using CSS Classes for Styling -As a getter, the `$.fn.css()` method is valuable. However, it should generally be avoided as a setter in production-ready code, because it's generally best to keep presentational information out of JavaScript code. Instead, write CSS rules for classes that describe the various visual states, and then change the class on the element. +As a getter, the `.css()` method is valuable. However, it should generally be avoided as a setter in production-ready code, because it's generally best to keep presentational information out of JavaScript code. Instead, write CSS rules for classes that describe the various visual states, and then change the class on the element. ``` // Working with classes diff --git a/page/using-jquery-core/data-methods.md b/page/using-jquery-core/data-methods.md index b218f5b9..54331bce 100644 --- a/page/using-jquery-core/data-methods.md +++ b/page/using-jquery-core/data-methods.md @@ -2,7 +2,7 @@ title : Data Methods level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- There's often data about an element you want to store with the element. In plain JavaScript, you might do this by adding a property to the DOM element, but you'd have to deal with memory leaks in some browsers. jQuery offers a straightforward way to store data related to an element, and it manages the memory issues for you. @@ -15,12 +15,12 @@ $("#myDiv").data( "keyName", { foo: "bar" } ); $("#myDiv").data("keyName"); ``` -Any kind of data can be stored on an element. For the purposes of this article, `$.fn.data` will be used to store references to other elements. +Any kind of data can be stored on an element. For the purposes of this article, `.data()` will be used to store references to other elements. -For example, you may want to establish a relationship between a list item and a `
` that's inside of it. This relationship could be established every single time the list item is touched, but a better solution would be to establish the relationship once, then store a pointer to the `
` on the list item using `$.fn.data`: +For example, you may want to establish a relationship between a list item and a `
` that's inside of it. This relationship could be established every single time the list item is touched, but a better solution would be to establish the relationship once, then store a pointer to the `
` on the list item using `.data()`: ``` -// Storing a relationship between elements using $.fn.data +// Storing a relationship between elements using .data() $("#myList li").each(function() { var $li = $( this ); @@ -37,4 +37,4 @@ var $firstLi = $("#myList li:first"); $firstLi.data("contentDiv").html("new content"); ``` -In addition to passing `$.fn.data` a single key-value pair to store data, you can also pass an object containing one or more pairs. +In addition to passing `.data()` a single key-value pair to store data, you can also pass an object containing one or more pairs. diff --git a/page/using-jquery-core/dollar-object-vs-function.md b/page/using-jquery-core/dollar-object-vs-function.md index a4409681..2178eabb 100644 --- a/page/using-jquery-core/dollar-object-vs-function.md +++ b/page/using-jquery-core/dollar-object-vs-function.md @@ -2,7 +2,7 @@ title : $ vs $() level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- Until now, we’ve been dealing entirely with methods that are called on a jQuery @@ -30,5 +30,10 @@ you need to remember: their return value will vary. There are a few cases where object methods and core methods have the same -names, such as `$.each` and `$.fn.each`. In these cases, be extremely careful +names, such as `$.each()` and `$.fn.each()`. In these cases, be extremely careful when reading the documentation that you are exploring the correct method. + +In this guide, if a method can be called on a jQuery selection, we'll refer to +it just by its name: `.each()`. If it is a "core" method -- that is, a method +that isn't called on a selection -- we'll refer to it explicitly as a method in +the jQuery namespace: `$.each()`. diff --git a/page/using-jquery-core/manipulating-elements.md b/page/using-jquery-core/manipulating-elements.md index b702ae2d..82a210d8 100644 --- a/page/using-jquery-core/manipulating-elements.md +++ b/page/using-jquery-core/manipulating-elements.md @@ -2,7 +2,7 @@ title : Manipulating Elements level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- For complete documentation of jQuery manipulation methods, visit the [Manipulation documentation on api.jquery.com](http://api.jquery.com/category/manipulation/). @@ -11,13 +11,13 @@ For complete documentation of jQuery manipulation methods, visit the [Manipulati There are many ways to change an existing element. Among the most common tasks is changing the inner HTML or attribute of an element. jQuery offers simple, cross-browser methods for these sorts of manipulations. You can also get information about elements using many of the same methods in their getter incarnations. For more information on getters and setters, see the [Working with Selections](/working-with-selections) section. Here are a few methods you can use to get and set information about elements: - * **`$.fn.html`** - Get or set the html contents. - * **`$.fn.text`** - Get or set the text contents; HTML will be stripped. - * **`$.fn.attr`** - Get or set the value of the provided attribute. - * **`$.fn.width`** - Get or set the width in pixels of the first element in the selection as an integer. - * **`$.fn.height`** - Get or set the height in pixels of the first element in the selection as an integer. - * **`$.fn.position`** - Get an object with position information for the first element in the selection, relative to its first positioned ancestor. _This is a getter only_. - * **`$.fn.val`** - Get or set the value of form elements. + * **`.html()`** - Get or set the html contents. + * **`.text()`** - Get or set the text contents; HTML will be stripped. + * **`.attr()`** - Get or set the value of the provided attribute. + * **`.width()`** - Get or set the width in pixels of the first element in the selection as an integer. + * **`.height()`** - Get or set the height in pixels of the first element in the selection as an integer. + * **`.position()`** - Get an object with position information for the first element in the selection, relative to its first positioned ancestor. _This is a getter only_. + * **`.val()`** - Get or set the value of form elements. Changing things about elements is trivial, but remember that the change will affect all elements in the selection. If you just want to change one element, be sure to specify that in the selection before calling a setter method. @@ -33,9 +33,9 @@ While there are a variety of ways to move elements around the DOM, there are gen * Place the selected element(s) relative to another element. * Place an element relative to the selected element(s). -For example, jQuery provides `$.fn.insertAfter` and `$.fn.after`. The `$.fn.insertAfter` method places the selected element(s) after the element that provided as an argument. The `$.fn.after` method places the element provided as an argument after the selected element. Several other methods follow this pattern: `$.fn.insertBefore` and `$.fn.before`, `$.fn.appendTo` and `$.fn.append`, and `$.fn.prependTo` and `$.fn.prepend`. +For example, jQuery provides `.insertAfter()` and `.after()`. The `.insertAfter()` method places the selected element(s) after the element that provided as an argument. The `.after()` method places the element provided as an argument after the selected element. Several other methods follow this pattern: `.insertBefore()` and `.before()`, `.appendTo()` and `.append()`, and `.prependTo()` and `.prepend()`. -The method that makes the most sense will depend on what elements are selected, and whether you need to store a reference to the elements you're adding to the page. If you need to store a reference, you will always want to take the first approach — placing the selected elements relative to another element — as it returns the element(s) you're placing. In this case, `$.fn.insertAfter`, `$.fn.insertBefore`, `$.fn.appendTo`, and `$.fn.prependTo` should be the tools of choice. +The method that makes the most sense will depend on what elements are selected, and whether you need to store a reference to the elements you're adding to the page. If you need to store a reference, you will always want to take the first approach — placing the selected elements relative to another element — as it returns the element(s) you're placing. In this case, `.insertAfter()`, `.insertBefore()`, `.appendTo()`, and `.prependTo()` should be the tools of choice. ``` // Moving elements using different approaches @@ -53,7 +53,7 @@ $("#myList").append( $("#myList li:first") ); ## Cloning Elements -Methods such as `$.fn.appendTo` move the element, but sometimes a copy of the element is needed instead. In this case, use `$.fn.clone` first: +Methods such as `.appendTo()` move the element, but sometimes a copy of the element is needed instead. In this case, use `.clone()` first: ``` // Making a copy of an element @@ -62,18 +62,18 @@ Methods such as `$.fn.appendTo` move the element, but sometimes a copy of the el $("#myList li:first").clone().appendTo("#myList"); ``` -If you need to copy related data and events, be sure to pass `true` as an argument to `$.fn.clone`. +If you need to copy related data and events, be sure to pass `true` as an argument to `.clone()`. ## Removing Elements -There are two ways to remove elements from the page: `$.fn.remove` and `$.fn.detach`. Use `$.fn.remove` when you want to permanently remove the selection from the page. While `$.fn.remove` does return the removed element(s), those elements will not have their associated data and events attached to them if you return them to the page. +There are two ways to remove elements from the page: `.remove()` and `.detach()`. Use `.remove()` when you want to permanently remove the selection from the page. While `.remove()` does return the removed element(s), those elements will not have their associated data and events attached to them if you return them to the page. -Use `$.fn.detach` if you need the data and events to persist. Like `$.fn.remove`, it returns the selection, but it also maintains the data and events associated with the selection, so you can restore the selection to the page at a later time. +Use `.detach()` if you need the data and events to persist. Like `.remove()`, it returns the selection, but it also maintains the data and events associated with the selection, so you can restore the selection to the page at a later time. -The `$.fn.detach` method is extremely valuable if you are doing heavy manipulation on an element. In that case, it's beneficial to `$.fn.detach` the element from the page, work on it in your code, then restore it to the page when you're done. This limits expensive "DOM touches" while maintaining the element's data and events. +The `.detach()` method is extremely valuable if you are doing heavy manipulation on an element. In that case, it's beneficial to `.detach()` the element from the page, work on it in your code, then restore it to the page when you're done. This limits expensive "DOM touches" while maintaining the element's data and events. -If you want to leave the element on the page but remove its contents, you can use `$.fn.empty` to dispose of the element's inner HTML. +If you want to leave the element on the page but remove its contents, you can use `.empty()` to dispose of the element's inner HTML. ## Creating New Elements @@ -136,7 +136,7 @@ $myList.append( myItems.join("") ); ## Manipulating Attributes -jQuery's attribute manipulation capabilities are extensive. Basic changes are simple, but the `$.fn.attr` method also allows for more complex manipulations. It can either set an explicit value, or set a value using the return value of a function. When the function syntax is used, the function receives two arguments: the zero-based index of the element whose attribute is being changed, and the current value of the attribute being changed. +jQuery's attribute manipulation capabilities are extensive. Basic changes are simple, but the `.attr()` method also allows for more complex manipulations. It can either set an explicit value, or set a value using the return value of a function. When the function syntax is used, the function receives two arguments: the zero-based index of the element whose attribute is being changed, and the current value of the attribute being changed. ``` // Manipulating a single attribute diff --git a/page/using-jquery-core/traversing.md b/page/using-jquery-core/traversing.md index 7c60563e..a84beafb 100644 --- a/page/using-jquery-core/traversing.md +++ b/page/using-jquery-core/traversing.md @@ -6,7 +6,7 @@ Once you've made an initial selection with jQuery, you can traverse deeper into ## Parents -The methods for finding the parents from a selection include `$.fn.parent()`, `$.fn.parents()`, `$.fn.parentsUntil()`, and `$.fn.closest()`. +The methods for finding the parents from a selection include `.parent()`, `.parents()`, `.parentsUntil()`, and `.closest()`. ```
@@ -50,7 +50,7 @@ $("div.child").closest("div"); ## Children -The methods for finding child elements from a selection include `$.fn.children()` and `$.fn.find()`. The difference between these methods lies in how far into the child structure the selection is made. `$.fn.children()` only operates on direct child nodes, while `$.fn.find()` can traverse recursively into children, children of those children, and so on. +The methods for finding child elements from a selection include `.children()` and `.find()`. The difference between these methods lies in how far into the child structure the selection is made. `.children()` only operates on direct child nodes, while `.find()` can traverse recursively into children, children of those children, and so on. ``` // Selecting an element's direct children @@ -66,7 +66,7 @@ $("div.grandparent").find("div"); ## Siblings -The rest of the traversal methods within jQuery all deal with finding sibling selections. There are a few basic methods as far as the direction of traversal is concerned. You can find previous elements with `$.fn.prev()`, next elements with `$.fn.next()`, and both with `$.fn.siblings()`. There are also a few other methods that build onto these basic methods: `$.fn.nextAll()`, `$.fn.nextUntil()`, `$.fn.prevAll()` and `$.fn.prevUntil()`. +The rest of the traversal methods within jQuery all deal with finding sibling selections. There are a few basic methods as far as the direction of traversal is concerned. You can find previous elements with `.prev()`, next elements with `.next()`, and both with `.siblings()`. There are also a few other methods that build onto these basic methods: `.nextAll()`, `.nextUntil()`, `.prevAll()` and `.prevUntil()`. ``` // Selecting a next sibling of the selectors @@ -98,7 +98,7 @@ $("div.surrogateParent2").prevAll().first(); $("div.surrogateParent2").prevAll().last(); ``` -Use `$.fn.siblings()` to select all siblings: +Use `.siblings()` to select all siblings: ``` // Selecting an element's siblings in both directions that matches the given selector diff --git a/page/using-jquery-core/utility-methods.md b/page/using-jquery-core/utility-methods.md index 1c61d7c5..8376bf52 100644 --- a/page/using-jquery-core/utility-methods.md +++ b/page/using-jquery-core/utility-methods.md @@ -2,12 +2,12 @@ title : Utility Methods level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- jQuery offers several utility methods in the `$` namespace. These methods are helpful for accomplishing routine programming tasks. For a complete reference on jQuery utility methods, visit the [utilities documentation on api.jquery.com](http://api.jquery.com/category/utilities/). -Below are examples of a few of the utility methods: +Below are examples of a few of the utility methods: ### `$.trim` @@ -18,7 +18,7 @@ Removes leading and trailing whitespace. $.trim(" lots of extra whitespace "); ``` -### `$.each` +### `$.each()` Iterates over arrays and objects. @@ -32,9 +32,11 @@ $.each({ foo: "bar", baz: "bim" }, function( k, v ) { }); ``` -The method `$.fn.each` is also used for iterating over a selection of elements. +The method `.each()` can be called on a selection to iterate over the +elements contained in the selection. `.each()`, not `$.each()`, should be used +for iterating over elements in a selection. -### `$.inArray` +### `$.inArray()` Returns a value's index in an array, or -1 if the value is not in the array. ``` @@ -45,7 +47,7 @@ if ( $.inArray( 4, myArray ) !== -1 ) { } ``` -### `$.extend` +### `$.extend()` Changes the properties of the first object using the properties of subsequent objects. ``` @@ -70,9 +72,9 @@ console.log( firstObject.foo ); // "bar" console.log( newObject.foo ); // "baz" ``` -### `$.proxy` +### `$.proxy()` -Returns a function that will always run in the provided scope — that is, sets the meaning of this inside the passed function to the second argument. +Returns a function that will always run in the provided scope — that is, sets the meaning of `this` inside the passed function to the second argument. ``` var myFunction = function() { diff --git a/page/using-jquery-core/working-with-selections.md b/page/using-jquery-core/working-with-selections.md index ee55061d..c96638d8 100644 --- a/page/using-jquery-core/working-with-selections.md +++ b/page/using-jquery-core/working-with-selections.md @@ -8,12 +8,12 @@ level: beginner jQuery “overloads” its methods, so the method used to set a value generally has the same name as the method used to get a value. When a method is used to set a value, it's called a setter. When a method is used to get (or read) a value, it's called a getter. Setters affect all elements in a selection. Getters get the requested value only for the first element in the selection. ``` -//The $.fn.html method used as a setter +//The .html() method used as a setter $("h1").html("hello world"); ``` ``` -// The html method used as a getter +// The .html() method used as a getter $("h1").html(); ``` @@ -44,10 +44,10 @@ $("#content") .html("new text for the third h3!"); ``` -jQuery also provides the `$.fn.end` method to get back to the original selection should you change the selection in the middle of a chain: +jQuery also provides the `.end()` method to get back to the original selection should you change the selection in the middle of a chain: ``` -Restoring your original selection using $.fn.end +Restoring your original selection using .end() $("#content") .find("h3") .eq( 2 ) @@ -57,4 +57,4 @@ $("#content") .html("new text for the first h3!"); ``` -Chaining is extraordinarily powerful, and it's a feature that many libraries have adapted since it was made popular by jQuery. However, it must be used with care — extensive chaining can make code extremely difficult to modify or debug. There is no hard-and-fast rule to how long a chain should be — just know that it's easy to get carried away. \ No newline at end of file +Chaining is extraordinarily powerful, and it's a feature that many libraries have adapted since it was made popular by jQuery. However, it must be used with care — extensive chaining can make code extremely difficult to modify or debug. There is no hard-and-fast rule to how long a chain should be — just know that it's easy to get carried away. From 0b696411f1ededc0046fe3531af30d6c7283774a Mon Sep 17 00:00:00 2001 From: Rebecca Murphey Date: Sun, 17 Mar 2013 18:41:10 -0400 Subject: [PATCH 2/2] remove first-person language --- page/ajax/jquery-ajax-methods.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/page/ajax/jquery-ajax-methods.md b/page/ajax/jquery-ajax-methods.md index 15d992ed..9eb35e49 100644 --- a/page/ajax/jquery-ajax-methods.md +++ b/page/ajax/jquery-ajax-methods.md @@ -10,15 +10,15 @@ While jQuery does offer many Ajax-related convenience methods, the core imperative. We'll review it first, and then touch briefly on the convenience methods. -I generally use the `$.ajax()` method and do not use convenience methods. As -you'll see, it offers features that the convenience methods do not, and its -syntax is more easily understandable, in my opinion. +As you'll see, the `$.ajax()` method offers features that the convenience +methods do not, along with a syntax that is more explicit, though also more +verbose. ### `$.ajax()` jQuery’s core `$.ajax()` method is a powerful and straightforward way of creating -Ajax requests. It takes a configuration object that contains all the -instructions jQuery requires to complete the request. The `$.ajax()` method is +Ajax requests. It takes a configuration object that contains all the +instructions jQuery requires to complete the request. The `$.ajax()` method is particularly valuable because it offers the ability to specify both success and failure callbacks. Also, its ability to take a configuration object that can be defined separately makes it easier to write reusable code. For complete