jQuery 的实现原理和核心?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery 的实现原理和核心?

2019-11-22 17:00:39 884 1

jQuery 的实现原理和核心?

取消 提交回答
全部回答(1)
  • 茶什i
    2019-11-22 17:07:59

    jQuery 的实现原理

    var jQuery = function(selector, context) {
      return new jQuery.fn.init(selector, context);
    };
    

    1)jQuery 采用的是构造函数模式进行开发的,jQuery 是一个类

    2)上面说的常用的方法(CSS、属性、筛选、事件、动画、文档处理)都是定义在 jQuery.prototype 上的 ->只有 jQuery 的实例才能使用这些方法

    2、选择器/筛选

    1)我们的选择器其实就是创造 jQuery 类的一个实例 ->获取页面中元素用的 jQuery(); -> $()

    $()就是 jQuery 的选择器,就是创建 jQuery 这个类的一个实例

    2)执行的时候需要传递两个参数

    selector -> 选择器的类型 一般都是string类型
    context -> 获取的上下文  第二个参数一般不传,不传默认为document
    $("#div1")
    $(".box")
    $("#div1 span") -> $("span", div1)
    console.log($("#div1 span:first"))
    

    3)通过选择器获取的是一个 jQuery 类的实例->jQuery 对象

    console. log($( #div1"))
    
    [jQuery对象的私有的属性]
    
    $("#div1")[0] -> div1这个元素对象
    S(#div1").selector -> "#div1"
    S(#div1").context -> document
    ("#div1").length-)1 获取元素的个数
    
    [jQuery对象的公有的属性]
    jQuery.prototype
    

    4)我们获取的是 jQuery 对象(他是 jQuery 的实例)不是我们的原生 js 对象

    jQuery:$("#div1") JS:document.getElementById("div1") 原生JS的对象不能直接的使用jQuery的方法,同理,jQuery的对象也不能使用原生js的方法 $("#div1").className = "box"; no document.getElementById("div1").addClass();

    5)互相转化

    var $oDiv =$("#div1")
    var oDiv = document.getElementById("div1")
    Js->jQuery: $(oDiv).addClass()
    jQuery->Js: $oDiv[o]/ $oDiv.get(0)
    

    3、核心

    $(document).ready(function() {
      //HTML结构加载完成就执行这里的代码
    });
    $(function() {});
    
    each
    $("selector").each( function(){})遍历获取的这些元素 jQuery.prototype
    $.each(ary)遍历数组中的每一项 jQuery.each
    

    我们的 jQuery 不仅仅是一个类(在它的原型上定义了很多的方法,每一个 jQuery 的实例都可以使用这些方法),它还是一个普通的对象,在 jQuery 本身的属性中还增加了一系列的方法:Ajax、each、工具

    $.unique(ary)

    $.ajax()

    $.extend()->把 jQuery当做一个对象,给它扩展属性->完善类库
    
    $.fn.extend()->在 jQuery的原型上扩展属性和方法->编写 jQuery插件
    
    $.extend({
        a: function(){
    
        }
    })
    $.a()
    
    $.fn.extend({
        b: function(){
    
        }
    })
    $().b()
    
    0 0
相关问答

1

回答

jquery ajax重定向是自动完成的吗? 400 报错

2020-06-04 15:23:49 377浏览量 回答数 1

1

回答

jquery请求ajax效率太低如何改善? 400 报错

2020-06-04 14:18:53 438浏览量 回答数 1

1

回答

jquery ajax()请求图片,再转码为base64进行显示,不可以吗?求大神指教 400 请求

2020-05-29 15:18:40 583浏览量 回答数 1

1

回答

jquery ajax 跨域请求后,同步设置会无效,求设置同步的方法

2020-05-28 09:18:27 323浏览量 回答数 1

1

回答

有关jquery中ajax的缓存问题

2016-07-29 11:23:53 1713浏览量 回答数 1

1

回答

jquery ajax 参数长度是否有限制

2016-07-06 10:23:58 2234浏览量 回答数 1

1

回答

求一个ssh+json+jquery+ajax 登录功能实现的例子

2016-07-05 18:02:06 1771浏览量 回答数 1

1

回答

怎么使用ajax或jquery动态刷新下拉菜单里的值

2016-07-05 16:38:49 1715浏览量 回答数 1

1

回答

采用jquery 的ajax,提交程序出现两次,真奇怪

2016-07-05 12:00:58 2706浏览量 回答数 1

1

回答

在html5中jquery如何用ajax上传文件

2016-03-23 13:36:47 3039浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关课程
更多
相关电子书
更多
React Native项目实战优化之路
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
编程语言如何演化-以JS的private为例
立即下载