JavaScript jQuery events, animations, extensions

Event

Http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/ 00143564690172894383ccd7ab64669b4971f4b03fa342d000

Animation

Http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/ 001434500456006abd6381dc3bb439d932cb895b62d9eee000

Extended

jquery's built-in approach is never going to meet all the needs. For example, we want to highlight some DOM elements that can be implemented in jquery:

$ (' Span.hl '). CSS (' backgroundcolor ', ' #fffceb '). CSS (' color ', ' #d85030 '),$ (' P a.hl '). CSS (' backgroundcolor ') , ' #fffceb '). CSS (' color ', ' #d85030 ');

Always write duplicate code is not good, in case you want to change the font will be more trouble, can unify, write a highlight() method?

$ (' Span.hl '). Highlight (); $ (' P A.hl '). Highlight ();

The answer is yes. We can extend jquery to implement custom methods. In the future, if you want to modify the highlighted logic, you only need to modify one extension code. This approach is also known as writing a jquery plugin.

jquery Plugin

Binding a new method to a JQuery object is implemented by extending $.fn the object. Let's write the first extension-- highlight1() :

function () {    // This is already bound to the current jquery object:this    . css (' backgroundcolor ', ' #fffceb '). CSS (' Color ', ' #d85030 ');     return  This ;}

Notice that the inside of the function is this bound to a jquery object at call time, so that the function's internal code can call the methods of all jquery objects normally.

For the following HTML structure:

<div id= "test-highlight1" >    <p> what is <span>jQuery</span></p>    <p>< Span>jquery</span> is currently the most popular <span>JavaScript</span> library. </p></div>

Why the last return this; ? Because jquery objects support chained operations, the extension methods we write ourselves continue to be chained:

$ (' Span.hl '). HIGHLIGHT1 (). Slidedown ();

Otherwise, when the user calls, they have to split the above code into two lines.

But this version is not perfect. Some users want to highlight the color can be specified by themselves, how to do?

We can add a parameter to the method, allowing the user to pass the parameters in with the object itself. So we have a second version of highlight2() :

 $.fn.highlight2 = function   //  to take into account a variety of situations:  //  options for undefined  //  options only some key  var  bgcolor = options && Options.backgroundcolor ||    ' #fffceb ' ;  var  color = options && Options.color | |    ' #d85030 ' ;  this . css (' backgroundcolor ', bgcolor). CSS (' color ' 

Another approach is to use the helper method provided by jquery $.extend(target, obj1, obj2, ...) , which merges the properties of multiple object objects into the first target object, encounters a property with the same name, always uses the value of the backward object, which means that the higher the precedence is:

// merge default values and user-passed options into the object {} and return: var opts = $.extend (false, {    ' #00a8e6 ',    ' #ffffff '}, options);

Immediately after the user has highlight2() commented: Each call needs to pass the custom settings, can I set a default value, the subsequent call unified use of parameterless highlight2() ?

In other words, the default values we set should allow the user to modify.

Where does the default value fit? It is definitely inappropriate to put a global variable, the best place is $.fn.highlight2 the function object itself.

So the final version highlight() was finally born:

function (options) {    //  merge Default and user setpoint: False to ignore, default to False,    var opts = $.extend ( False, $.fn.highlight.defaults, options);     this. css (' backgroundcolor ', Opts.backgroundcolor). CSS (' Color ', opts.color);     return  This ;} // Set Default value:$.fn.highlight.defaults = {    ' #d85030 ',    ' #fff8de '}

When using the user, you only need to set the default value once:

$.fn.highlight.defaults.color = ' #fff '= ' #000 ';

It can then be called very simply highlight() .

Finally, we come to the principle of writing a jquery plugin:

1. To $.fn the binding function, implement the code logic of the plug-in;
2. Plug-in function finally to return this; support the chain call;
3. Plug-in function to have a default value, binding on $.fn.<pluginName>.defaults ;
4. Users can pass in a set value when they call to override the default value.

Extensions for a specific element

We know that some methods of jquery objects only work on specific DOM elements, such as submit() methods that can only be targeted form . What should we write if we write an extension that only targets certain types of DOM elements?

Remember the jquery selector support filter() method to filter it? We can use this method to implement extensions for specific elements.

For example, now we're going to add a jump hint to all the hyperlinks that point to the chain, what do we do?

Write the code of the user call first:

$ (' #main a '). external ();

Then write an extension according to the method above external :

$.fn.external =function () {    //Return each () returns the result, which supports chained invocation:    return  This. Filter (' a '). each (function () {        //Note: The This binding of the callback function inside each () is the DOM itself!        varA = $ ( This); varurl = a.attr (' href '); if(URL && (url.indexof (' http//') ===0 | | url.indexof (' https://') ===0) {a.attr (' href ', ' #0 '). Removeattr (' Target '). Append (' <i class= ' uk-icon-external-link ' ></i> '). Click (function () {                if(Confirm (' Are you sure you want to go to ' + URL + '? ‘) {window.open (URL);        }            }); }    });}

JavaScript jQuery events, animations, extensions