【面试】web前端经典面试题试题及答案-jQuery

最新推荐文章于 2021-08-03 08:56:27 发布

原创

最新推荐文章于 2021-08-03 08:56:27 发布 · 1.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery面试题 #前端最新面试题

本文深入探讨了jQuery库的基本原理，包括源码解析、原型方法的运用、选择器的使用技巧，以及DOM操作和事件处理的实践。同时，对比了jQuery与原生JavaScript的window.onload事件和jQuery的ready函数的区别，阐述了jQuery在现代Web开发中的作用。

jQuery源码

jquery的jq.eq(0)和jq[0]有什么区别？

待完善

jQuery源码

原型实际应用-jquery？

多个实例都可以共用一个方法时，说明这些方法（eg:css(), html()）都是来自于一个构造函数的原型中

var $p = $('p'); 
$p.css('color', 'red'); // css是原型方法
console.log($p.html()); // html是原型方法 // 如果有多个p元素，$p.html()默认是最后一个元素的html

<body>
<div>
  <p>段落1</p>
  <p>段落2</p>
</div>

<!--<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script>
  (function(window) {
    var jQuery = function(selector) {
      return new jQuery.fn.init(selector); // new了一个构造函数的实例
    };
    jQuery.fn = {
      css: function(key, value) {

      },
      html: function(value) {
        return '这是html';
      }
    };
    var init = jQuery.fn.init = function(selector) { // 构造函数
      var slice = Array.prototype.slice;
//      var dom = document.querySelectorAll(selector); // nodeList[p,p]:__proto__是nodeList
      var dom = slice.call(document.querySelectorAll(selector)); // [p, p]:__proto__是Array // selector转换成dom的list,然后转换成数组
      console.log(dom);
      var i, len = dom ? dom.length : 0;
      for (i = 0; i < len; i++) {
        this[i] = dom[i]; // 所有的元素都变成实例的属性
      }
      this.length = len;
      this.selector = selector || '';
    };
    init.prototype = jQuery.fn; // 构造函数的原型赋值成jQuery.fn，jQury.fn是一个js对象

    window.$ = jQuery;
  })(window);

  $p = $('p'); // 初始化实例
  console.log($p.html());

1、扩展原型
将getNodeName属性放在构造函数的原型中，不是直接给构造函数的原型赋值，而是通过$.fn赋值

$.fn.getNodeName = function() {
	return this[0].nodeName;  // this[0]可以得到上述的第一个p标签，this就是实例$p,init这个构造函数里创建了this[i];
}

（1)好处：
①只有$会暴露在window全局变量（只暴露一个变量，不然容易造成全局变量的污染）
②将插件扩展统一到$.fn.xxx这一个接口，方便使用。

最低0.47元/天解锁文章

【面试】web前端经典面试题试题及答案-jQuery

jquery的jq.eq(0)和jq[0]有什么区别？

jQuery源码

原型实际应用-jquery？