A tutorial on using $.proxy and Wrap () methods in jquery

Today I mainly talk about the use of jquery $.proxy and wrap (), because these two I used less, today in the project application, so take out to say!

$.proxy in jquery

Jquery.proxy (function, context)

function that is going to change the context of contexts.

The contextual context of the context function (' this ') is set to this object.

Jquery.proxy (context, name)

The contextual context of the context function is set to the object object.

Name that will change the context of the function name (this function must be the property of the previous parameter ' contextual ' object)

Let's take a look at an example:

Normal this is used
$ (' #Haorooms '). Click (function () {

This is what we expect, the current element of this.

$ (this). addclass (' Anewclass ');

});
Not the expected this
$ (' #Haorooms '). Click (function () {

settimeout (function () {

This one points to the interior of the settimeout function, not to the HTML element before it

$ (this). addclass (' Anewclass ');

}, 1000);

});

What to do now, the usual practice is this:

$ (' #Haorooms '). Click (function () {
var that = this; Set a variable that points to this need for this

settimeout (function () {

This one points to the interior of the settimeout function, not to the HTML element before it

$ (that). addclass (' Anewclass ');

}, 1000);

});

However, in the case of using the jquery framework, there is a better way to use the $.proxy function.

Jquery.proxy (), takes a function, then returns a new function, and the new function always maintains a specific context.

There are two kinds of syntax:

Jquery.proxy (function, context)
/**function a function that will change context.
The contextual context of the context function (' this ') is set to this object.
**/

Jquery.proxy (context, name)
The contextual context of the/**context function is set to this object.
**name is going to change the function name of the context (this function must be the property of the previous parameter ' contexts ' * * object)
**/
The example above can be modified in this way:

$ (' #Haorooms '). Click (function () {

settimeout ($.proxy (function () {

$ (this). addclass (' Anewclass ');

}, this), 1000;

});

Example

But finally understand the use of proxy;

<input type= "button" value= "Test" id= "guobtn" name= "I am the name of the button"/>

var obj = {
Name: "I am the name of obj",
Sayname:function () {
alert (this.name);
}
}
$ ("#guoBtn"). Click (obj.sayname); I'm the name of the button
What if I want to access the name of obj?
$ ("#guoBtn"). Click ($.proxy (Obj.sayname,obj));//"I am the name of obj"
$ ("#guoBtn"). Click ($.proxy (obj, "sayname")); "I am the name of obj"

It can be seen from the use of the above proxy (a,b) that his parameters are written in two ways.

The first: A is a function, B is the object owner of the function.

The second: A is an object, B is a string, and is the property name of a.

And this example is an example of a << sharp jquery>>.

<div id= "Panel" style= "Display:none;" >
<button>Close</button>
</div>

$ ("#panel"). FadeIn (function () {
$ ("#panel button"). Click (function () {
$ (this). Fadeout ();
});
});

The button disappeared, but the panel did not disappear. You can use proxy to solve this problem.

$ ("#panel"). FadeIn (function () {
var obj = this;
$ ("#panel button"). Click ($.proxy () (function () {
$ (this). Fadeout ();
}, obj));
});

The Panel does not disappear after you click the button.

Personal feeling proxy is the most important way to modify the context object when the function is executed.

Wrap () method in jquery

Wrap (), as the name implies, is the meaning of the parcel, is to wrap a layer of things in the outer part of your device.

<div class= "Container" >
<div class= "inner" >Hello</div>
<div class= "inner" >Goodbye</div>
</div>

$ (". Inner"). Wrap (function () {
Return "<div class= '" + $ (This). Text () + "' ></div>";
});
The results are as follows:

<div class= "Container" >
<div class= "Hello" >
<div class= "inner" >Hello</div>
</div>
<div class= "Goodbye" >
<div class= "inner" >Goodbye</div>
</div>
</div>
Similar usage also has. Wrapall (),. Wrapinner (),. Unwrap () and so on!

jquery Many methods, the key to see your use of proficiency, in doing DOM operation, as far as possible with the simplest, most effective way