当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery选择器的简单实现和笔记

jQuery选择器的简单实现和笔记

2020年05月09日  | 萬仟网IT编程  | 我要评论
# 引入jquery工具库
## 下载地址
- cdn:http://www.jq22.com/cdn/#a2
- 下载地址:http://www.jq22.com/jquery-info122
# 文档查询
- 中文:https://www.jquery123.com/
- 英文:https://jquery.com

 

## 引入jquery
```js
<script src="./jquery.js"></script>//必须放在所有引入文件的上面,防止变量冲突
```
## domcontentloaded 和 onload
```js
//等待所有信息加载完毕,执行下面的函数
window.onload = function(){
    console.log("window.onload");
}
//当初始的 html 文档被完全加载和解析完成之后
document.addeventlistener("domcontentloaded", function(){
    console.log("domcontentloaded");
});
```

 

## jquery执行函数
```js
$(function(){});

 

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

 

## $()传参
```js
$(".wapper ul");//等价于下面的写法
$("ul", ".wapper");//找到.wapper下面的ul元素
```

 

## jquery库,原理解析
```js
//jquery库是一个封闭作用域
//实现一个简单的jquery库 可以选择id和class
(function () {
    //创建一个jquery构造函数
    function jquery(selector) {
        return new jquery.prototype.init(selector);
    }
    //为jquery的原型添加init属性,所有实例可以使用该属性
    jquery.prototype.init = function (selector) {
        this.length = 0; //为this添加length属性,并且赋值为0
        //选出 dom 并且包装成jquery对象返回
        //只判断selector是id 和 class的情况
        if (selector.indexof('.') != -1) { //selector是class的情况
            var dom = document.getelementsbyclassname(selector.slice(1));
        } else if (selector.indexof("#") != -1) { //selector是id的情况
            var dom = document.getelementbyid(selector.slice(1));
        }

 

        if (dom.length === undefined) { //selector是id,返回的是一个对象,对象没有length属性
            this[0] = dom;
            this.length++;
        } else { //selector是class,返回的是一个类数组
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i];
                this.length++;
            }
        }
    };

 

    //为jquery的原型添加css属性,所有实例可以使用该属性
    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; //链式调用的精髓
    };

 

    //上面的jquery构造函数是new 一个jquery.prototype.init对象,
    //jquery.prototype.init对象上没有jquery.prototype上的css()方法
    //所以添加下面一句,让jquery.prototype.init对象可以调用jquery.prototype上的css()方法
    jquery.prototype.init.prototype = jquery.prototype;

 

    //让外部可以通过$()或者jquery()调用
    window.$ = window.jquery = jquery;
}());
```
上面是markdown格式的笔记
 
 
实现一个简单的jquery库 可以选择id和class
(function () {
    //创建一个jquery构造函数
    function jquery(selector) {
        return new jquery.prototype.init(selector);
    }
    //为jquery的原型添加init属性,所有实例可以使用该属性
    jquery.prototype.init = function (selector) {
        this.length = 0; //为this添加length属性,并且赋值为0
        //选出 dom 并且包装成jquery对象返回
        //只判断selector是id 和 class的情况
        if (selector.indexof('.') != -1) { //selector是class的情况
            var dom = document.getelementsbyclassname(selector.slice(1));
        } else if (selector.indexof("#") != -1) { //selector是id的情况
            var dom = document.getelementbyid(selector.slice(1));
        }

        if (dom.length === undefined) { //selector是id,返回的是一个对象,对象没有length属性
            this[0] = dom;
            this.length++;
        } else { //selector是class,返回的是一个类数组
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i];
                this.length++;
            }
        }
    };

    //为jquery的原型添加css属性,所有实例可以使用该属性
    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; //链式调用的精髓
    };

    //上面的jquery构造函数是new 一个jquery.prototype.init对象,
    //jquery.prototype.init对象上没有jquery.prototype上的css()方法
    //所以添加下面一句,让jquery.prototype.init对象可以调用jquery.prototype上的css()方法
    jquery.prototype.init.prototype = jquery.prototype;

    //让外部可以通过$()或者jquery()调用
    window.$ = window.jquery = jquery;
}());

调用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>

效果展示:

 转自:https://www.cnblogs.com/lanshanxiao/p/12852478.html

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com