前端面试题整理—jQuery篇

1、为什么使用jquery，他有哪些好处？

　　1）轻量级、代码简洁

　　2）强大的选择器，出色的DOM操作封装

　　3）有可靠的事件处理机制

　　4）浏览器兼容性好

　　5）支持链式操作

　　6）支持丰富的插件

2、jquery有哪些选择器

　　基本选择器：id、标签、class选择器

　　层级选择器：$("form input")

　　伪类选择器：$("div:first")

　　表单选择器：$(":input")

3、$(document).ready()和window.onload有什么区别　　

　　window.onload方法是在网页中所有的元素完全加载到浏览器后才执行

　　$(document).ready() 可以在DOM载入就绪时候就对其进行操纵，并调用执行绑定的函数

4、jquery对象和DOM对象是如何转换的　　

　　jQuery对象是一个包含了dom对象的数组 可以通过jQuery对象[下标]获取dom对象

　　Dom对象放入$("")中转为jQuery对象

5、attr()与prop()的区别　

　　attr操作自定义属性

　　prop更适合操作表单元素

6、jQuery中使用过哪些插入节点的方法　　

　　append：向每个匹配的元素内部追加内容

　　appendTo：将所有匹配的元素追加到指定的元素中

　　after：在每个匹配元素之后插入内容

　　insertAfter：将所有配的元素插入到指定元素的后面

　　before：在每个匹配的元素之前插入内容

　　insertBefore：将所有匹配的元素插入到指定的元素的前面

7、说出jQuery中常见的几种函数以及他们的含义是什么　

　　get()取得所有匹配的DOM元素集合　　

　　append()向每个匹配的元素内部追加内容

　　find()搜索所有与指定表达式匹配的元素

　　bind()为每个元素的特定事件绑定事件处理函数.

　　empty()删除匹配的元素集合中所有的子节点

8、radio单选组的第二个元素为当前选中的值，该怎么去取

$('input[type=radio]')[1].checked=true

9、jquery中的选择器 和 css中的选择器有区别吗

　　jQuery选择器支持CSS里的选择器

　　jQuery选择器可用来添加样式和添加相应的行为

　　CSS 中的选择器是只能添加相应的样式

10、在jquery中你是如何去操作样式的

　　addClass() 来追加样式

　　removeClass() 来删除样式

　　toggle() 来切换样式

11、子元素选择器和后代选择器元素有什么区别　

　　子元素是找子节点下的所有元素

　　后代元素是找子节点或子节点的子节点的元素

12、Jq如何判断元素显示隐藏

        //第一种：使用CSS属性 
        var display = $('#id').css('display'); 
        if(display == 'none'){    
          alert("我是隐藏的！"); 
        }
        //第二种：jQuery判断元素是否显示 是否隐藏
        var node=$('#id');
        if(node.is(':hidden')){//如果node是隐藏的则显示node元素，否则隐藏
        　　node.show();　
        }else{
        　　node.hide();
        }        

13、Jq中get和eq有什么区别

　　get() :取得其中一个匹配的元素。num表示取得第几个匹配的元素，get多针对集合元素，返回的是DOM对象组成的数组

　　eq():获取第N个元素，下标都是从0开始，返回的是一个JQuery对象

14、用jquery实现一个拖拽

        $('#box').mousedown(function(ev){
            let disX = ev.pageX - $('#box').position().left;
            let disY = ev.pageY - this.offsetTop;
            $(document).mousemove(function(ev){
                $('#box').css({
                    left:ev.pageX - disX,
                    top:ev.pageY - disY
                });
            });
            $(document).mouseup(function(ev){
                $(document).off();
            });
        });

15、Jq中如何实现多库并存

　　Noconfict 多库共存就是“$ ”符号的冲突

　　方法1：利用jQuery的实用函数$.noConflict()

　　方法2：(function($){})(jQuery)

　　方法3：jQuery(function($){})

16、jQuery 中如何将数组转化为 JSON 字符串，然后再转化回来

      // 通过原生 JSON.stringify/JSON.parse 扩展 jQuery 实现
       $.array2json = function(array) {
          return JSON.stringify(array);
       }

       $.json2array = function(array) {
          // $.parseJSON(array); // 3.0 开始，已过时
          return JSON.parse(array);
       }

      // 调用
     var json = $.array2json(['a', 'b', 'c']);
     var array = $.json2array(json);

17、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝

       浅拷贝（只复制一份原始对象的引用）
        var newObject = $.extend({}, oldObject);
        深拷贝（对原始对象属性所引用的对象进行进行递归拷贝）
        var newObject = $.extend(true, {}, oldObject);

18、使用jquery实现一个可持续的动画

       $('button').on('click',function () {
          $('div').animate({left:1000},2000)
          .animate({top:300}, 2000)
          .animate({left:0,top:300},2000)
          .animate({left:0,top:50},2000,function () { 
           //触发事件
          //  $('button').trigger('click')
          $('button').click()
          })
         })

19、jquery如何绑定多个事件

$(target).on("click focus",fn)

20、针对 jQuery 的优化方法

　　尽量使用id选择器代替class选择器

　　总是从#id选择器来继承

　　尽量使用链式操作

　　使用时间委托 on 绑定事件

　　采用jQuery的内部函数data()来存储数据

　　使用最新版本的 jQuery