牛客的前端基础编程
前端基础学复习
汪汪汪！加油！
文档类型声明
作用：告诉浏览器按什么标准来解析页面
html5 的声明，不区分大小写，结束标签可省但不推荐，单标签的/可省但不推荐html 4.01 有3个版本 严格 传统（过渡） 框架
xhtml 严格的html 区分大小写结束标签不能省略
若无文档类型声明，浏览器按照怪异模式（混杂模式）解析页面，就是按照自己的标准解析页面
有文档类型声明的页面，浏览器按标准模式解析页面，就是按照当前标准解析页面
DTD文档是指有文档类型声明的文档
注意！文档类型声明不是标签
基本结构
head：
-
head标签里的属性
lang属性，对页面中的主要语言进行声明，对搜索引擎和浏览器更友好。en英文 zh-CN中文 -
head标签里包含的标签
meta, title, link, style, script…- 一个网页只有一个title
- meta用来描述一个html网页文档
charset属性描述页面主要用的语言
中文常用utf-8,国外常用gbk
name和content属性
name:keywords，description或author
content就有不同对应,对搜索引擎更友好
body:页面显示的内容
图片
路径
绝对路径：
1.网址
2.盘符
html去找图片
相对路径：
1.平级： 直接写
2.下一级：/ 先写平级再写下一级
3.上一级：…/ 上两级：…/…/
属性
alt 图片不能正常显示给的提示
title 鼠标悬停在图片上给的提示
还有出br，其他标签都有的属性：
width
height
注意若宽高只设一个，就等比例缩放
html默认单位px
块级元素和行内元素
区别：
1.块级元素独占一行，行内元素在同一行显示
2.块级默认宽度为100%，%相对于父元素来说
行内元素默认宽度由内容决定
块级：h1-h6,hr,p，ul，li
行内：img，文本格式化标签，input
超链接
作用：跳转
属性：
href 路径
href="#" 空链接 效果是返回页面顶部
target:
_blank 打开新窗口
_self 默认值：原窗口打开
name: 锚点名 可以用于同一页面跳转(只能a有)
1.点击a跳转到a
a 跳转到 href="#另一个a的name"
a name
2.点击a跳转到块级元素
块级 id
a 跳转到 href="#块级a的id"
图片之间的跳转
a href=“要跳转的图片路径”
img
a
文本格式化标签
浏览器默认字体为16px
b 加粗
i 倾斜
u 下划线 H5淘汰了
del和s 删除线
em和strong 强调 em是斜体 strong是加粗
sup上标
sub下标
small小号字体
big 大号字体 H5已经淘汰
注释
1.注释之间不能相互嵌套
列表
无序列表
ul li ul
内容写在li里
li里可以写a或者img
ul的type属性全部都用，li的type属性写是什么就是什么
有默认的disc黑色实心圆
circle空心圆
square黑色实心矩形
none不显示
li里还可以嵌套一个ul和li的组合
嵌套展示级别如上，直到黑色实心矩形就一直
有序列表
ol li ol
type有 默认值1，或者 a A i II
对应有个start属性，就是起始的序号
还有一个reversed(=“reversed”)可能有负的
也可以相互嵌套，有序和无序也可以相互嵌套
自定义列表
dl 嵌套 dt和dd 平级
dt 主题 dt描述 一个dl里可以有多个dt dd
一般可以用 图片dt+文字内容dd
表格
表格结构
table
tr定义行
td定义单元格（列)
th特殊单元格和td类似，但是内容默认居中加粗
caption 表格的标题
table属性
border 边框 （作用于最外边的）单位像素
align 给table是作用于table
width height
bgcolor
backgroud 放背景图片
背景颜色和背景图片同时都有，图片的优先级高
gif支持图片透明
cellpadding 单元格内边距（内容到单元格边框）
cellspacing 单元格之间的距离 值为0时变成一条线
tr属性
height
内容默认水平居左
align
bgcolor
background
valign 默认middle 垂直
td属性
height width
align valign bgcolor background
rowspan 跨行
colspan 跨列
表单
form
form的作用:可以把用户输入的数据提交到服务器，使得页面具有交互性。
表单组成：表单标签，表单域，表单按钮
表单标签：form
表单域：用来收集用户输入内容的每一项。（input)
表单按钮：用来确认提交表单信息到服务器的按钮
form之间不能相互嵌套
但是页面里有多个form表单，name区别不同表单
action=“提交到的地址”
method 提交方式，get,pos 默认get
get和pos的区别
1.安全性：get的提交方式不安全，数据会在地址栏中显示，post比较安全。
2.数据体量：get只能提交少量数据（不能大于2kb)，post可以提交大量数据。
表单域里的input
input是行内元素
type=“text ”单行文本框 如用户名，邮箱，手机号等
name=“ ”小驼峰命名法 首字母小写，后面每个单词首字母大写
value=“ ” 当前值，默认值
其他：
type:
password 密码
radio 单选按钮 (注意:同一类选项都要有name属性)
checkbox 复选框,记住常用
submit 提交按钮 默认value是提交，可以改value成登录
reset 重置 默认value是重置，可以通过修改value
button 普通按钮 没有任何功能的按钮
按钮标签button,行内元素 button 默认是由提交功能的按钮
若要改成重置功能，需要把它的type=“reset”
没有任何功能的按钮 type=“button”
select 下拉列表 （还只是框）
选项：option
textarea 多行文本框
通过cols rows属性设置行列数量
右下角有一些斜线可以拖动，默认情况下只有此元素可拖动
可以用label标签，利用其for属性设置和表单元素的id一致绑定联动
label提升用户体验度，无任何样式
点击label之间内容，相关标签会被选中
input:
type=file 上传文件
默认的form的编码格式不支持上传，改成enctype="multipart/form-data"二进制
type=hidden 隐藏域，不是给用户看的，但是携带的信息可以提交
type=image 图片提交按钮
密码设置默认值，复选默认状态已选
<form>
<!-- 补全代码 -->
<input type="password" value="nowcoder">
<input type="checkbox" checked="true">
</form>
范本：
<form>
<!-- 补全代码 -->
<input type="password" value="nowcoder">
<input type="checkbox" checked>
</form>
checked 可以直接写
学到：检验某个标签某个属性的值
function(){ return document.getElementsByTagName('input')[0].type === 'password' &&document.getElementsByTagName('input')[0].value === 'nowcoder'}
表格
表格设置标题，设置行列
请写出具有表格标题为"nowcoder"的2行3列表格结构。
<table>
<!-- 补全代码 -->
<caption>nowcoder</caption>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
检验函数：
function(){ return document.getElementsByTagName('table')[0].caption.innerText === 'nowcoder'}
function(){ return document.getElementsByTagName('tr').length === 2}
function(){ return document.getElementsByTagName('td').length === 6}
图片
属性
请写出具有标题属性和代替文本属性的图片标签。
<img src="图片地址" alt="替代文本" title="标题"/>
学到：用js函数检验是否含有某属性
function(){ return document.getElementsByTagName('img')[0].hasAttribute('title')}
让图片居中
无法直接对img用align定义水平对齐位置，可以用一个p把它包起来，p里用align="center"让它居中
链接
请写出可以在新窗口打开文档的a标签。
<a href="地址" target="_blank">lianjie</a>
检验函数：
function(){return document.getElementsByTagName('a')[0].target === '_blank'}
列表
请写出列表项为"nowcoder"且列表项内容也为"nowcoder"的自定义列表。
<dl>
<!-- 补全代码 -->
<dt>nowcoder</dt>
<dd>nowcoder</dd>
</dl>
检验函数
function(){ return document.getElementsByTagName('dl')[0].contains(document.getElementsByTagName('dt')[0]) && document.getElementsByTagName('dl')[0].contains(document.getElementsByTagName('dd')[0])}
function() { return document.getElementsByTagName('dt')[0].innerText === 'nowcoder'}
function() { return document.getElementsByTagName('dd')[0].innerText === 'nowcoder'}
语义化标签
请使用语义化标签创建头部标签且包含导航标签。
注意：只需在html模块填写标签结构，有且仅有一个头部标签和一个导航标签。
<header>
<nav>
</nav>
</header>
媒体标签
音频媒体标签
请写出具有控件功能的音频媒体标签。
<audio controls> </audio>
视频媒体标签
请写出具有当视频的媒体数据加载期间发生错误时执行某个方法事件的视频媒体标签。
<video onerror="function()" controls>
<source src="">
</video>
主要是οnerrοr=" funciton()"
留用
CSS选择器
普通的类、id、element选择器
请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，“绿色"设置为"rgb(0, 128,0)”，“黑色"设置为"rgb(0, 0, 0)”，且字体大小都为20px。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
body{
font-size:20px;
}
#black{
color:rgb(0, 0, 0);
}
.green{
color:rgb(0, 128, 0);
}
div{
color:rgb(255, 0, 0);
}
</style>
</head>
<body>
<div>红色</div>
<div class='green'>绿色</div>
<div id='black'>黑色</div>
</body>
</html>
我还想知道第一个div怎么表达。
div:first-child 匹配作为任何元素的第一个子元素的div
div{
font-size:20px
}
div:first-child{
color:rgb(255, 0, 0)
}
.green{
color:rgb(0, 128, 0)
}
#black{
color:rgb(0, 0, 0)
}
伪类选择器
请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。
这里我采用的办法是将这两个li设置为同一个class=“color”
再用选择器对color类定义背景颜色。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
.color{
background-color:rgb(255, 0, 0);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li class="color">2</li>
<li>3</li>
<li class="color">4</li>
</ul>
</body>
</html>
另一种办法：
知识点： nth-child(n)
在css中可以通过伪类选择器:nth-child(n)匹配属于其父元素的第n个子元素，不论元素类型，n可以是数字、关键词、或公式。
关键词odd和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
li:nth-child(even) {
background-color: rgb(255, 0, 0);
}
等同于：
li:nth-child(2) {
background-color: rgb(255, 0, 0);
}
li:nth-child(4) {
background-color: rgb(255, 0, 0);
}
伪元素选择器
请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。
重点
伪元素的content，没有content 一切设置都无用。题目规定了宽高，为了使宽高设置有效又必须显式定义该伪元素为块级元素，也就是语句 display:block
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div:after{
width:20px;
height:20px;
content:"happy";
background-color:rgb(255, 0, 0);
display:block;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
按要求写画内容
请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：
圆角属性仅设置一个值
圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div{
width:100px;
height:100px;
border-radius:50px;
border: 1px solid black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意！
必须给div设置宽高，否则它就是在默认的一行里画圆
盒子模型
请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
.box{
width:100px;
height:100px;
padding:20px;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
浮动和清除浮动
请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动。
重点
要清除wrap的内部浮动带来的影响,可以把wrap设置成BFC
BFC学习参考
清除wrap的浮动可以设置器成为BFC
float不设置成none;
position设置成absolute或者fixed;
overflow不设置成visible;
display设置成inline-block触发BFC的条件
·body根元素
·设置浮动，不包括none
·设置定位，absolute或者fixed
·行内块显示模式，inline-block
·设置overflow，即hidden，auto，scroll
·表格单元格，table-cell
·弹性布局，flex
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap {
/*补全代码*/
display:inline-block;
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
还有一种写法:
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap {
/*补全代码*/
overflow:hidden;
/*display:inline-block;*/
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
给wrap来个float:left也可以通过。
定位
固定定位
请将html模块类为"box"的div元素固定在视口的左上角。
position: fixed，生成固定定位的元素相对于浏览器窗口进行定位。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
width: 100px;
height: 100px;
/*补全代码*/
position:fixed;
left:0;
top:0;
background-color:yellow;
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
效果图：
绝对定位
absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。
请将html模块类为"btn"的div元素中心定位在类为"wrap"的父级div元素右上顶点处。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap {
width: 100px;
height: 100px;
border: solid 1px black;
/*补全代码*/
position: relative;
}
.btn {
width: 20px;
height: 20px;
text-align: center;
background-color: red;
/*补全代码*/
position:absolute;
right:-10px;
top:-10px;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='btn'>X</div>
</div>
</body>
</html>
效果：
综合
描述
请补全JavaScript代码，实现一个盒子的关闭按钮功能。
要求：
- 使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
- 使类为"btn"的div元素中内容"X"垂直水平居中
- 点击"X"按钮可以使类为"box"的div元素隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: solid 1px black;
/*补全代码*/
position:relative;
}
.btn{
width: 20px;
height: 20px;
background-color: red;
/*补全代码*/
position:absolute;
right:-10px;
top:-10px;
}
</style>
</head>
<body>
<div class='box'>
<div class='btn'>X</div>
</div>
<script type="text/javascript">
var btn = document.querySelector('.btn');
var box = document.querySelector('.box');
btn.onclick = function(){
// 补全代码
box.style.display='none'
}
</script>
</body>
</html>
要素
1.外面用position:relative,里面用position:absolute
再把里面的right,top设置为里面宽度、高度的负一半
就可以把里面的中心放到外面的右上顶点了
2.用line-height等于盒子高度实现内容垂直居中
用text-align:center实现内容水平居中
3.btn点击onclick的时候再把box的display变成none
内容排版
行内元素垂直水平居中
水平居中 - text-align: center
垂直居中 - line-height: 盒子高度
单位
em
请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。
.box {
/*补全代码*/
height:4em;
width:4em;
}
所有浏览器默认字体大小为16px,在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间。1em=1倍的字体大小
rem
请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。
div {
/*补全代码*/
height:4rem;
width:4rem;
}
rem是相对于HTML标签字体大小的单位
默认根字体1rem=16px
数据类型
基本数据类型检测
typeof(value)返回的是字符串
复杂数据类型检测
请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例。
function _instanceof(left,right) {
// 补全代码
return left instanceof right;
}
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
使用规则：object instanceof constructor
要求前面是个对象，后面是一个构造函数。而且返回的是布尔型的，不是true就是false。
function _instanceof(left,right) {
// 补全代码
let flag = false
while (left.__proto__) {
if (left.__proto__.constructor == right) {
flag = true
break
}
left = left.__proto__
}
return flag
}
数据类型转换
请补全JavaScript函数，要求以字符串的形式返回两个数字参数的拼接结果。
示例：
- _splice(223,233) -> “223233”
- _splice(-223,-233) -> “-223-233”
function _splice(left,right) {
// 补全代码
var a=left.toString();
var b=right.toString();
return a+b;
}
或者：
利用String()方法把数据的类型转成字符串, 最后使用字符串的concat()方法将两个新字符串串联起来
function _splice(left,right) {
// 补全代码
let s1 = String(left);
let s2 = String(right);
return s1.concat(s2)
}
返回数据类型
请补全JavaScript函数，要求返回数字参数的阶乘。
注意：参数为大于等于0的整数。
function _factorial(number) {
// 补全代码
if(number==0||number==1) return 1;
else{
for(let i=number-1;0<i;i--) number=number*i;
return number;
}
}
注意返回类型和number同
递归
function _factorial(number) {
// 补全代码
if(number<=1){
return 1;
}
return _factorial(number-1)*number;
}
绝对值
Math.abs(number)
function _abs(number) {
// 补全代码
//JS Math对象方法 abs() 求绝对值
return Math.abs(number);
}
原始
function _abs(number) {
// 补全代码
if(number<0){
return -number;
}else if(number==0){
return 0;
}else{
return number;
}
}
幂运算
Math.power()
function _pow(number,power) {
// 补全代码
return Math.pow(number,power);
}
排序
function _sort(array) {
// 补全代码
if(array instanceof Array) return array.sort((left,right) => right - left);
}
转大写字符
function _touppercase(string) {
// 补全代码
return string.toUpperCase();
}
对象属性键名
function _keys(object) {
// 补全代码
return Object.keys(object);
}
将基本类型参数转换为对象形式返回
要求将数字参数转换为对象的形式返回
function _numbertoobject(number) {
// 补全代码
return {number};
}
要求将字符串参数转换为对象的形式返回
function _stringtoobject(string) {
// 补全代码
return {string};
}
数字取整
要求返回数字参数的整数部分。
Math.floor()向下取整
Math.around()四舍五入
function _int(value) {
// 补全代码
return Math.floor(value);
}
parseInt(value)
function _int(value) {
// 补全代码
return parseInt(value);
}
整数反转
要求将整数参数反转之后输出。
示例：
- _reverse(0) -> 0
- _reverse(233) -> 332
- _reverse(-223) -> -322
function _reverse(number) {
// 补全代码
var reverStr=(number+'').split("").reverse().join("");
return Number(reverStr);
}
字符串
去除字符串两端的空格
function _trim(string) {
// 补全代码
return string.trim();
}
搜索数字
以boolean的形式返回字符串参数中是否包含数字
function _search(string) {
// 补全代码
return /\d/g.test(string);
}
//等效于：
function _search(string) {
// 补全代码
return /[0-9]+/.test(string)
}
function _search(string) {
// 补全代码
const reg = /\d/
return string.search(reg)?true:false;
}
function _search(string) {
// 补全代码
for(var i=0;i<10;i++){
if(string.indexOf(i)!=-1){
return true
}
}
return false
}
搜索字符串
请补全JavaScript函数，要求以boolean的形式返回字符串首参中是否包含第二个参数。
function _search(string,value) {
// 补全代码
const reg=new RegExp(value,"g");
return reg.test(string);
}
function _search(string,value) {
// 补全代码
return RegExp(value).test(string)
}
//indexOf() 返回某个指定字符串值在字符串中首次出现的位置
function _search(string,value) {
// 补全代码
return string.indexOf(value) > 0? true: false;
}
function _search(string,value) {
// 补全代码
return string.indexOf(value)!=-1
}
function _search(string,value) {
// 补全代码
return string.search(value) >= 0;
}
返回参数伪数组对象
请补全JavaScript函数，要求返回它的参数伪数组对象。
function getArguments (a,b,c) {
// 补充代码
return [...arguments];
}
时期类型date
输出日期
请补全JavaScript函数，要求以字符串的形式输出时间戳参数所对应的"年-月-日"。
示例：
- _date(1631159776311) -> ‘2021-9-9’
function _date(number) {
// 补全代码
var date=new Date(number);
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
return year + '-' + month + '-' + day
}
this
this指向
请补全JavaScript函数，使obj对象中fn函数返回该对象中a属性和b属性的和。
var obj = {
a: 1,
b: 2,
fn: function(){
// 补全代码
return this.a+this.b;
}
}
var obj = {
a: 1,
b: 2,
fn: function(){
// 补全代码
return obj.a+obj.b
}
}
js操作元素
通过id修改内容
请补全JavaScript函数，根据id获取html模块中ul标签下第二个li元素并返回。
function getLI(id){
// 补全代码
return document.querySelector('#'+id)
}
function getLI(id){
// 补全代码
return document.getElementById(id); // id的标识是唯一的，根据标签就可确定是哪个li
}
function getLI(id){
// 补全代码
return document.querySelector(`#${id}`)
}
JS动态创建节点
请补全JavaScript函数，根据参数数组创建li元素。
要求：
- li元素的个数和数组的长度一样
- li元素的内容是数组中的每个元素
- 将创建的所有li元素插入到ul中
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul></ul>
</body>
<script type="text/javascript">
function createLi(array){
// 补全代码
var oUl = document.getElementsByTagName("ul")[0]
for(i=0;i<array.length;i++){
var oli=document.createElement("li")
oli.innerHTML = array[i];
oUl.appendChild(oli)
}
}
</script>
</html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul></ul>
</body>
<script type="text/javascript">
function createLi(array){
// 补全代码
let ulDome = document.querySelector('ul')
//返回匹配指定选择器的第一个元素
array.map((item,index)=>{
let li = document.createElement('li')
li.innerHTML = item
ulDome.appendChild(li)
})
}
</script>
</html>
通过classname修改元素内容
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<div class='box'></div>
</body>
<script type="text/javascript">
function modifyText(){
// 补全代码
var box=document.getElementsByClassName("box")[0];
box.innerHTML="欢迎来到牛客网";
}
</script>
</html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<div class='box'></div>
</body>
<script type="text/javascript">
function modifyText(){
// 补全代码
document.querySelector('.box').innerHTML = "欢迎来到牛客网"
}
</script>
</html>
阻止冒泡事件
请补全JavaScript函数，要求在点击li元素的时候不触发ul的事件。
注意：需要自行获取li元素。
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul>
<li>nowcoder</li>
</ul>
</body>
<script type="text/javascript">
// 补全代码
var li = document.getElementsByTagName("li")[0];
li.onclick=function(event){
event.cancelBubble=true;
}
</script>
</html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul>
<li>nowcoder</li>
</ul>
</body>
<script type="text/javascript">
// 补全代码
document.getElementsByTagName('li')[0].onclick=function(){
event.stopPropagation()
}
</script>
</html>
阻止默认事件
请补全JavaScript函数，要求在点击id为"checkbox"的复选框时不会取消勾选状态。 注意：需要自行获取input元素。
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<form>
<label>牛客会陪伴大家</label>
<input id="checkbox" type="checkbox" checked />
</form>
</body>
<script type="text/javascript">
// 补全代码
let input = document.getElementsByTagName("input")[0];
input.onclick = function(e){
e.preventDefault();
}
</script>
</html>
url地址
描述
请补全JavaScript函数，实现一个函数返回页面当前url。
function getUrlHref (){
// 补全代码
return location.href;
}
返回当前url地址
数组
移除数组中的元素
描述
移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组
示例1
输入：
[1, 2, 3, 4, 2], 2
复制
输出：
[1, 3, 4]
function remove(arr, item) {
//声明一个新数组保存结果
var a = [];
//循环遍历
for(var i=0; i < arr.length; i++){
//如果arr[i]不等于item，就加入数组a
if(arr[i] != item){
a.push(arr[i]);
}
}
return a;
}
function remove(arr,item){
var newarr = arr.slice(0);
for(var i=0;i<newarr.length;i++){
if(newarr[i] == item){
newarr.splice(i,1);//这里给删掉了
i--;//减后面又加才不变
}
}
return newarr;
}
学到
1.slice() 方法返回一个新的数组对象
一个参数时就是开始的下标，若为负数意思是倒数第几个
两个参数就是开始的下标，结束的下个下标
2.splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
一个参数是开始坐标
第二个参数是操作几个元素
链接
y.prototype.filter()
function remove(arr, item) {
return arr.filter(function (elem) {
return elem !== item;
});
}
数组反转
要求将参数数组反转之后返回
function _reverse(array) {
// 补全代码
return array.reverse();
}
数组字符串
请补全JavaScript函数，要求将参数数组转换为字符串输出。
示例：
- _join([1,‘2’,3]) -> “123” 注意：只需考虑一维数组且数据类型为原始数据类型。
function _join(array) {
// 补全代码
return array.toString().replace(/,/g,'');
}
function _join(array) {
// 补全代码
return array.join('');
}
数组最大值
function _max(array) {
// 补全代码
return Math.max.apply(null, array);
}
apply的一个巧妙的用处：可以将一个数组默认的转换为一个参数列表([param1,param2,param3] ）转换为 （param1,param2,param3)
function _max(array) {
// 补全代码
array.sort((a,b)=>{return b-a})
return array[0]
}
//等效于
function _max(array) {
// 补全代码
return array.sort((a,b)=>b-a)[0];
}
function _max(array) {
// 补全代码
return array.reduce((p,c) => p>c?p:c);
}
数组头部插入元素
要求将第二个参数插入第一个参数数组的头部，并且以数组的形式返回
array.unshift() 方法将新项添加到数组的开头，并返回新的长度
function _unshift(array,value) {
// 补全代码
array.unshift(value);
//unshift() 方法将新项添加到数组的开头，并返回新的长度。
return array;
}
Array数组的splice()方法，也是一个非常强大的方法，它的作用是:删除、插入、替换，splice()方法直接修改原数组
array.splice(starti,0,值1，值2…);
starti: 在哪个位置插入，原来starti位置的值向后顺移
0：表示删除0个元素
值1，值2：需要插入的值
function _unshift(array,value) {
// 补全代码
return array.splice(0,0,value);
}
数组尾部插入元素
push()函数返回的实际上是数组的长
function _push(array,value) {
// 补全代码
array.push(value);
return array;
}
等效于：
function _push(array,value) {
// 补全代码
array[array.length] = value
return array
}
数组元素位置查找
要求以数字的形式返回第一个参数数组中第二个参数所在的首个索引值。注意：如果数组中不存在目标值，则返回-1
function _indexof(array,value) {
// 补全代码
return array.indexOf(value);
//注意Of的O是大写的
}
findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供）。
findIndex() 方法对数组中存在的每个元素执行一次函数：
如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值） 否则返回 -1
function _indexof(array,value) {
// 补全代码
return array.findIndex((e)=>{
return e===value;
})
}