Analysis of jQuery's chain call

Source: Internet
Author: User
Tags jquery library

The core part of the jQuery method chain is three points:
1) jquery's Package function (that is, jQuery () to build the package object). This constructor can generate a package object full of native DOM objects.
It looks like this... (Of course, the scale and functions of the official database are much different from the implementation methods. I just wrote a rough Implementation Method ):
Er ............ My mistakes. If you are interested in trying the code, remember not to introduce the jQuery library. The name conflict. Copy codeThe Code is as follows: (function (){
// For the sake of simplification, the subclass selector attribute selector is not supported. It only accepts the form such ". className "or" # id "or" tagName "and custom tool functions in combination between them (red) are described below
Function _ jQuery (els ){
This. elements = new Array ();
For (var I = 0; I <els. length; I ++ ){
Var element = els [I];
If (typeof element = 'string '){
Element = element. trim (); // prevents hand-drawn spaces from entering the front and back spaces.
Var sign = element. substr (0, 1 );
If (sign = "#") {// search by id
Element = document. getElementById (element. substr (1 ));
This. elements. push (element );
If (sign = "."){
// Query by class name here a custom tool function for returning dom arrays by class name is used to getElementsByClassName
Element = getElementsByClassName (element. substr (1); // element is an array object at this time. This method is customized as shown in the following figure.
This. elements = this. elements. merge (element );
Else {// No identifier found by Tag Name
Element = document. getElementsByTagName (element); // The element is an array object.
This. elements = this. elements. merge (element); // this method can make the elements array only contain different dom objects, just like set.
Else {
This. elements. push (element );
/* Here, you can start to extend the prototype function of the package object, such
_ JQuery. prototype. addEvent = function (){.........}
*/Window ['jquery '] = function () {return new _ jQuery (arguments)}; if (! Window ['$']) window ['$'] = window ['jquery '];}) () // self-executed anonymous Function

OK. Insert the following simple html document to test it. (do not despise the nonstandard html writing rules... Test)Copy codeThe Code is as follows: <! Doctype html public "-// W3C // dtd html 4.01 // EN" "">
<Title> my function addtion </title>
<Div id = "header">
<P id = "header1" class = "entrance">
<P id = "header2" class = "entrance">
<P id = "header3" class = "entrance">
<A href = ""> header3 </a>
<Div id = "content" class = "news">
<P id = "content1" class = "topic">
<P id = "content2" class = "topic">
<P id = "content3" class = "topic">
<A href = ""> node3 </a>
<Div id = "foot">
<P id = "foot1" class = "entrance"> </p>

Input:Copy codeThe Code is as follows: var f = $ ('# header'). elements [0];
Using LES. write ("nodeName:" + f. nodeName + "=> Id:" + f. id)
/* A custom debugging panel tool that replaces alert. Because it is used to copy a book, it is a bit of a bug and its functions and operability are not very good, in the next two days, I may modify it and put it up. I can use alert instead of alert for debugging */


Input:Copy codeThe Code is as follows: var e = jQuery ('div ', 'P'). elements; // a few spaces are intentionally entered here.
For (var I = 0; I <e. length; I ++ ){
Using LES. write ("nodeName:" + e [I]. nodeName + "=> Id:" + e [I]. id );


Although we have integrated several methods for dom object search, we can still see that it is very annoying to use circular statements to operate dom objects every time, in addition, many methods for this package object will be introduced based on this package, such as the addEvent method above, these methods are finally introduced to manipulate the native dom objects encapsulated in the object. Therefore, each method must introduce the for or while statement, which leads to the second core function ==> jQuery. each () {}; too late... Summary tomorrow
The tool functions used in this article (they are all useful functions ):Copy codeThe Code is as follows: // className: Class Name tag: searches for parent within the range of tag names: searches for parent within this parent node
Function getElementsByClassName (className, tag, parent ){
Parent = parent | document; // The default value is document.
Var tag = tag | '*'; // All tags are searched by default.
Var elements = new Array ();
Var re = new RegExp ('(^ | \ s)' + className + '(\ s | $ )');
Var allList = parent. getElementsByTagName (tag );
Var element;
For (var I = 0; I <allList. length; I ++ ){
Element = allList [I];
If (element. className. match (re )){
Elements. push (element );
Return elements;

Copy codeThe Code is as follows: if (! String. prototype. trim) {// remove leading and trailing Spaces
String. prototype. trim = function (){
Return this. replace (/^ \ s + | \ s + $/g ,'');

If (! Array. prototype. merge ){
Array. prototype. merge = function (arr) {// makes it possible to put an Array of objects with the same set characteristics into the same Array. Do not despise the even algorithm.
For (var I = 0; I <arr. length; I ++ ){
Var signals = false;
For (var j = 0; j <this. length; j ++ ){
If (arr [I] = this [j])
Signals = true;
If (! Signals) this. push (arr [I]);
Return this;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.