js练习--习题

哆啦A梦的百宝箱口袋

已于 2022-09-05 08:38:39 修改

阅读量276

点赞数 1

文章标签： javascript jquery 开发语言

于 2022-09-01 11:42:48 首次发布

本文链接：https://blog.csdn.net/m0_67658927/article/details/126639421

版权

啥是盒模型？

Css布局的基石

含有margin、border、padding、contentde 元素为盒模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

语义化标签有哪些？

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

Css选择器有哪些，他们的优先级是什么样的？

0.全局选择器

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.子选择器（ul < li）

5.后代选择器（li a）

6.伪类选择（a:hover,li:nth-child）

Css中定位有哪些？分别有啥区别

1. 静态定位：static

static 是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响

2. 相对定位：relative

相对定位就是元素相对于自己默认的位置来进行位置上的调整，您可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。

3. 绝对定位：absolute

绝对定位就是元素相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。您同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。

4. 固定定位：fixed

固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。

5. 粘性定位：sticky

粘性定位与前面介绍的四种定位方式不太一下，它像是相对定位和固定定位的结合体，当滚动页面时它的效果与相对定位相同，当元素滚动到一定程度时它又会呈现出固定定位的效果。比如一些网页上的导航菜单，当页面加载完成时它在自己默认的位置，当我们向下滚动页面时它又会固定在页面的最顶端。

Div如何实现垂直居中？

1、使用绝对定位和负外边距进行居中；

2、利用伪元素和inline-block、vertical-align进行居中；

3、利用table布局进行居中；

4、使用固定定位和transform属性进行居中。

清除浮动的方式有几种，分别说说！

1.使用空标签清除浮动clear:both。

2.父级div定义overflow:hidden

3、父级div定义伪类:after和zoom(用于非IE浏览器)

4、父级div定义height

5、父级div定义overflow:auto

定义变量的方式有几种，分别有啥区别？

var ：全局变量，有变量提升，可以修改值

let ：局部变量，没有变量提升，有会计作用域，可以修改值

const：常量，变量值一直存在不能修改

箭头函数和普通函数的区别是什么？

普通函数：在普通函数中，this 的指向（执行上下文）是动态的，其值取决于函数是如何被调用的，可以使用call、apply、bind 、new来改变this指向

箭头函数：无论如何执行或在何处执行，箭头函数内部的 this 值始终等于外部函数的值，即箭头函数不会改变 this 的指向

请简要说明，什么是原型，什么是原型链？

原型：每个对象拥有一个原型对象就是---prototype

原型链：简单一句话概括就是__proto__

请说一下闭包和他的特点

闭包：函数内部可以调用函数内部的变量，这就是简单的闭包

好处： 1.缓存
                2.面向对象中的对象
                3.实现封装，防止变量跑到外层作用域中，发生命名冲突
                4.匿名自执行函数，匿名自执行函数可以减小内存消耗

5、可以长久储存变量

坏处： 1.内存消耗

                2.性能问题

请说说js的基本类型和引用类型

1.基本类型：undefined、null、string、number、boolean、symbo（ES6）

2.引用类型：Object、Function，Array、RegExp、Date、及单体内置对象(Global、Math)。（除了基本类型其余的都是object，就都是引用类型啦~）

数组方法有哪些？

concat()   连接两个或更多的数组，并返回结果。
includes()   判断一个数组是否包含一个指定的值。
isArray()   判断对象是否为数组。
join()   把数组的所有元素放入一个字符串。
pop()   删除数组的最后一个元素并返回删除的元素。
push()   向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 反转数组
shift()    删除第一元素并返回删除的元素，原数组会改变
slice(1,2)   数组截取参数1 开始位置参数2结束位置但不包含结束下标元素
sort   排序
splice(2,2,"Lemon","putao",'菠萝');
unshift("Lemon","Pineapple"); 向开头添加元素

every()   检测数值元素的每个元素是否都符合条件。只要有一个不符合就返回false 返回true/false
filter()   检测数值元素，并返回符合条件所有元素的数组。
find()   返回符合传入测试（函数）条件的数组元素。
findIndex()   返回符合传入测试（函数）条件的数组元素索引。
forEach()   数组每个元素都执行一次回调函数。
from()   通过给定的对象中创建一个数组。
map()   通过指定函数处理数组的每个元素，并返回处理后的数组。
reduce()   将数组元素计算为一个值（从左到右）。

字符串方法有哪些？

str.indexOf(str1)// 获取某个字符在当前字符串中第一次出现处的索引未找到返回-1
str.lastIndexOf(str1) // 获取某个字符串在当前字符串中最后一次出现处的索引没找到返回-1
str.replace(searchStr,replaceValue) // 替换
str.split (分割符)// 拆分字符串(得到的是一个数组)
str.substr(index,length)//通过和长度截取字符串
str.substring (index,index)// 通过2个下标截取字符串
str.toLowerCase ()// 转小写
str.toUpperCase ()// 转大写
str.includes(str) //检查是否包含指定字符串返回true false
str.repeat(num)//复制字符串指定次数
console.log(str.replaceAll('a','A'));//替换字符串
str.search("Runoob"); //返回下标
var n=str.slice(1,5); //返回截取的部分
startsWith() //查看字符串是否以指定的子字符串开头。
trim() //去除字符串两边的空白。

jQuery中的ajax 使用方法格式请写出来

$.ajax({

type:"GET",//请求方式

url:"",请求链接

dataType:"json",转换类型

data:{},//传递数据信息

success:function(){}，//请求成功后执行操作

})

什么是事件冒泡，怎么阻止事件冒泡？

冒泡：点击子级父级跟着触发，这就是冒泡

阻止冒泡：1.event.stopPropagation()

2.event.preventDefault()

3.return false ；

return false书写格式：$('.btn').click(function (even) { alert('按钮被点击了'); return false; })

Var a=NaN ,b =NaN 请问conse.log(a==b) 返回什么？

直接返回false

Typeof( null ) 返回什么？

直接返回Object

Ajax请求中的同步和异步怎么理解有啥区别？

同步：和其他代码一起执行

异步：让其他代码先执行

写一下冒泡排序

function bubbleSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len - 1; i++) {
  for (var j = 0; j < len - 1 - i; j++) {
  if (arr[j] > arr[j+1]) {   // 相邻元素两两对比
  var temp = arr[j+1];   // 元素交换
arr[j+1] = arr[j];
arr[j] = temp;
  }
  }
  }
  return arr;
}

数组arr =[1,2,3,3,5,2,6] 请定义方法实现数组去重，得到【1,2,3,5,6】

1、var arrs = [...new Set (arr)]

2、

unction unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}

3、

unction unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}

4、

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}

5、

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}