You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/plugins/basic-plugin-creation.md
+2-14
Original file line number
Diff line number
Diff line change
@@ -5,9 +5,9 @@
5
5
"attribution": [ "jQuery Fundamentals" ]
6
6
}</script>
7
7
8
-
Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection. Maybe you wrote a really useful utility function that you want to be able to move easily to other projects. In this case, you may want to write a plugin.
8
+
Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection. In this case, you may want to write a plugin.
9
9
10
-
## How jQuery Works 101: jQuery Object Methods and Utility Methods
10
+
## How jQuery Works 101: jQuery Object Methods
11
11
12
12
Before we write our own plugins, we must first understand a little about how jQuery works. Take a look at this code:
13
13
@@ -17,8 +17,6 @@ $( "a" ).css( "color", "red" );
17
17
18
18
This is some pretty basic jQuery code, but do you know what's happening behind the scenes? Whenever you use the `$` function to select elements, it returns a jQuery object. This object contains all of the methods you've been using (`.css()`, `.click()`, etc.) and all of the elements that fit your selector. The jQuery object gets these methods from the `$.fn` object. This object contains all of the jQuery object methods, and if we want to write our own methods, it will need to contain those as well.
19
19
20
-
Additionally the jQuery utility method `$.trim()` is used above to remove any leading or trailing empty space characters from the user input. Utility methods are functions that reside directly in the `$` function itself. You may occasionally want to write a utility method plugin when your extension to the jQuery API does not have to do something to a set of DOM elements you've retrieved.
21
-
22
20
## Basic Plugin Authoring
23
21
24
22
Let's say we want to create a plugin that makes text within a set of retrieved elements green. All we have to do is add a function called `greenify` to `$.fn` and it will be available just like any other jQuery object method.
@@ -46,8 +44,6 @@ $.fn.greenify = function() {
46
44
$( "a" ).greenify().addClass( "greenified" );
47
45
```
48
46
49
-
Note that the notion of chaining is *not* applicable to jQuery utility methods like `$.trim()`.
50
-
51
47
## Protecting the $ Alias and Adding Scope
52
48
53
49
The `$` variable is very popular among JavaScript libraries, and if you're using another library with jQuery, you will have to make jQuery not use the `$` with `jQuery.noConflict()`. However, this will break our plugin since it is written with the assumption that `$` is an alias to the `jQuery` function. To work well with other plugins, _and_ still use the jQuery `$` alias, we need to put all of our code inside of an [Immediately Invoked Function Expression](http://stage.learn.jquery.com/javascript-101/functions/#immediately-invoked-function-expression-iife), and then pass the function `jQuery`, and name the parameter `$`:
@@ -60,14 +56,6 @@ The `$` variable is very popular among JavaScript libraries, and if you're using
0 commit comments