jquery Learning Notes-selectors

The jquery selector is very similar to the CSS selector, and the CSS selector provides many functions, both of which are parsed using right-to-left parsing, because when the render tree is established, if the Meici match does not succeed, it needs to be returned and matched, and the inverse parsing uses the exclusion method. The gradual narrowing of the element candidate set optimizes the process of finding the parent element from the child element, which is effective for a large number of elements (so using wildcards is inefficient)

　　Base selector for CSS:

Group selector: Selector1, Selector2, Selector3 ...

Simple selector: ID "#id", Tag "tag", class ". Classes", "Properties" [Att, Att=val, Att~=val, Att|=val, Att^=val, Att*=val, Att$=val] ", wildcard" * ”

Relationship selector: Children "Parent > Child", descendant "ancestor descendant", adjacent "Prev + next", brother "prev ~sibling"

Pseudo-Class selector: Dummy class, Target pseudo class, language pseudo class, state pseudo class, structure pseudo class, take anti pseudo class (Pseudo-class adopts filter, basic, content, visible, child element, form filter)

　　Common Interface Compatibility:

GetAttribute (' className ') must be used before the attribute attributes:ie8, while the remainder is getattribute (' class ')

Form name and ID that do not distinguish ID case before GETELEMENTBYID:IE8 and cannot recognize duplicate names

About getelementbytagname:ie6-8 will include the annotation node in the selection of the wildcard character, it needs to be recursive to judge the nidetype=1 is preferable

About Getelementbyclassname:ie This method is not supported

　　

Compatibility processing for wildcard characters

function Bytagname (tag, context) {

var ele,

Tmp=[],

index = 0,

Resulrs = context.getelementbytagname (tag);

if (tag = = = "*") {

while ((ele = result[index++])) {

if (Ele.nodetype = = = 1) {

Tmp.push (ele);

}

}

return TMP;

}

return results;

};

//getelementsbyclassname
function Getclassnames (tagName, classstr) {
var nodes = document.getElementsByTagName (tagName),
ret = [];
For (i = 0; i < nodes.length; i++) {
if (Hasclass (Nodes[i], classstr)) {
Ret.push (nodes[i])
}
}
return ret;
}

function Hasclass (tagstr, classstr) {
var arr = tagStr.className.split (/\s+/); Class can have multiple
For (var i = 0; i < arr.length; i++) {
if (arr[i] = = classstr) {
return true;
}
}
return false;
}

　　Advanced Interface Queryselector:

Queryselector returns a collection, The Element.queryselectorall returns the set (NodeList) which includes the element itself, which, regardless of the previously invoked context element, always finds all the satisfied elements within the document scope, followed by finding the element in the collection of elements in the preceding sentence that conforms to the child element element, which naturally includes element elements, which also explains why element elements are returned

　　Advanced Interface Compatibility:

　　The previous article mentions that Queryselectorall ignores the context and always looks in the document, which results in the return of the element itself, which is fixed with the Andrew DuPont method for this issue- using the temporarily added ID to display the range and delete after use , as follows

var context = Document.queryselector ('. Aaron ');
var old;
var nid = Math.random ();

Do you have ID/' |\\/g
if ((old = Context.getattribute ("id"))) {
Nid = Old.replace (/' |\\/g, "\\$&");
} else {
Context.setattribute ("id", nid);
}
Nid = "[id= '" + nid + "']";

var newselector = nid + '. Aaron Span ';

if (newselector) {
try {
alert (Context.queryselectorall (newselector). Length)
} catch (Qsaerror) {} finally {
//If the increased range is passed, delete the
if (!old) {
Context.removeattribute ("id");
}
}
}

　　Source Code Analysis Series:

~ing

Reference to MU-class network: https://www.imooc.com/learn/172

Blog Park: https://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-jQuery-selector1.html

jquery Learning Notes-selectors