jquery Source Analysis---Building the DOM elements of jquery

In the JQuery.fn.init function, the final result is to put the DOM elements into a collection of jquery objects, which we can pass in a single DOM element or a collection of DOM elements directly to the collection of jquery objects. However, if the first argument is of type string, a DOM document tree, such as #id, is searched. For snippets of HTML, you have to generate DOM elements. Let's go further, where are the single DOM element or DOM element collection parameters passed in? We can look for elements directly or indirectly through the DOM element.

This section first analyzes how to generate DOM elements from fragments of HTML, and then analyzes how jquery can find DOM elements in the DOM tree either directly or indirectly, and the third is to analyze CSS selector based on CSS1~CSS3.

3.1 Generating DOM elements

In the Init method, the Jquery.clean ([match[1]], context) is implemented to convert the HTML fragment to a DOM element, which is a static method:

Converts HTML to DOM elements, elems multiple HTML string arrays
Clean:function (Elems, context) {
var ret = [];
Context = Context | | document;//The default context is document
!context.createelement in IE does not work because it returns the object type
if (typeof context.createelement = = ' undefined ')
This supports the context as a JQuery object, taking the first element.
Context = Context.ownerdocument | | Context [0]
&& Context[0].ownerdocument | | Document

Jquery.each (Elems, function (i, elem) {
The most efficient way to convert an int to string
if (typeof elem = = ' number ') elem + = ';
if (!elem) return;//as ', Undefined,false return when
if (typeof Elem = = "string") {//convert HTML to DOM element
Fixed "XHTML"-style tags, for <div/> in the form of changes to <div></div>
But for (abbr|br|col|img|input|link|meta|param|hr|area|embed)
Do not modify. Front= (< (w+) [^>]*?)
Elem = Elem.replace (< (w+) [^>] />/g, function (all, front, tag) {return Tag.match (/^ Abbr|br|col|img|input|link|meta|param|hr|area|embe d) $/i)?　 All:front + "></" + tag+ ">";} );
Go to a space, or indexof may not work properly
var tags = Jquery.trim (elem). toLowerCase (),
div = context.createelement ("div");//Create an element within the context <div>
Some tags must have some constraints, such as <option> must be in the middle of <select></select>
The following code fixes most of the <table> neutron elements. The first element in the array is the depth var wrap =
<opt at the beginning (index=0) returns the array after &&, which is a constraint on <option>
!tags.indexof ("<opt") && [1, "<select
multiple= ' multiple ' >, ' </select> '
<leg must be within <fieldset>
|| ! Tags.indexof ("<leg") && [1, "<fieldset>", "</fieldset>"]
Thead|tbody|tfoot|colg|cap must be within <table>
|| Tags.match (/^< (THEAD|TBODY|TFOOT|COLG|CAP)/)
&& [1, "<table>", "</table>"]
<tr in the middle of <tbody>
|| !tags.indexof ("<tr") && [2, "<table><tbody>", "</tbody></table>"]
TD in the middle of TR
(!tags.indexof ("<td") | | |!tags.indexof ("<th")) && [3,
"<table><tbody><tr>", "</tr>&l t;/tbody></table>"]
Col in the middle of <colgroup>
|| !tags.indexof ("<col") && [2,
"<table><tbody></tbody><colgroup>", "</colgroup></table>"]
Link script in IE cannot be serialized?
|| jquery.browser.msie&& [1, "div<div>", "</div>"]
Default does not fix
|| [0, "", ""];

After wrapping HTML, convert innerHTML into DOM
div.innerhtml = wrap[1] + elem + wrap[2];

while (wrap[0]--)
Go to the right depth, for [1, <table>, </table>],div=<table>
div = div.lastchild;

Fragments Remove IE to <table> automatically insert <tbody>
if (JQuery.browser.msie) {
The first case: tags with <table> start but no <tbody>. Elements that are generated in IE may automatically
Add <tbody> second case: Thead|tbody|tfoot|colg|cap for tags,
that wrap[1] = = "<table>". Tbody is not necessarily tbody, it may be thead, etc.
var tbody =!tags.indexof ("<table") && tags.indexof ("<tbody") < 0
? div.firstchild&& Div.firstChild.childNodes
: wrap[1] = = "<table>" && tags.indexof ("<tbody") < 0
? Div.childnodes: [];
Remove <tbody>
for (var j = tbody.length-1;j >= 0;--j)
if (Jquery.nodename (TBODY[J),
"Tbody") &&!tbody [J].childnodes.length) tbody [J].parentnode.removechild (Tbody[j]);

Using Innerhtml,ie will go to the beginning of the space node, plus the removed space node
if (/^s/.test (elem)) Div.insertbefore (Context.createtextnode
(Elem.match (/^s*/) [0]), div.firstchild);
}
Elem = Jquery.makearray (div.childnodes);//elem converted from character to array
}
Use ===0 because the Form,select has a length attribute. This is mainly for form,select.
The If else handle below the line. For other length = = 0, do not add to the RET at all.
if (elem.length = = 0&& (!jquery.nodename (Elem, "form")
&&!jquery.nodename (Elem, "select"))
Return
is not an element in the form of a (class) array, or a FORM element or a SELECT element (these two can be considered an array of classes)
if (elem[0] = = undefined| | jquery.nodename (Elem, "form") | | elem.options)
Ret.push (Elem);
else//for Elems is a collection of array-like
ret = Jquery.merge (ret, elem);
});
Each of the above adds a valid element to the RET, and now returns an array of the converted Dom elements as soon as
return ret;
},

In the above code, we can see that for Elems, the parameters of the context are supported in many forms, elems can be in the form of (class) arrays, and can take the form of objects. The attributes of an element or object in an array can be mixed, such as string,ojbect, or even the form of an array of (classes). For numeric types, it is converted to a string, except for the string, which is placed in the returned array, and for the form of the collection, each element in the collection is taken.

The form of a string is converted to the form of a DOM element, which is then saved in the returned array. This is the main task of this function. For converting HTML to DOM elements, this uses innerHTML to hang HTML in the DOM document tree. This translates into a DOM element.

Some HTML tag fragments are bound, such as <TD>XX</TD>, which must exist in the TR of the table, that is, the revision of the label fragment to be HTML. This is also the focus of the above code processing.