前端基本功(二)- JQuery之旅

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/simplebam/article/details/82223844

### 介绍 - jQuery1.11.1 帮助文档及源文件下载:链接
* jQuery就是javascript的一个库,把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率。
* Javascript是一门编程语言,我们用它来编写客户端浏览器脚本。
* jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发
这里写图片描述
jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到。

在我学些Jquery的时候,经常会被人告知直接上VUE+Element就好,至于这个争论,看这里:jQuery真的过时了! - 个人文章 - SegmentFault 思否

步骤-基于Jquery 1.11.1

  • 要把我们的jQuery源文件拿到我们的项目里面来
  • 在我们的页面中引用jQuery文件
    这里写图片描述
  • 用jQuery之前,先引入jQuery,然后,再去写我们的jQuery代码。
$(document).ready(function() {});// $可以使用JQuery
$(function() {});
  • $问题
    • Js命名归法:下划线、字母、$、数字
    • 但是不能以数字作为开头

实现原理

        //1.Js的window.onload事件是等到所有内容,以及我们的外部图片之类的文件加载完了之后,才回去执行
        //2. jQuery的入口函数 是在 html所有标签都加载之后,就回去执行
        var iQuery = function (dom) {
            var obj = {
                read: function (func) {
                    // console.log("我是ready");
                    // func();
                    // 判断一下 document.onload 有没有被赋值(或者说有没有这个事件)
                    // 1、有:接收一个旧的函数,然后呢,我就去调用一个新的函数,接着再调用旧的函数
                    // 2、没有,直接赋值个onload事件
                    if (typeof dom.onload === "function") {
                        var oldFunc = dom.onload;
                        dom.onload = function () {
                            //调用新函数
                            func();
                            //调用旧函数
                            oldFunc();
                        }
                    } else {
                        dom.onload = func;
                    }
                }
            };
            return obj;
        };

        iQuery(window).read(function () {
            alert("第一次调用");
        });

        iQuery(window).read(function () {
            alert("第2次调用");
        })

JS创建对象

       //推荐使用
        var obj={
            ready:function () {

            }
        };

        //存在效率问题,因为要new对象,会涉及到原型查找的问题
        var  obj=new Object();// var obj={}
        obj.ready=function () {

        };

        var obj=Object.create();

详细介绍

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

猜你喜欢

转载自blog.csdn.net/simplebam/article/details/82223844