This explanation note is for their own in the process of looking at the source of some problems encountered in the answer, may not have reference to the public, but you can see if there is no place you do not understand, mutual learning, mutual progress.

1

Before the use of each has been confused, this time finally understand.

Source:

each: function( obj, callback, args ) {
        var value,
            i = 0,
            length = obj.length,
            isArray = isArraylike( obj );

        if ( args ) {
            if ( isArray ) {
                for ( ; i < length; i++ ) {
                    value = callback.apply( obj[ i ], args );

                    if ( value === false ) {
                        break;
                    }
                }
            } else {
                for ( i in obj ) {
                    value = callback.apply( obj[ i ], args );

                    if ( value === false ) {
                        break;
                    }
                }
            }

        // A special, fast, case for the most common use of each
        } else {
            if ( isArray ) {
                for ( ; i < length; i++ ) {
                    value = callback.call( obj[ i ], i, obj[ i ] );

                    if ( value === false ) {
                        break;
                    }
                }
            } else {
                for ( i in obj ) {
                    value = callback.call( obj[ i ], i, obj[ i ] );

                    if ( value === false ) {
                        break;
                    }
                }
            }
        }

        return obj;
    },
Copy the code

View Code

Each takes three arguments: the first is an object or array, the second is a callback, and the third is an array or object

Example:

var t={name:"t",age:"t1"}; Var tt = [1, 2, 3]; $.each(t,function(j){ console.log(j); / / 1. },tt) $.each(tt,function(j){console.log(j); / / 1. 1 },t)//undefinded ; undefined ; $. Each (t,function(j){console.log(j); //name; age }) $.each(t,function(i,j){ console.log(i+" "+j); //name t; age t1 }) $.each(tt,function(i,j){ console.log(i+" "+j); / / 0 1; 1, 2; 2, 3; })Copy the code

JQuery often uses each to create functions.

 

Iterating through the elements of an array, binding methods are labor-saving and easy to understand.

 

2. An equation

var name="t"; var getByName = typeof name === "string"; // Name must be the string console.log(getByName); //true console.log(name); //t // Similar occurrences in access functions. bulk = key == null;Copy the code

3. The exec() method is used to retrieve matches of regular expressions in strings.

The exec() method is used to retrieve a match for a regular expression in a string. Returns an array containing the matching results. If no match is found, the return value is null.

If exec() finds the matching text, it returns an array of results. Otherwise, null is returned. The 0th element of this array is the text that matches the regular expression, the first element is the text that matches the first subexpression of RegExpObject (if any), the second element is the text that matches the second subexpression of RegExpObject (if any), And so on. In addition to the array element and the length attribute, the exec() method returns two attributes. The index property declares the position of the first character of the matching text. The input property holds the retrieved string string. We can see that when we call the exec() method of a non-global RegExp object, we return the same array as when we call the string.match () method.

However, when RegExpObject is a global regular expression, the behavior of exec() is a little more complicated. It starts retrieving the string at the character specified in the lastIndex attribute of RegExpObject. When exec() finds the text that matches the expression, after the match, it sets the lastIndex property of RegExpObject to the position next to the last character of the matched text. That is, you can iterate over all the matching text in the string by calling the exec() method repeatedly. When exec() finds no more matching text, it returns NULL and resets the lastIndex attribute to 0.

var str = "Visit W3School"; var patt = new RegExp("W3School","g"); var result; while ((result = patt.exec(str)) ! = null) { document.write(result); document.write("<br />"); document.write(patt.lastIndex); } output: W3School 14Copy the code

rquickExpr = /^(? :\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/; var str = ‘

‘; var match = rquickExpr.exec(str); console.log(match) //[”

“, ”

“, undefined, index: 0, input: ”

“]

var str = ‘#test’;

var match = rquickExpr.exec(str);

console.log(match[1])//undefined

rsingleTag = /^<(\w+)\s*\/? > (? : < 1 > \ / \ |) /, here behind the use of the \ 1. \1 is similar to the ‘/’ used in replace. \1 is similar to the ‘1’ used in replace and can match the first child match

Undefined because the last # does not match, that is, it is not found. The order of search is to start with the first parenthesis, and then start with the second parenthesis, even if the second parenthesis is inside the first parenthesis.

The match array is marked at 0, match[0], which represents the first match. The value of index, the first match.

4. The difference between ownerDocument and documentElement

  • OwnerDocument is an attribute of a Node object that returns the root document object of an element: the Document object
  • DocumentElement is an attribute of the Document object that returns the Document root node
  • For HTML documents, documentElement is the Element object corresponding to the < HTML > tag, and ownerDocument is the Document object
<div id="one"></div> <div></div> <script > var dom=document.getElementById("one"); console.log($("div").ownerDocument); //undefined console.log(document.ownerDocument); //null console.log(document.documentElement.ownerDocument); / / document object console. The log (document. Body. OwnerDocument); / / document object console. The log (dom. OwnerDocument); / / document object console. The log (dom. NodeType); //1 console.log(window.document.nodeType); //9 console.log(window.document); / / document object console. The log (document. Body. OwnerDocument. DefaultView); / / the console window object. The log (dom) ownerDocument) defaultView); / / the console window object. The log (dom) ownerDocument) documentElement); //<html><head><body>.... Is the tag < / script >Copy the code

 

5, jQuery. ParseHTML

The string is converted into a set of DOM elements using the native DOM element creation function, which can then be inserted into the document.

str = "hello, <b>my name is</b> jQuery.",
html = $.parseHTML( str ),
Copy the code

6, strundefined = typeof undefined

Converts undefined to a string for judgment

strundefined = typeof undefined, console.log(strundefined+" "+$.type(strundefined)); //undeined stringCopy the code

7. Node relationship

In fact, it is not difficult to find that a node has the following relations with another node: ancestor and offspring, father and son, adjacent brother, ordinary brother.

In the CSS selector, we use: space; >; +; ~

The relation between grandfather and grandson child1 is the relation between grandfather and grandson child1.

  • Child1 is the relationship between father and son. (> expression)
  • Brother Child1 and brother child2 are near siblings
  • Older child1 and younger child2 and 3 are ordinary brothers.

 

8, value.match(core_rnotwhite)

Read the source code process, often encountered

classNames = value.match( core_rnotwhite ) || [];

// core_rnotWhite = /\S+/g, matches any string that is not whitespace

Match returns an array, so if not, it returns an empty array

And similar expressions, is actually the value separated by Spaces into an array, the equivalent of classes = (value | | “”). The split (” / \ s + /”)

 

The difference between null and”

 

$("#one").removeClass(""); console.log( $('#one').attr('class') ); //1 huanshen huansky $("#one").removeClass(); console.log( $('#one').attr('class') ); // var t=null ? 1:0; console.log(t); //0 var t=" " ? 1:0; console.log(t); //1 var t="" ? 1:0; console.log(t); //0 function sum(){ console.log(arguments.length); / / 1}; sum("");Copy the code

 

Arguments. length=0; arguments.length=0; arguments.length=0;

When removeClass takes no arguments, it removes all classes

10, on, bind, delegate, live

Well,.bind(),.live(),.delegate() are all done with.on(),.unbind(),.die(),.undelegate() are all done with.off(). Provides a unified way to bind events

.delegate() is the event delegate

$('#element).delegate('a', 'click', function() { alert("!!!") });
Copy the code

 .bind       $(‘#foo’).bind(‘click’,function(){ })

.live(), which attaches a delegated event handler to a page’s Document element, simplifies the use of event handling on dynamically added content on the page. It’s now abandoned,

$('a').live('click', function() { alert("!!!") });
Copy the code

One, only triggers once

one: function( types, selector, data, fn ) {
    return this.on( types, selector, data, fn, 1 );
},
Copy the code

Delegate events that take on directly

$(' ul ') on (' click ', 'a', function (e) {alert (' click event "); }); The.bind() method is used to attach an event handler directly to an element.Copy the code

Conclusion:

You should use.delegate() instead of.bind() when:

  • Bind the same event to many elements in the DOM;
  • Bind events for elements that do not yet exist in the DOM.

The delegate() method provides a nice way to make things more efficient, and we can also add an event handler to dynamically added elements. We can use.on() instead of all three methods

There are also disadvantages:

  • Not all events can bubble, such as load, change, submit, focus, blur
  • Make management more complex.
  • Poor simulation of user-triggered events

How to choose or reject depends on the actual application of the project.