Skip to content

first pass at fixing up references to $.fn methods #297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions page/ajax/ajax-and-forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ attribution:
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.

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.
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.

```
// Turning form data into a query string
Expand All @@ -21,7 +22,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
Expand Down
44 changes: 22 additions & 22 deletions page/ajax/jquery-ajax-methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ 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
imperative. We'll review it first, and then touch briefly on the convenience
`$.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
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`
### `$.ajax()`

jQuery's core `$.ajax` method is a powerful and straightforward way of creating
jQuerys 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
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
Expand All @@ -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
url: "post.php",
Expand Down Expand Up @@ -71,10 +71,10 @@ 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
power. For a complete list of options, visit
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
frequently:
Expand All @@ -101,7 +101,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

Expand Down Expand Up @@ -150,17 +150,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.
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.

The convenience methods provided by jQuery are:

Expand Down Expand Up @@ -233,9 +233,9 @@ $.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
uses the returned HTML to populate the selected element(s). In addition to
The `.load()` method is unique among jQuerys 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.

Expand Down
10 changes: 5 additions & 5 deletions page/effects/custom-effects.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
title : Custom Effects with $.fn.animate
title : Custom Effects with .animate()
level: beginner
source: http://jqfundamentals.com/legacy
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
Expand All @@ -22,7 +22,7 @@ $( "div.funtimes" ).animate({
});
```

**Note:** Color-related properties cannot be animated with `$.fn.animate` using jQuery
**Note:** 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.
Expand All @@ -35,7 +35,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
Expand Down
42 changes: 21 additions & 21 deletions page/effects/intro-to-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -19,8 +19,8 @@ When jQuery hides an element, it sets its CSS `display` property to `none`. This
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`:
`.show()` and `.hide()` to use animation in a couple of ways. One is to pass
in an argument of `'slow'`, `'normal'`, or `'fast'`:

```
// Slowly hide all paragraphs
Expand All @@ -31,7 +31,7 @@ $( "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`:
can pass the desired duration in milliseconds to `.show()` and `.hide()`:

```
// Hide all paragraphs over half a second
Expand All @@ -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.

```
Expand All @@ -60,7 +60,7 @@ $( "p" ).slideUp( 800 );
$( "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.

```
Expand All @@ -73,9 +73,9 @@ $( "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
Expand All @@ -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
Expand All @@ -109,10 +109,10 @@ chain will wait until the animation runs to completion.
$( "p.hidden" ).fadeIn( 750 ).addClass( "lookAtMe" );
```

It is important to realize that `$.fn.fadeIn` above only *kicks off* the animation. Once started, the
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 `$.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
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
Expand Down Expand Up @@ -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.

```
Expand All @@ -166,9 +166,9 @@ $( "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
Expand Down
26 changes: 13 additions & 13 deletions page/events/event-basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ 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.
Expand All @@ -30,15 +30,15 @@ $( "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" );
});
```

### Extending Events to New Page Elements

It is important to note that `$.fn.on` can only create event listeners
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:
Expand All @@ -57,7 +57,7 @@ $( document ).ready(function(){
});
```

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
Expand Down Expand Up @@ -85,7 +85,7 @@ 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",
{ foo: "bar" }, // associate data with event binding
Expand Down Expand Up @@ -141,7 +141,7 @@ $( "a" ).click(function( eventObject ) {

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`:
as a space-separated list to `.on()`:

```
// Multiple events, same handler
Expand All @@ -153,7 +153,7 @@ $( "input" ).on(
);
```

When each event has its own handler, you can pass an object into `$.fn.on` with one or
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.

Expand All @@ -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.
Expand All @@ -203,7 +203,7 @@ $( "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
Expand All @@ -221,10 +221,10 @@ Note that in the code snippet above, the `firstClick` function will be executed
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 ) {
Expand Down
Loading