How the Selector is encapsulated into jQuery objects

This article mainly introduces how the Selector is encapsulated into jQuery objects, and has a certain reference value. Friends needed can be referred to. I hope that everyone has a big gain after reading this article. Let’s take a look at you with everyone.

Foreword: It is the powerful jQuery selector function to say that jQuery has to be said. This feature is very powerful, separately separated Sizzle module for only friends who need to use the selector function. (This article does not say the powerful function of the jQuery selector, first talk about how jQuery is encapsulated into jQuery objects)

1. Dom object and jQuery object

    Test  

var Obox = document.getlementByid ('box'); var Obox2 = Document.QuerySelector ('# box'); Var $ BOX = $ ('# Box'); console.log (OBOX); console.log (OBOX2); console.log ($ box);

Operation:

We can see the difference, $ () package the DOM object into jQuery object, and the DOM object is saved in jQuery [0], this is why we said Translate jQuery objects into DOM objects just jQuery [0] or jQuery.get (0).

II, Simulation JQuery – According to ID, Package JQuery Object

Here you first simplify, look at some of the process of encapsulating jQuery object

   Test   VAR $ box = $ ('# box')Console.log ('This is jQuery object'); console.log ($ box); console.log ('------ Direction line ------'); (Function (Window, undefined) {var jq = function (select) {return new jq.fn.init (select);}; jq.fn = jq.prototype = {jQuery: '2.0.0', // jQuery version number information constructor: jq, / / Add Constructor Properties Length: 0, // Initial Length Property Selector: '', // Init Selector Property {Var Match, Elem, RquickexPR = / ^ (?: \ S * (

[^>] * | # ([\ w -] *)) $ /; match = rquickexpr.exec (selector); // console.log (match); // Regular match to find ID value if (! Selector) {// If selector is '', NULL, undefind direct exits Return this;} elem = document.getlementByid (Match [2]); this [0] = ELEM; this.Context = Document; this.Length = 1; this.selector = selector; returnis}} jq.fn.init.prototype = jq.fn; window. $$ = jq;} (window); console.log ('This is analog object'); console.log ($$ ('# box')) ; // Output package object

2 output results: (opened on Firefox)

It should be noted here that the Chrome browser is displayed differently

$选择器是怎么将DOM封装成jquery对象

jQuery display is a class array object form.

3, analysis $选择器是怎么将DOM封装成jquery对象
There are many friends who don’t understand the above code. I suggest a look at the article I wrote [jQuery source] Some problems need to be solved before learning the source code.


The regular match I used to copy the regularly in the source code, and the result of the regular processing can be output to see.

Third, the simulation jQuery – according to the label name, package jQuery object


directly on code

$选择器是怎么将DOM封装成jquery对象
Test 1

Test 2

Test 3

Test 4
  Console .log ('This is jQuery object'); var ali1 = $ ('li'); console.log (ali1); console.log ('------ Direction line ------'); (Function (window, undefined) {var jq = function (selector, contexT) {return new jq.fn.init (selector, context);}; jq.fn = jq.prototype = {jQuery: '2.0.0', // jQuery version number information constructor: jq, // Add constructor Property Length: 0, // Initial Length Property Selector: '', // Init Selector Init: Function (Selector, Context) {var Match, ELEM; if (! Selector) {// If selector is '', NULL, Undefind directly exits Return this;} elem = document.getlementsByTagname (select); for (var i = 0, len = elem.length; i  
  • output RESULTS:
  • Here is just simple simulations, JQ is far less than simple, jQuery has also made a lot of judgment (hereinafter, the following article will continue to say this Problem). You can also find the prevObject property in the jQuery object. This property saves the last level of the lookup object. Take a look at the example below.
<len; i++){ this[i] = elem[i]; } this.context=document; this.length = elem.length; this.selector = selector; return this; } } jQ.fn.init.prototype = jQ.fn; window.$$ = jQ; })( window ); console.log('这是模拟的对象'); console.log($$('li')); //输出封装的对象
Test 1

Test 2

Test 3

$选择器是怎么将DOM封装成jquery对象 Test 4

VAR Ali1 = $ (‘li’); console.log (ali1); VAR Ali2 = $ (‘li’, ‘. list’; console.log (ali2); var ali3 = $ (‘. list’). Find (‘li’); console.log (ali3);
     
    Thank you can read this article carefully, I hope that Xiaobian sharing $ selector how to put DOM Packed to jQuery object content help everyone, and also hope that everyone will support Tumi Clouds, pay attention to Tumi Cloud Industry Information Channel, find TUMI clouds, detailed solutions waiting for you!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment