Jquery 1.9.1 Source Analysis Series (12) Filtering Operation _jquery

No more nonsense. Straight into the theme.

JQuery.fn.find (selector)

Find accepts a parameter expression selector: selectors (strings), Dom elements (element), jquery objects. To deal with in two different situations:

First, if the incoming argument is not a string, the selector is searched first through the jquery selector, and then the node that contains the element that matches the current jquery object is filtered out.

if (typeof selector!== "string") {
 self = this;
 Return This.pushstack (JQuery (selector). Filter (function () {for
  (i = 0; i < len; i++) {
   if (jquery.contain S (self[i], this)) ({return
    true;}}})
 ;
}

You can see in the filter condition Jquery.contains (self[i], this) is the key, the function uses the function in the sizzle selector, has the analysis in the Sizzle engine, the detail clicks.

Second, if the selector is a string, call jquery.find (= Sizzle) to directly handle

ret = [];
for (i = 0; i < len; i++) {
 //The second parameter is to represent the context
 Jquery.find (selector, this[i], ret);
$ (selector, context) becomes $ (context). Find (selector), need to go heavy and pushstack
ret = this.pushstack (len > 1? jquery.uniqu E (ret): ret);
Ret.selector = (this.selector this.selector + "": ") + selector;
return ret;

JQuery.fn.closest (selectors, context)

The second parameter is optional. function is used to select the first element that conforms to the specified expression, and then return it as a jquery object, starting at the current matching element.

The expressions here include selectors (strings), Dom elements (element), and jquery objects.

　　The processing steps in the code are

1. According to the parameters of the transfer of the first query results saved in the POS.

pos = rneedscontext.test (selectors) | | TypeOf selectors!== "string"?
JQuery (selectors, context | | this.context):
0;

2. Iterate through each element of the current jquery object, starting with this element, and selecting the first ancestor element that conforms to the specified expression.

for (; I < L; i++) {
 cur = this[i];
 while (cur && cur.ownerdocument && cur!== context && Cur.nodetype!==) {
  if (POS) pos. Index (cur) > -1:jquery.find.matchesselector (cur, selectors)) {
   ret.push (cur);
   break;
  cur = cur.parentnode;
 }
Return This.pushstack (Ret.length > 1 jquery.unique (ret): ret);

The parents () and. Closest () methods are similar, and they all traverse the DOM tree up. But the difference is great. Closest to find the first qualifying, parents is to find all the sets that match the criteria.

Jquery.fn. parent/parents/parentsuntil/next/prev/nextall/prevall/nextuntil/prevuntil/siblings/children/contents Detailed

　　The above sets of filters are put together to deal with the source code as follows

Jquery.each ({
  parent:function (elem) {...},
  parents:function (elem) {...},
  parentsuntil:function (elem, I, UN  til) {...},
  next:function (elem) {...},
  prev:function (elem) {...},
  nextall:function (elem) {...},
  Prevall: function (Elem) {...},
  nextuntil:function (Elem, I, until) {...},
  prevuntil:function (Elem, I, until) {...}
  ,  Siblings:function (Elem) {...},
  children:function (elem) {...},
  contents:function (elem) {...}}
 , Function ( Name, FN) {
  jquery.fn[name] = function (until, selector) {
   var ret = Jquery.map (this, FN, until);
   Filter
   ...
   Return This.pushstack (ret);
  };
 

As you can see, these filter steps are consistent. The map function is used to take each matched element of the current jquery object into the corresponding matching function (FN) to obtain the result and then filter it later.

Let's take a look at the filter at the back (Jquery.map (this, FN, until) to get the alternative seed ret)
First of all, not all filter functions have until this parameter, only a few filters at the end of until need this parameter, the other filter only selector this parameter.

if (!runtil.test (name)) {
 selector = until;
}

Second, if there is a selector, filter the previous lookup results by selecting the RET

if (selector && typeof selector = = "string") {
 ret = Jquery.filter (selector, ret);
}

Then, several filter conditions inside the Guaranteedunique (children/contents/next/prev) have multiple occurrences of the number of elements matched by the current jquery object, and the results obtained from each matching element are saved in the result set ret. And does not need to be heavy. Other screening is going to be heavy. Click to view the Jquery.unique method detailed

ret = this.length > 1 &&!guaranteedunique[name]? Jquery.unique (ret): ret;

In addition, the special case that needs to be handled is that if the current jquery object matches more than one element, the results of the three filters using parents/prevuntil/prevall need to be sorted in reverse order. Reason to reverse: Jquery.unique uses the sort function in the sizzle engine sizzle. Uniquesort, this sort function is arranged according to the topmost object of the document to the lowest level.

if (This.length > 1 && rparentsprev.test (name)) {
 ret = Ret.reverse ();
}

Finally, return the result of the parcel

Return This.pushstack (ret);

It says the frame structure of the subject, and here's a list of the two functions used in the filter matching function Jquery.dir and jquery. Sibling, directly on the source
The node that corresponds to the specified dir from the current element elem the Dir and saves the nodes in matched until the loop terminates. Note: The results do not contain elem nodes

Dir:function (Elem, dir, until) {
 var matched = [],
 cur = elem[dir];
 while (cur && cur.nodetype!== 9 && (until = = undefined | | Cur.nodetype!== 1 | |!jquery (cur). is (unti L))) {
  if (Cur.nodetype = = 1) {
   matched.push (cur);
  }
  cur = Cur[dir];
 }
 return matched;
},
//Get node set R sibling:function (n, elem) of Elem node n and its sibling node
{
 var r = [];
 for (; n; n = n.nextsibling) {
  if (N.nodetype = 1 && n!== elem) {
   r.push (n);
  }
 } return
 R;
}
Finds the next dir of the current element cur
function sibling (cur, dir) {do
  {
   cur = cur[dir]; while
  (cur && cu R.nodetype!== 1);
  return cur;
 }

JQuery.fn.add (selector, context) and Jquery.fn. Addback (selector)

The Add function is to add elements that match the specified expression to the current matching element and return in the form of a jquery object. Add can receive include selectors (strings), HTML content (strings), Dom elements (element), jquery objects. Easy to handle, directly on the source

Add:function (Selector, context) {
 var set = typeof Selector = = "string"?
   JQuery (Selector, context):
   Jquery.makearray (selector && selector.nodetype?) [selector]: selector),
  //The result set of the selector expression is spliced to the current object all
  = Jquery.merge (This.get (), set);
 Returns the new concatenation result return
 this.pushstack (jquery.unique);
JQuery.fn.add and JQuery.fn.not correspond. JQuery.fn.not back.
JQuery.fn.addBack adds the previously matched element to the currently matched element and returns in the form of a new JQuery object.
addback:function (selector) {return
 this.add (selector = = null?
  ) This.prevObject:this.prevObject.filter (selector)
  );
JQuery.fn.andSelf = jQuery.fn.addBack;
JQuery.fn.not (selector) and JQuery.fn.filter (selector)
not:function (selector) {return
 this.pushstack ( Winnow (this, selector, false);
}
Filter:function (selector) {return
 This.pushstack (Winnow (this, selector, true));

Not and filter are sets of the operations themselves, not the items that filter out the selector of the filter in their own collection, leaving other items behind. And filter is left to meet the filter conditions selector.

The key is function winnow (elements, qualifier, keep) functions. Function of this function is to perform the same filtering or not filtering function. There are three qualifier of filter conditions: Functions, DOM nodes, and strings. Keep:true indicates that the item that satisfies the filter condition is preserved, and false indicates that the item that does not meet the filter condition is retained.

Winnow's source code comments are as follows

Perform the same filtering or unfiltered functional function winnow (elements, qualifier, keep) {//Can ' t pass null or undefined to indexOf in Firefox 4 Set to 0 to skip string check qualifier = Qualifier | |
 0;  If the filter condition is a function, filter the IF (Jquery.isfunction (qualifier)) {return Jquery.grep (elements, function (Elem, i) {var RetVal =!!
   Qualifier.call (Elem, I, elem);
  return retVal = = Keep;
 }); If the filter condition is a DOM-related type, filter the} else if (Qualifier.nodetype) {return jquery.grep (elements, function (Elem) {Re by comparing the nodes to the same
  Turn (Elem = = = Qualifier) = = Keep;
 }); If the filter condition is a string} else if (typeof qualifier = = "string") {//filter out the node element in elements var filtered = Jquery.grep (elements, F
  Unction (elem) {return elem.nodetype = = 1;
  }); of which issimple =/^.
  [^:#\[\.,]*$/if (issimple.test (qualifier)) {return Jquery.filter (qualifier, filtered,!keep);
  else {//find node qualifier = Jquery.filter (qualifier, filtered) in filtered that meet the filter criteria qualifier; }//filter out the elements in the elements that meet the filter conditions return JquEry.grep (Elements, function (Elem) {return (Jquery.inarray (Elem, qualifier) >= 0) = = Keep;
}); }

Where to use to Jquery.grep,grep detailed click here.

Jquery.filter (expr, elems, not) This low-level API is designed to handle situations where the filter condition in JQuery.fn.filter is a string.

JQuery.filter:function (expr, elems, not) {
 if (not) {
  expr =]: not ("+ expr +");
 }
 Where matchesselector and matches are functions in sizzle. Matchesselector is to determine whether a single element elem satisfies an expression expr,matches is an entry that satisfies expression expr in the Lookup element collection Elems return
 elems.length = 1?
  JQuery.find.matchesSelector (Elems[0], expr)? [Elems[0]]: []:
  jQuery.find.matches (expr, elems);
},

JQuery.fn.index (elem)

The index function is actually a collection of multi-function functions.

First feature: Do not pass the Elem parameter, which represents the position of the current jquery object (the first element of the jquery object) in all its sibling elements.

if (!elem) {return
 (This[0] && this[0].parentnode)? This.first (). Prevall (). Length:-1;
}

Second function: If the parameter is a string type, it is treated as a selector, returning the index position of the current element in the element that the selector matches. Returns 1 if the selector does not match any elements or the current element is not within the matched element.

if (typeof elem = = = "string") {
 //searches for the specified value in array jQuery (Elem) and returns its index value return
 Jquery.inarray (this[0), JQuery (elem ) );
}

The third feature: If object is a DOM element or a jquery object, returns the index position of the element (or the first element in the jquery object) in the element that matches the current jquery object.

Return Jquery.inarray (Elem.jquery. elem[0]: Elem, this);

Other filtering processes are not analyzed. Look at the source can understand.

jquery Selector

selector	instance	Select
*	$("*")	All elements
#ID	$ ("#lastname")	id= elements of "LastName"
. class	$ (". Intro")	All elements of the class= "Intro"
Element	$ ("P")	All <p> elements
. class. class	$ (". Intro.demo")	All class= "Intro" and Class= "demo" Elements
: A	$ ("P:first")	First <p> Element
: Last	$ ("P:last")	Last <p> Element
: Even	$ ("Tr:even")	All even <tr> elements
: Odd	$ ("tr:odd")	All odd <tr> elements
: eq (index)	$ ("UL Li:eq (3)")	Fourth element in the list (index starting from 0)
: GT (no)	$ ("UL li:gt (3)")	List elements with index greater than 3
: LT (no)	$ ("UL Li:lt (3)")	List elements with index less than 3
: Not (selector)	$ ("Input:not (: Empty)")	All input elements that are not empty
: Header	$ (": Header")	All header elements
: Animated		All animation elements
: Contains (text)	$ (": Contains (' W3school ')")	Contains all the elements of the specified string
: Empty	$ (": Empty")	All elements with No child (element) node
: Hidden	$ ("P:hidden")	All the hidden <p> elements
: Visible	$ ("table:visible")	All visible Tables
S1,s2,s3	$ ("Th,td,.intro")	All elements with a matching selection
[attribute]	$ ("[href]")	All elements with the href attribute
[attribute=value]	$ ("[href= ' # ']")	The value of all href attributes equals the element of "#"
[attribute!=value]	$ ("[href!= ' # ']")	The value of all HREF attributes is not equal to the element of "#"
[attribute$=value]	$ ("[href$= '. jpg ']")	The value of all HREF attributes contains elements that end with ". jpg"
: input	$ (": input")	All <input> elements
: Text	$ (": Text")	<input> Elements of all type= "text"
:p Assword	$ (":p Assword")	<input> Elements of all type= "password"
: Radio	$ (": Radio")	<input> Elements of all type= "Radio"
: checkbox	$ (": checkbox")	<input> Elements for all type= "checkbox"
: Submit	$ (": Submit")	All type= "Submit" <input> elements
: RESET	$ (": Reset")	<input> Elements of all type= "reset"
: button	$ (": Button")	<input> Elements of all type= "button"
: Image	$ (": Image")	<input> Elements of all type= "image"
: File	$ (": File")	<input> Elements of all type= "file"
: Enabled	$ (": Enabled")	All active input elements
:d isabled	$ (":d isabled")	All disabled input elements
: Selected	$ (": Selected")	All selected input elements
: Checked	$ (": Checked")	All the input elements that are selected