jquery Source Learning 5--Tool method attr parents sibling clean

(1), attr

attrfunction(elem, name, value) {varfix = {            "For": "Htmlfor",            "Class": "ClassName",            "Float": "Cssfloat", InnerHTML:"InnerHTML", ClassName:"ClassName"        }; if(Fix[name]) {if(value = undefined) elem[fix[name]] =value; returnElem[fix[name]]; } Else if(elem.getattribute) {if(Value! =undefined) elem.setattribute (name, value); returnElem.getattribute (Name, 2 ); } Else{Name= Name.replace (/-([A-z])/ig,function(Z,B) {returnb.touppercase ();}); if(value = undefined) elem[name] =value; returnElem[name]; }    },

You can basically guess the effect of this method from the formal parameter.

$.attr (Odiv, "abc") is the value that gets the ABC property to Odiv

$.attr (Odiv, "abc", 1) is to set the ABC property value of Odiv to 1

At first, some of the properties that need to be corrected are enumerated in the Fix object.

Next, determine if the passed-in property is in the property enumerated by fix in the IF

If you want to use a modified property, such as

If this is the call: $.attr (Odiv, "class")

Then within this method will be modified to odiv["ClassName"]

And then analyze the next else if

else if the condition is to judge Elem there is getattribute this method

If you have this method, you can get/set the property by Get/setattribute

If the element does not support getattribute This method will go to the last else

Then convert the properties of the shape like AAA-BBB-CCC to the camel's name and get/Set

After testing, if you set a custom property for an element by doing the following:

<id= "Div1"  abc= "123"></div> 

Then in Ie8-'s browser through the ODIV.ABC or Odiv.getattribute ("abc"), you can get 123

In ie9+ Chrome ff, undefined is obtained through ODIV.ABC, while Odiv.getattribute ("abc") can get 123

After the test, I felt that the Else branch did not know when to enter the

(2), parents

    function (elem) {        var matched = [];         var cur = elem.parentnode;          while (cur && cur! = document) {            matched.push (cur)            ; = cur.parentnode;        }         return matched;    },

From the name you can see that this method is to get Elem's parent element

And parents is a plural form.

So we'll keep track of the top level.

This is done within the method with recursion.

Finally, put all the parent elements that were taken to the match and return directly

The first element in the match array is the immediate parent of Elem, and the last element is the topmost parent

(3), sibling

Siblingfunction(Elem, POS, not) {varElems = []; varSiblings =Elem.parentNode.childNodes;  for(vari = 0; i < siblings.length; i++ ) {            if(not = = =true&& Siblings[i] = = elem)Continue; if(Siblings[i].nodetype = = 1) Elems.push (Siblings[i]); if(Siblings[i] = =elem) ELEMS.N= Elems.length-1; }        returnJquery.extend (elems, {LAST:ELEMS.N= = Elems.length-1, Cur:pos= = "even" && elems.n% 2 = = 0 | | pos = = "odd" && elems.n% 2 | | Elems[pos] = =Elem, PREV:ELEMS[ELEMS.N-1], NEXT:ELEMS[ELEMS.N+ 1]        }); },

Sibling means brothers and sisters, so this method is used to get incoming elem of the sibling elements of the

As for the second parameter POS is the meaning of the position, by searching for jquery internal use of sibling found

POS value can be a number, "odd", in the function of sibling this function body also found the value of POS can also be "even"

As for the third parameter not, it has not been found anywhere in the jquery source.

Inside the method, the loop iterates through all the elements under the immediate parent of Elem

It's worth noting that there are text nodes, annotation nodes, element nodes, and so on.

So the if condition in the inside makes certain filter

First look at the first if condition, if not is true and the traversed element (Sibling[i]) is the incoming elem when the loop ends

Here we know what the third parameter of the sibling method does not mean.

If not passed in true, represents a future returned result set that does not contain the Elem itself, and vice versa.

The second if condition is to filter the element nodes out into the Elems

The third if condition, adds an attribute n to Elems, and this attribute n represents the position of Elem in the array elems

Then extend the last cur prev next four properties on the Elems

Finally, return the Elems back.

The last type is bool, indicating whether Elem is the final elems inside

Prev Next returns the previous element and the last element of Elem, respectively

If ELEMS.N is 0, that is, the elem that comes in is the first of all the sibling elements, then elems[elems.length-1] gets elems[-1]

Which means the array subscript is out of bounds.

But after the test did not error, just return undefined

And finally see the most troublesome cur.

To be honest, it's best to add parentheses to indicate priorities, so the code looks unfriendly.

So I drew a picture, so it looks more obvious.

Cur is divided into three cases, the simplest is the last red box

This is the case that the incoming POS is a number, and the return value means that in all sibling elements, Elem is not the first POS element

The second and third case is that the POS is passed into even and odd respectively.

When Pos passes in even, the return value means that the index of Elem is not even in all sibling elements

POS Incoming odd naturally needless to say

(4), clean

Cleanfunction(a) {varR = [];  for(vari = 0; i < a.length; i++ ) {            if(A[i].constructor = =String) {                varTable = ""; if(!a[i].indexof ("<thead") | |!a[i].indexof ("<tbody")) ) {table= "Thead"; A[i]= "<table>" + a[i] + "</table>"; } Else if(!a[i].indexof ("<tr") ) {table= "TR"; A[i]= "<table>" + a[i] + "</table>"; } Else if(!a[i].indexof ("<td") | |!a[i].indexof ("<th")) ) {table= "TD"; A[i]= "<table><tbody><tr>" + a[i] + "</tr></tbody></table>"; }                    vardiv = document.createelement ("div"); Div.innerhtml=A[i]; if(table) {div=Div.firstchild; if(Table! = "Thead") div =Div.firstchild; if(table = = "td") div =Div.firstchild; }                     for(varj = 0; J < Div.childNodes.length; J + +) R.push (Div.childnodes[j]); } Else if(A[i].jquery | | a[i].length &&!A[i].nodetype) for(vark = 0; K < A[i].length; k++) R.push (A[i][k]); Else if(A[i]!==NULL) R.push (A[i].nodetype?A[i]: document.createTextNode (a[i].tostring ())); }        returnR; },

As mentioned in the second article in this series, there are 3 places where clean's first jquery constructor is Dommanip inside wrap.

But it's not clear exactly where the clean function is used.

But it doesn't matter, let's get to know what it is, and then look at the functions like Dommanip wrap and so on.

By looking at the three places that the clean function is called, it seems to receive an array parameter of a shape such as ["<div></div>", $ ("a"), "<table></table>"]

Each item in the array is traversed, and the traversal takes three different branches depending on its type.

The first branch handles the string, the second branch handles the jquery object, and the third branch processes the non-empty object

Take a look at the simpler second branch and enter this branch with two channels.

The first channel is a[i] has the length property and has no NodeType property

Cannot have NodeType property description A[i] is not a DOM element, has a length property and is a class array element

The second channel is A[i] has a jquery attribute, i.e. A[i] is a jquery object

Regardless of the channel, the last R is the items in the collection of these class arrays

The last else if branch looks the same way

And finally look at the very complex first if branch

Handling cases of ["<div></div>", "<table></table>"]

Inside there's a THEAD tbody tr TD label made a judgment

If this is not a series of tags, then the code simplifies it:

var div = document.createelement ("div"= A[i];  for var j = 0; J < Div.childNodes.length; J + + ) {    r.push (div.childnodes[j]);}

is to convert a string type tag to a real DOM element, and finally store it in R.

For the label of the table family, the process seems to be when the thead tbody TR is passed

Wrapping the table label on the outer layer of these labels

When the TD is passed in, it is wrapped in the TD Outer envelope table TBODY TR

if (table) {    = div.firstchild;     if (Table! = "Thead") div = Div.firstchild    ; if (table = = "td") div = div.firstchild;}

The function of this code is to find the closest parent element to the element passed in.

Through the above analysis and my guess, and then associate the name of this method, feel clean is to return a pure array

This array contains native DOM objects.

Why is that a purely array? Because class array objects may be shaped like:

    {        "1": ODiv1,        "2":oDiv2,        "3": ODiv3,        "Length": 3,         "AAA": 123,        "BBB": 456    }

In other words, the class array object has the length attribute and the AAA BBB.

And one of the functions of this method is to clean off the attributes such as AAA BBB.

The second function is to convert "<div></div>" to the corresponding DOM element

jquery Source Learning 5--Tool method attr parents sibling clean