前端面试题整理—jQuery篇

时间：2022-12-18 23:39:18

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

相关文章