[notes] jQuery framework learning notes

Time:2020-6-30

1. Break can only appear in loop or switch statement

2. The immutability of string in memory

var str = "123";
str = str + "abc";
console.log(str);
  • String operation
  • The first step is to create a space in the stack to store the string “123” to which the variable STR points
  • The second step is to open up a new space, find the corresponding value of STR, put the splicing result “123abc” into the new space, and then change the direction of variable STR to make it point to the new space
var num = 123;
num = num + 1;
console.log(num);
  • In numerical operation
  • The first step is to create a space in the stack to store the value 123, and the variable num points to it
  • In the second step, find the value of num, add 1 to get 124, and directly change the value to 124, without opening up new space or changing the direction of num
  • Therefore, when a large number of strings are spliced, there will be some more operations, and the space occupied by the original characters will not be released immediately, so there will be efficiency problems
  • In ES6, string and variable can be directly spliced

3. Only document has getelementbyid method

4. document.getElementsByClassNameThere are compatibility issues

  • When calling, you need to determine whether the current browser supports itdocument.getElementsByClassName
  • If you judge the method directly before using it, you need to make a judgment every time you call it. Therefore, you can declare an object support and add methods to it to determine whether the browser supports some methods in advance.
  • Add the method getelementsbyclassname with the same name to support, and verify whether the method is provided by the browser natively and has the functions it should have, instead of being customized or modified.
var support = {
    getElementsByClassName: function () {
        var b = false;
        if (typeof document.getElementsByClassName === "function") {
            var dv = document.createElement("div");
            var cls = "itcast" + Math.random()
            dv.className = cls;
            //Put the DV created on the page
            document.body.appendChild(dv);
            b = document.getElementsByClassName(cls) === dv;
            document.body.removeChild(dv);
            return b;
        }
        return b;
    }
}

function getElmsByClsName(className, results) {
    results = results || [];
    if (support.getElementsByClassName()) {
        //Support
        results.push.apply(results, document.getElementsByClassName(className));
    } else {
        //Not supported
        var nodes = document.getElementsByTagName("*");
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (" " + node.className + " ".indexOf(" " + className + " ") > -1) {
                results.push(node);
            }
        }
    }
    return results;
}

5. DOM objects have something in common, they all have nodeType attribute, and their values are not 0

  • ELEMENT_ NODE:1 Element node
  • TEXT_ NODE:3 Text node

    • Gets the value of the text node txtNode.nodeValue
  • DOCUMENT_NODE:9 document
  • DOCUMENT_FRAGMENT_NODE:11 documentFragment

6. The way to get elements in jQuery is from back to front

  • Reason: the efficiency of getting from the back to the front is higher
  • CSS selectors are also matched from back to front

7. Recommendation method of dynamic creation elements

  1. String concatenation is used and then added to the page at one time to splice the string + = array: push, and join once last
  2. Create elements using the createElement and add them to the page at one time
  • How to create elements in jquery

    // 1
    var $dv=$("<div></div>");
    $("body").append($dv);
    // 2
    $("body").append("<div></div>");
    // 3
    $("<div></div>").appendTo("body");

8. documentFragment

  • nodetype: 11
  • Advantage: only as container, not occupying structure
  • Usage:var docFrag = document.createDocumentFragment();
  • Encapsulates the function that creates the element

    //Method 1
      var createElement = function (htmlString) {
        var dv = document.createElement("div");
        dv.innerHTML = htmlString;
        var docFrag = document.createDocumentFragment();
        var len = dv.childNodes.length;
        for (var i = 0; i < len; i++) {
          docFrag.appendChild(dv.childNodes[0]);
        }
        return docFrag;
      }
      //Method 2
      var createElement = function (htmlString) {
        var dv = document.createElement("div");
        dv.innerHTML = htmlString;
        var docFrag = document.createDocumentFragment();
        while (dv.firstChild !== null) {
          docFrag.appendChild(dv.firstChild);
        }
        return docFrag;
      }
      var list = createElement("<div>123</div><div>abc</div>");
      document.body.appendChild(list);
    • Note: when using appendChild, the element will be stripped from its original position and placed in the new location, so dv.childNodes The length of the
  • ele1.appendChild(ele2)

    • If ele2 is the original tag on the page, it will be pulled from its original position. If it is not the original tag on the page, it will be added directly
    • Note: when the appendChild method is called, the elements existing in the page or as the child elements (DOM structure) of an element will be removed and then appended. If these elements are stored in an array, and when appendChild is called, the elements are directly obtained from the array, then the elements in the page will be removed and added. But it doesn’t affect the array itself (the order of the elements in the array doesn’t change)
  • ele.cloneNode(boolean)

    //Clone demo cloned elements are received by the variable clone
    var clone = demo.cloneNode(true);
    //Parameter is a Boolean value, true indicates deep copy, false is shallow copy
    //Deep replication copies everything inside
    //The cloned node has no effect on the original node

9. Relation and difference between array and object

  • Array: a collection of ordered key value pairs

    • The index number of the array is equivalent to the key (property) of the object
  • Object: a collection of unordered key value pairs
  • How to distinguish arrays from pseudo arrays?

    1. Array instanceof array returns true if

      • Using this method to determine whether the type is an array, there is no problem in a page. However, if an iframe is nested in a page, some browsers will return false
    2. Array.isArray (ARR) if it returns true, there is a compatibility problem
    3. Object.prototype.toString.call(arr)

10. The relationship between length and push method

  • The push method automatically modifies the length property of the object
  • Whether or not the object has this property at the beginning, if it doesn’t have length in the beginning, it will be added
  • If there is a value of length, it will be modified
  • If this property is read-only, an error will be reported when the push method is called

11. Function declaration and function expression

//If a function declaration has the function keyword, the function declaration will assign the function reference to the identifier after the keyword
  //In the future, the function can be called through this identifier
  function fn1() {
    console.log("fn1");
  }
  //The function expression operator and function keyword make up the expression, and the function becomes a whole
  //It will return the reference of this function, that is, the whole is equivalent to a reference
  var fn2 = function () {
    console.log("fn2");
  };

  //In other words, as long as there are operators, functions become a whole that can be called
  (function () {
  })();
  +function () {
    console.log("fn2");
  }();
  !function () {
    console.log("fn2");
  }();

  //Function expression will not report an error if an identifier is written after the function keyword
  //But there is no meaning. Even if the identifier is written after the function keyword, the reference cannot be obtained
  var fn3 = function fn4() {
    console.log("a");
  };
  fn3(); // a
  fn4(); // Uncaught ReferenceError: fn4 is not defined

12. Entry function of jQuery and window.onload What’s the difference?

  1. The number of bound events is different

    • window.onload It can only appear once
    • window.addEventListener (load, function () {}) this method allows you to bind multiple
    • The entry function of jQuery can appear multiple times
  2. Different timing of implementation (main difference)

    • The entry function of jQuery will be executed when the document tree (DOM tree) is loaded
    • window.onload This event is executed after all external resources (pages, images, videos, imported JS, CSS, etc.) are loaded

13. Get element style

  • Style can only be used to get in line styles
  • W3C standard:

    //The return value is an object. This method can get all the styles of the element
    window.getComputedStyle (element to get [, pseudo element])
    //The return value of IE is an object
    dom.currentStyle()

14. = the equal sign operator returns the value to the right of the equal sign

var a = b = 0;
console.log(a); // 0
console.log(b); // 0

15. The comma operator returns the last value

var a = (1, 3, 5, 7);
console.log(a); // 7
for (var i = 0; i < 10, i < 20; i++) {
    console.log (1) ; // 20 1
}

16. No block level element is allowed inside the P element

17. The length attribute of the function is the number of formal parameters

18. The tabIndex property can set or return the tab key control order of a region

areaObject.tabIndex = tabIndex