面试题

李才哥

发布于 2019-09-12 16:00:25

5570

发布于 2019-09-12 16:00:25

文章被收录于专栏：李才哥

如何添加一个dom对象到body中

var dom=document.createElement("div");
document.body.appendChild(dom)

1.什么是jQuery多库共存

jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权

2.第一种解决方式

在jQuery中，$符号可以用jQuery代替，但是这种方式比较麻烦

<body>
<input type="button" value="按钮" id="btn">
<script src="jquery-1.12.4.js"></script>
<script>
    jQuery(function () {
        jQuery("#btn").click(function () {
            console.log("按钮被点击了")
        });
    });
</script>
</body>

3.第二种解决方式

var $1 = $.noConflict();//释放$的控制权,并且把$的能力给了$1

用这种方式$符号就会失效

<body>
<input type="button" value="按钮" id="btn">
<script src="jquery-1.12.4.js"></script>
<script>
    var $1 = $.noConflict();
    $1(function () {
        $1("#btn").click(function () {
            console.log("按钮被点击了")
        });
    });
</script>
</body>

————————————————

jQuery团队为用户提供了贴心的方法让jQuery能与其他js库(如Prototype)，实现起来很简单。

其实，多库共存就是“$ ”符号的冲突。

方法一：

利用jQuery的实用函数$.noConflict();这个函数归还$的名称控制权给另一个库，因此可以在页面上使用其他库。

这时，我们可以用"jQuery "这个名称调用jQuery的功能。

方法二：

(function($){/*代码块*/})(jQuery)

这个表单是看上去会让人觉得有点晕，其实很简单。

前半部分：(function($){/*代码块*/})

这是一个函数声明，并用括号括起来够成一个表达式，表达式的返回值就是这个函数的引用。

在这个函数中用$作为参数。所以在注释代码块用可以使用$符号。

后半部分：(jQuery)

在前半半部分返回函数引用后传递jQuery对象参数。

其实，可以把(function($){/*代码块*/})(jQuery) 拆分成：

方法三：

jQuery(function($){/*代码块*/})

通过传递一个函数作为jQuery的参数，因此把这个函数声明为就绪函数。

那它究竟是怎么工作的呢？

我们声明$为就绪函数的参数，因为jQuery总是吧jQuery对象的引用作为第一个参数传递，所以就保证了函数的执行。

用箭头函数的形式改写下面的代码
    arr.forEach(function (v,i) {
      console.log(i)
      console.log(v)
    })
  arr.forEach((v,i)=>{
    console.log(i)
    console.log(v)
  })

 写出下面代码的输出值
    Promise.resolve(1)
    .then((res)=>{
      console.log(res)//1
      return 2
    })
    .catch((err)=>{
      return 3
    })
    .then((res)=>{
      console.log(res)//2
    })

面试题目1：使用leaflet在页面上绘制上海市范围。

1、获取上海市范围坐标(多边形)；

2、（可选）坐标转换：从百度坐标转换到WGS84坐标；

3、新建页面，leaflet绘制上海地图

4、（可选）使用VUE-Leaflet，绘制上海地图。

备注：

1、NodesJS安装路径： D:\nodejs

2、百度地图开放平台：http://lbsyun.baidu.com/

3、轻量级地图引擎： https://leafletjs.com/

面试题目2：爬取网页内容，下载网页图片

1、保存页面上部的日文名、英文名和详细情报中的NO、产地、区分、色、比重、吸水率、压缩强度、弯曲强度和使用部位属性；

2、下载保存该页面的第一张图片，以该页面URL最后一项的编号命名图片名称。

3、URL列表：

https://www.sekistone-search.com/stone/0721

https://www.sekistone-search.com/stone/2067B

https://www.sekistone-search.com/stone/2078

https://www.sekistone-search.com/stone/0160

https://www.sekistone-search.com/stone/2036B

https://www.sekistone-search.com/stone/0720

https://www.sekistone-search.com/stone/2055

https://www.sekistone-search.com/stone/0799

https://www.sekistone-search.com/stone/0130B

https://www.sekistone-search.com/stone/0736

https://www.sekistone-search.com/stone/2026D

https://www.sekistone-search.com/stone/2077

https://www.sekistone-search.com/stone/1218

https://www.sekistone-search.com/stone/0077A

https://www.sekistone-search.com/stone/0824A

https://www.sekistone-search.com/stone/0828A

https://www.sekistone-search.com/stone/0012X

https://www.sekistone-search.com/stone/0012

https://www.sekistone-search.com/stone/0828X

https://www.sekistone-search.com/stone/0059

https://www.sekistone-search.com/stone/0068

https://www.sekistone-search.com/stone/0735

https://www.sekistone-search.com/stone/2067

https://www.sekistone-search.com/stone/0156

https://www.sekistone-search.com/stone/0824

https://www.sekistone-search.com/stone/0730

https://www.sekistone-search.com/stone/0731

https://www.sekistone-search.com/stone/0148

https://www.sekistone-search.com/stone/2068

https://www.sekistone-search.com/stone/0716

https://www.sekistone-search.com/stone/1219

https://www.sekistone-search.com/stone/2070

https://www.sekistone-search.com/stone/0837

https://www.sekistone-search.com/stone/0807A

https://www.sekistone-search.com/stone/0003B

https://www.sekistone-search.com/stone/1001S

https://www.sekistone-search.com/stone/2072

https://www.sekistone-search.com/stone/2036

https://www.sekistone-search.com/stone/2036S

https://www.sekistone-search.com/stone/0839

https://www.sekistone-search.com/stone/0147

https://www.sekistone-search.com/stone/0140

https://www.sekistone-search.com/stone/0791

https://www.sekistone-search.com/stone/0717

https://www.sekistone-search.com/stone/0052

https://www.sekistone-search.com/stone/0018

https://www.sekistone-search.com/stone/0786

https://www.sekistone-search.com/stone/0616

https://www.sekistone-search.com/stone/2041

https://www.sekistone-search.com/stone/0902

https://www.sekistone-search.com/stone/2022L

https://www.sekistone-search.com/stone/0964

https://www.sekistone-search.com/stone/2043

https://www.sekistone-search.com/stone/2064

https://www.sekistone-search.com/stone/0103

https://www.sekistone-search.com/stone/0607

https://www.sekistone-search.com/stone/0636

https://www.sekistone-search.com/stone/0770X

https://www.sekistone-search.com/stone/0977

https://www.sekistone-search.com/stone/0954

https://www.sekistone-search.com/stone/0965D

https://www.sekistone-search.com/stone/0026

https://www.sekistone-search.com/stone/0202

https://www.sekistone-search.com/stone/0601

https://www.sekistone-search.com/stone/0045B

https://www.sekistone-search.com/stone/0130

https://www.sekistone-search.com/stone/0792

https://www.sekistone-search.com/stone/0950S

https://www.sekistone-search.com/stone/0020B

https://www.sekistone-search.com/stone/0774

https://www.sekistone-search.com/stone/0967

https://www.sekistone-search.com/stone/0620

https://www.sekistone-search.com/stone/2006

https://www.sekistone-search.com/stone/2053

https://www.sekistone-search.com/stone/0988

https://www.sekistone-search.com/stone/2071

https://www.sekistone-search.com/stone/0513

https://www.sekistone-search.com/stone/2029

https://www.sekistone-search.com/stone/0798

https://www.sekistone-search.com/stone/0159

https://www.sekistone-search.com/stone/0714X

https://www.sekistone-search.com/stone/2069

https://www.sekistone-search.com/stone/0991

https://www.sekistone-search.com/stone/0990

https://www.sekistone-search.com/stone/0622D

https://www.sekistone-search.com/stone/0622L

https://www.sekistone-search.com/stone/0793D

https://www.sekistone-search.com/stone/0793A

https://www.sekistone-search.com/stone/0733

https://www.sekistone-search.com/stone/0797

https://www.sekistone-search.com/stone/0982

https://www.sekistone-search.com/stone/2073

https://www.sekistone-search.com/stone/2062

https://www.sekistone-search.com/stone/0089

https://www.sekistone-search.com/stone/0734

https://www.sekistone-search.com/stone/0157

https://www.sekistone-search.com/stone/0014A

https://www.sekistone-search.com/stone/2045

https://www.sekistone-search.com/stone/2042

https://www.sekistone-search.com/stone/0714G

https://www.sekistone-search.com/stone/0718

https://www.sekistone-search.com/stone/0142

https://www.sekistone-search.com/stone/0949

https://www.sekistone-search.com/stone/0150

https://www.sekistone-search.com/stone/0421

https://www.sekistone-search.com/stone/0841

https://www.sekistone-search.com/stone/0842

https://www.sekistone-search.com/stone/2044

https://www.sekistone-search.com/stone/2028G

https://www.sekistone-search.com/stone/0033B

https://www.sekistone-search.com/stone/2065

https://www.sekistone-search.com/stone/2074

https://www.sekistone-search.com/stone/2061

https://www.sekistone-search.com/stone/2051

https://www.sekistone-search.com/stone/0719

https://www.sekistone-search.com/stone/1220

https://www.sekistone-search.com/stone/0427

https://www.sekistone-search.com/stone/6

https://www.sekistone-search.com/stone/0796

https://www.sekistone-search.com/stone/2075

https://www.sekistone-search.com/stone/0753

https://www.sekistone-search.com/stone/G193L

https://www.sekistone-search.com/stone/M310

https://www.sekistone-search.com/stone/G771

https://www.sekistone-search.com/stone/G761

https://www.sekistone-search.com/stone/G259Y

https://www.sekistone-search.com/stone/G785

https://www.sekistone-search.com/stone/G760

https://www.sekistone-search.com/stone/G783

https://www.sekistone-search.com/stone/G716

https://www.sekistone-search.com/stone/G725

https://www.sekistone-search.com/stone/G278

https://www.sekistone-search.com/stone/G770

https://www.sekistone-search.com/stone/G763

https://www.sekistone-search.com/stone/G284

https://www.sekistone-search.com/stone/G119

https://www.sekistone-search.com/stone/G066

https://www.sekistone-search.com/stone/G049D

https://www.sekistone-search.com/stone/G123

https://www.sekistone-search.com/stone/G803

https://www.sekistone-search.com/stone/G714

https://www.sekistone-search.com/stone/G796

https://www.sekistone-search.com/stone/G003

https://www.sekistone-search.com/stone/G261

https://www.sekistone-search.com/stone/G202

https://www.sekistone-search.com/stone/G202L

https://www.sekistone-search.com/stone/G765

https://www.sekistone-search.com/stone/G299

https://www.sekistone-search.com/stone/G032

https://www.sekistone-search.com/stone/G161

https://www.sekistone-search.com/stone/G210

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 75px;
            background-color: lightgray;
            border: 1px solid black;
        }
        div#div2{
        }
    </style>
</head>
<body>
<div>
    你好，这是一个div元素
</div>
<div id="div2">
    你好，这是一个div元素
</div>
<script>
  // 1、将如下json字符串转js对象，并获取name的值
  /*var json_str={
    'name':'tiger'
  }
  // let name=JSON.parse(JSON.stringify(json_str))
  let name= eval("("+JSON.stringify(json_str)+")")
  console.log(name.name)//tiger*/
  // 2、获取如下变量中的月和日
   /* var date_time='2019-01-02 16:08:58'
  let month=new Date(date_time).getMonth()+1
  console.log(month)
  let date=new Date(date_time).getDate()
  console.log(date)*/
  // 3、写出尽可能多的dom事件或js事件
  // 4、写出尽可能多的伪类和伪元素
/*css伪类
css伪类用于向某些选择器添加特殊的效果。
:link, :visited, :hover, :focus, :active, :first-child, :lang
css3新增的伪类：
:last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n),  :nth-last-of-type(n), :root, :empty, :target, :enabled, :disabled, :checked, :not(selector),
css伪元素
css伪元素用于向某些选择器设置特殊效果。
::first-letter, ::first-line, ::before, ::after
css3新增的伪元素
::selection
css伪类和伪元素的区别
为了避免大家混淆伪类和伪元素，css3中的标准规定伪类使用单冒号“:” ，伪元素使用双冒号“::”，但在此之前都使用的单冒号“:”，所以为了保证兼容伪元素两种使用方法都是可以的。
伪类可以叠加使用，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。
.box:first-child:hover { color: #000;}   //使用伪类
.box:first-letter { color: #000;}   //使用伪元素
.box:first-letter:hover { color: #000;}   //错误写法
伪类与类优先级相同，伪元素与标签优先级相同。顺便说一下优先级怎么判断，一般是 !important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。还有一个简单的计算方法，内联样式表的权值为 1000，ID 选择器的权值为 100，Class 类选择器的权值为 10，HTML 标签选择器的权值为 1，权值实际并不是按十进制计算的，用数字表示只是说明思想，我们可以把选择器中规则对应做加法，比较权值大小，权值越大优先级越高，如果权值相同前面的样式会被后面的覆盖。
*/
//  css动画使用哪个属性？css过度使用哪个属性
//   animation  transition
//  写出一种灰色rgb值
/*DarkGray 深灰色 #A9A9A9：RGB值分别为169,169,169；*/
//  写出尽可能多的vue的生命周期，并标注运行的时间
//  控制元素是否显示的vue属性是什么？
//  简述axios作用与优势
//  简述cookie和session区别
//  下面代码的打印结果。简述什么是变量的作用域，全局变量和局部变量有什么区别？
  /*var a=10;
  function test() {
    a=100;
    console.log('第一个',a);//100
    console.log('第2个',this.a);//100
    var a;
    console.log('第3个',a)//100
  }
  test()
  console.log('第4个',a)//100*/
//  5、第一次页面加载会触发哪几个钩子？
//  vue生命周期总共有几个阶段
//    DOM渲染在哪个周期中就已经完成
//    vue-router是什么？它有哪些组件？
//    vue的双向绑定的指令是什么？常用的业务场景是什么？
//    怎么定义vue-router的动态路由？怎么获得传过来的值？
//    v-show与v-if区别
//    路由的跳转方式有几种？
//    组件之间的常用的传值通信方式有哪些？
//    computed和watch的区别
//    vuex是什么？怎么使用?那种功能场景使用它
//    vue-router提供几种运行模式
//    vue全家桶指的是哪些？
//    filter过滤器作用是什么？使用场景有哪些？
//    使用vue如何获取dom元素？
//    vuex的store里有几个属性值？
//    vue组件中如何让css只在当前组件中起作用？
//    vue如何监控对象某个属性值的变化？
//    v-for指令中key值得作用？
//    vue的常用指令有哪些？说出至少4种以及它的用法？
//    JavaScript有几种基本数据类型？
//    如何判断数据类型？
//    如何添加一个dom对象到body中？
  /*var dom=document.createElement("div");
  document.body.appendChild(dom)*/
//    jquery中如何实现多库并存？
//    说出至少三个http协议状态码及含义？
//     ajax中get和post有什么区别？
//    null和undefined的区别
//    用箭头函数的形式改写下面的代码
    /*arr.forEach(function (v,i) {
      console.log(i)
      console.log(v)
    })
  arr.forEach((v,i)=>{
    console.log(i)
    console.log(v)
  })*/
//    改为;
//    '=='和'==='操作符有何不同？
//    写出下面代码的输出值
   /* Promise.resolve(1)
    .then((res)=>{
      console.log(res)//1
      return 2
    })
    .catch((err)=>{
      return 3
    })
    .then((res)=>{
      console.log(res)//2
    })*/
//    输出结果：
</script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-09-10，如有侵权请联系 cloudcommunity@tencent.com 删除

https