Simple implementation and notes of jQuery selector

#Introduce jQuery tool library
##Download address
- cdn:http://www.jq22.com/cdn/#a2
-Download address: http://www.jq22.com/jquery-info122
#Document query
-Chinese: https://www.jquery223.com/
-English: https://jquery.com

 

##Introducing jQuery
```js
< script SRC = ". / jQuery. JS" >
```
##DOMContentLoaded and onload
```js
//Wait for all information to load, and execute the following function
window.onload = function(){
    console.log("window.onload");
}
//After the initial HTML document is fully loaded and parsed
document.addEventListener("DOMContentLoaded", function(){
    console.log("DOMContentLoaded");
});
```

 

##jQuery execution function
```js
$(function(){});

 

$(document).ready(function(){});
```

 

##$() reference
```js
$(". wapper ul"); / / equivalent to the following
$("ul", ". wapper"); / / find the ul element under. wapper
```

 

##jQuery library, principle analysis
```js
//jQuery library is a closed scope
//To implement a simple jQuery library, you can choose id and class
(function () {
/ / create a jQuery constructor
    function jQuery(selector) {
        return new jQuery.prototype.init(selector);
    }
/ / add init attribute for jQuery prototype, which can be used by all instances
    jQuery.prototype.init = function (selector) {
this.length = 0; / / add the length attribute to this and assign it a value of 0
/ / select dom and wrap it as jQuery object to return
/ / only if the selector is id and class
if (selector.indexOf('.')! = - 1) {/ / when selector is class
            var dom = document.getElementsByClassName(selector.slice(1));
} else if (selector.indexOf("×")! = - 1) {/ / when selector is id
            var dom = document.getElementById(selector.slice(1));
        }

 

if (dom.length = = = undefined) {/ / selector is id, which returns an object without the length attribute
            this[0] = dom;
            this.length++;
The else {/ / selector is a class and returns an array of classes
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i];
                this.length++;
            }
        }
    };

 

/ / add css attribute for jQuery prototype, which can be used by all instances
    jQuery.prototype.css = function (config) {
        for (var i = 0; i < this.length; i++) {
            for (var prop in config) {
                this[i].style[prop] = config[prop];
            }
        }

 

return this; / / the essence of chain call
    };

 

/ / the above jQuery constructor is a jQuery.prototype.init object,
There is no css() method on jQuery.prototype on the //jQuery.prototype.init object
/ / so add the following sentence so that the jQuery.prototype.init object can call the css() method on jQuery.prototype
    jQuery.prototype.init.prototype = jQuery.prototype;

 

/ / make external calls through $() or jQuery()
    window.$ = window.jQuery = jQuery;
}());
```
These are markdown notes
 
 
To implement a simple jQuery library, you can choose id and class
(function () {
    //Create a jQuery Constructor
    function jQuery(selector) {
        return new jQuery.prototype.init(selector);
    }
    //by jQuery Prototype addition of init Property that can be used by all instances
    jQuery.prototype.init = function (selector) {
        this.length = 0; //by this Add to length Property with a value of 0
        //elect dom And packed into jQuery Object return
        //Judge only selector yes id and class Situation of
        if (selector.indexOf('.') != -1) { //selector yes class Situation of
            var dom = document.getElementsByClassName(selector.slice(1));
        } else if (selector.indexOf("#") != -1) { //selector yes id Situation of
            var dom = document.getElementById(selector.slice(1));
        }

        if (dom.length === undefined) { //selector yes id,An object is returned. The object does not length attribute
            this[0] = dom;
            this.length++;
        } else { //selector yes class,Returns an array of classes
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i];
                this.length++;
            }
        }
    };

    //by jQuery Prototype addition of css Property that can be used by all instances
    jQuery.prototype.css = function (config) {
        for (var i = 0; i < this.length; i++) {
            for (var prop in config) {
                this[i].style[prop] = config[prop];
            }
        }

        return this; //The essence of chain call
    };

    //above jQuery Constructor is new One jQuery.prototype.init Object,
    //jQuery.prototype.init No on object jQuery.prototype Upper css()Method
    //So add the following sentence to let jQuery.prototype.init Object can call jQuery.prototype Upper css()Method
    jQuery.prototype.init.prototype = jQuery.prototype;

    //Let the outside pass through $()perhaps jQuery()call
    window.$ = window.jQuery = jQuery;
}());
myJquery.js

Call myJquery.js:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="wrapper">1</div>
    <div class="demo">2</div>
    <div class="demo">3</div>
    <script src="./myJquery.js"></script>
    <script>
        $("#wrapper").css({
            width: '100px',
            height: '100px',
            background: 'red'
        });
        $(".demo").css({
            width: '200px',
            height: '200px',
            background: 'blue'
        });
    </script>
</body>

</html>
index.html

Effect display:

 

 

Tags: Javascript JQuery Attribute

Posted on Fri, 08 May 2020 04:55:42 -0700 by robert_a89