JQuery面试题总结

Posted 2021-04-08 刘啊么么哒

 
1.jQuery.ready(function(){}) 与 window.onload的区别?
    ready方法是等待DOM结构渲染完毕即执行   DOMContentLoaded
    ready  可以添加多个 按顺序执行
    window.onload 必须等待页面内所有的元素下载完毕才会执行

2. jQuery让出$占用的方法？强制使用$的方法？
    var j = jQuery.noConflict();//retrun jQuery
    var _$ = window.$;
    <!-- window.$ = _$; -->

    (function($){
        $("")
    })(jQuery);

3. $()括号内可以接受多少种类型的参数？分别代表的含义？
    $("span") 代表选择器
    $("<h1></h1>") 创建DOM元素 返回的jQuery对象  []
    $(document.querySelector("div")) //DOM对象
    $(jEl) //jQuery DOM
    $(function(){}) //函数   ===   $(document).ready(function(){})

4. jQuery中获取一个元素的宽度的几种方法及其区别？
    $(el).width()//实际宽高（样式设定）
    $(el).innerWidth()//包含padding
    $(el).outerWidth()//包含padding border
    $(el).outerWidth(true)//包含padding border margin

5. $.extend() 与 $.fn.extend() 区别与应用场景
    $.extend() 扩展jQuery对象本身 一般用于扩展一些通用工具方法
    $.extend({},obj1,obj2,obj3,....) 合并Obj1/obj2 并返回一个新对象
    $.fn.extend() 扩展jQuery原型对象  是开发插件的推荐使用方式

6. $(el).attr() 与 $(el).prop()的含义及使用场景?
    attr() 用于操作自定义属性
    prop() 用于操作DOM标准属性
    注：以上只是强行甩锅  prop建议操作 添加即为true的属性 checked selected multiple disabled

7. $(el).position() 与 $(el).offset()的含义及区别？
    position 获取的是元素到相对定位父元素的左和上的距离
    offset 获取的是元素到文档的左和上的距离

8. $(el).each() 与 $.each() 的区别？
    $(el).each 遍历选择器匹配到的元素
    $.each() 用于遍历普通的数组 对象

9. jQuery中有slideDown 与 slideUp 接口，分别用于向下滑动展开和向上滑动隐藏，请尝试模拟这种效果写出向右滑动展开和向左滑动隐藏

10. $.load()的作用？
    $.load() 载入其它文档

11. 请使用原生JS（DOM）模仿一个jQuery的选择器，例如：$("#div ul li a")此类选择器（需要考虑兼容性）

 
12. 请使用原生JS(DOM)模拟jQuery的添加事件方法，例如：.on(“click”,function()) .click(function) （考虑兼容性）
    $("div").css("a","b").on()
    function jQuery(){
        this.el = [];
    }
    jQuery.prototype.on = function(_event,callback){
        if(document.addEventListener){
            this.el.addEventListener(_event,callback)
        }else{
            this.el.attachEvent("on"+_event,callback);
        }
    }
    jQuery.prototype.click = function(callback){
        this.on("click",callback);
    }