前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >面试题

面试题

作者头像
李才哥
发布2019-09-12 16:00:25
5570
发布2019-09-12 16:00:25
举报
文章被收录于专栏:李才哥
如何添加一个dom对象到body中
代码语言:javascript
复制
var dom=document.createElement("div");
document.body.appendChild(dom)

1.什么是jQuery多库共存

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

2.第一种解决方式

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

代码语言:javascript
复制
<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.第二种解决方式

代码语言:javascript
复制
var $1 = $.noConflict();//释放$的控制权,并且把$的能力给了$1

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

代码语言:javascript
复制
<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对象的引用作为第一个参数传递,所以就保证了函数的执行。

代码语言:javascript
复制
用箭头函数的形式改写下面的代码
    arr.forEach(function (v,i) {
      console.log(i)
      console.log(v)
    })
  arr.forEach((v,i)=>{
    console.log(i)
    console.log(v)
  })
代码语言:javascript
复制
 写出下面代码的输出值
    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

代码语言:javascript
复制
<!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 删除

本文分享自 李才哥 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档