How to expand member variables when extending jQuery object

Let's look at a piece of code first:

Copy the codeThe code is as follows:

 
( 
{ 
myOwnMember: 3, 
getMyOwnMember: function () { return ; }, 
setMyOwnMember: function (v) {  = v; return ; } 
} 
); 

$("body").myOwnMember; //3 
$("body").getMyOwnMember(); //3 
$("body").setMyOwnMember(4); //4 
$("body").getMyOwnMember(); //3 

This code extends a member myOwnMember to the jQuery object. The two functions getMyOwnMember and setMyOwnMember are used to return and set the value of myOwnMember respectively. But we see that setMyOwnMember does not work. When we getMyOwnMember again, the original value is returned. Why is this? The reason is that $("body") creates a new object every time, so the myOwnMember in $("body") is the initial value. If we change the code to:

Copy the codeThe code is as follows:

 
( 
{ 
myOwnMember: 3, 
getMyOwnMember: function () { return ; }, 
setMyOwnMember: function (v) {  = v; return ; } 
} 
); 

var body = $("body"); 
; //3 
(); //3 
(4); //4 
(); //4 

This is the effect we want, because $("body") is created only once, followed by references through body variables. However, there are still problems in the actual use of this method, because it is impossible for me to reference the body variable globally. In many cases, I still use $("body") to obtain the dom node. In this way, how can we save the value of a jQuery object extension variable? The solution is that we should not save variables on jQuery objects, but on dom nodes. No matter how many jQuery objects are created on a dom node, they are all pointing to the same dom node. So we changed the code to the following:

Copy the codeThe code is as follows:

 
( 
{ 
getMyOwnMember: function () { return this[0].myOwnMember; }, 
setMyOwnMember: function (v) { this[0].myOwnMember = v; return this[0].myOwnMember; } 
} 
); 

$("body").getMyOwnMember(); //undefined 
$("body").setMyOwnMember(4); //4 
$("body").getMyOwnMember(); //4 