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

前端面试题整理—jQuery篇的更多相关文章

  1. 前端面试题整理—JavaScript篇(一)

    1.JS的基本数据类型和引用数据类型有哪些,两者区别 基本数据类型->string.number.Boolean.null.undefined.symbol 引用数据类型->array.o ...

  2. 前端面试题整理—ajax篇

    1.什么是Ajax和JSON,它们的优缺点 Ajax是全称是asynchronous JavaScript andXML,即异步JavaScript和xml,用于在Web页面中实现异步数据交互,实现页 ...

  3. 前端面试题整理—Webpack篇

    1.什么是webpack,与grunt和gulp有啥不同 webpack是一个模块打包工具,在webpack里面一切皆模块 通过loader转换文件,通过plugin注入钩子,最后输出有多个模块组合成 ...

  4. 前端面试题整理—React篇

    1.说一下React React是Facebook 开发的前端JavaScript库 V层:react并不是完整的MVC框架,而是MVC中的C层 虚拟DOM:react引入虚拟DOM,每当数据变化通过 ...

  5. 前端面试题整理—Vue篇

     1.对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器 vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统 vue是一款MVVM框架,基于双向绑定数据,当数据发生 ...

  6. 前端面试题整理—JavaScript篇(二)

    1.使用js实现一个可持续的动画 2.实现一个可以自由拖动的悬浮框 3.实现一个倒计时效果 4.使用js仿写一个原生下拉列表框 5.创建10个<a>标签,点击的时候弹出对应的序号 6.实现 ...

  7. 前端面试题整理—HTTP篇

    1.常见的HTTP方法有哪些? GET: 用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器 POST:用于传输信息给服务器,主要功能与GET方法类似,但一般推荐使用PO ...

  8. 前端面试题整理—Node篇

    1.node有哪些特征,与其他服务器端对比 特征:单线程.事件驱动.非阻塞I/O node 无法直接渲染静态页面,提供静态服务 node 没有根目录的概念 node 必须通过路由程序指定文件才能渲染文 ...

  9. 前端面试题整理—ES6篇

    1.es5和es6的区别,说一下你所知道的es6 ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化 ECMAScript6,即ES6,是ECMAScript ...

随机推荐

  1. Java 集合系列(一)

    Java集合系列文章将以思维导图为主要形式来展示知识点,让零碎的知识形成体系. 这篇文章主要介绍的是[Java 集合的基本知识],即Java 集合简介. 毕业出来一直使用 PHP 进行开发,对于大学所 ...

  2. Git与SVN交叉使用

    将本地git项目添加到远程svn中 git svn [svnprojpath] svnprojpath为原创svn项目路径 -- 文件夹路径,你要放到哪个文件夹 官方文档中带有-s参数,但我这边加了会 ...

  3. Python操作db2

    官方文档:https://www.ibm.com/support/knowledgecenter/en/SSEPGG_9.5.0/com.ibm.db2.luw.apdv.python.doc/doc ...

  4. PSQLException: FATAL: no pg_hba.conf entry for host "127.0.0.1", user "ambari", database "ambari", SSL off

    On your Postgres server, you will need to update your pg_hba.conf file to allow access for the ambar ...

  5. Jenkins之Job建立-运行本地脚本

    新建一个自由风格的项目,运行本地脚本 1.点击菜单栏中的“新任务” 2.进入该页面后输入一个项目名称,然后选择“构建一个自由风格的软件项目”,滑动到最底端,点击ok(在左下角) 3.进入下图页面后 “ ...

  6. ElasticSearch(九):elasticsearch-head插件安装

    安装node 安装elasticsearch-head需要node.js的支持. 下载最新的node.js,下载地址:https://nodejs.org/en/download/ 将下载后的安装包放 ...

  7. 使用Jasypt对SpringBoot配置文件加密(转)

    文章转自   https://www.jianshu.com/p/323ec96c46d2 引入jasypt <dependency> <groupId>com.github. ...

  8. 洛谷 P1091 合唱队形

    \[传送门在这里呀\] 题目描述 \(N\)位同学站成一排,音乐老师要请其中的\((N-K)\)位同学出列,使得剩下的\(K\)位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次 ...

  9. 【原创】微服务为什么一定要用docker

    引言 早在2013年的时候,docker就已经发行,然而那会还是很少人了解docker.一直到2014年,Martin Fowler提出了微服务的概念,两个不相干的技术终于走在了一起,创造了今天的辉煌 ...

  10. aelf帮助C#工程师10分钟零门槛搭建DAPP&私有链开发环境

    aelf是一个可扩展的去中心化云计算区块链平台,支持高性能合约并行执行.原生多链数据交互.存储使用高性能分布式数据库. aelf整个系统可以在windows.osx及linux运行,团队在osx环境下 ...