移动web学习

最新推荐文章于 2021-12-27 08:36:14 发布
最新推荐文章于 2021-12-27 08:36:14 发布
阅读量384 收藏
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/henucm/article/details/105572954
版权

文章目录


资料：https://pan.baidu.com/s/1dqaeDQNzP5FOqOTTQeKsbQ

移动web开发之流式布局

流式布局比较简单放两个案例自行了解


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 100%;
            max-width: 980px;
            min-width: 320px;
        }
        section div{
            float: left;
            width: 50%;
            height: 400px;
        }
        section div:nth-child(1){
            background-color: pink;
        }
        section div:nth-child(2){
            background-color: purple;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>
</html>

案例：京东网页

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>
<body>
    <!-- 顶部 -->
    <header class="app">
        <ul>
            <li><img src="images/close.png" alt=""></li>
            <li><img src="images/logo.png" alt=""></li>
            <li>打开京东APP，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon">
            </div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登录</div>
    </div>
    <!-- 主体内容图 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>
        <!-- 品牌日 -->
        <div class="brand">
            <div>
                <a href="">
                    <img src="upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="upload/pic22.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="upload/pic33.dpg" alt="">
                </a>
            </div>
        </div>
        <nav>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
        </nav>
        <!-- 新闻模块 -->
        <div class="news">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new2.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new3.dpg" alt="">
            </a>
        </div>
    </div>
</body>
</html>
index.css
body{
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
    font-family: -apple-system,Helvetica,sans-serif;
    background-color: #ccc;
    height: 2000px;
}
/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
* {
    -webkit-tap-highlight-color: transparent;
}

/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {
    -webkit-appearance: none;
}

/*禁用长按页面时的弹出菜单*/
img,
a {
    -webkit-touch-callout: none;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    color: #666;
    text-decoration: none;
}
img{
    vertical-align: middle;
}
.news{
    margin-top: 200px;
}
.app{
    height: 45px;
}
.app ul li{
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333333;
    text-align: center;
    color: white;
}
.app ul li:nth-child(1){
    width: 8%;
}
.app ul li:nth-child(1) img{
    width: 10px;
}
.app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(2) img{
    width: 30px;
    vertical-align: middle;
}
.app ul li:nth-child(3){
    width: 57%;
}
.app ul li:nth-child(4){
    width: 25%;
    background-color: #F63515;
}
/* 搜索 */
.search-wrap{
    position: fixed;
    height: 44px;
    width: 100%;
    overflow: hidden;
    min-width: 320px;
    max-width: 640px;
}
.search-btn{
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}
.search-btn::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search-login{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    line-height: 44px;
    color: #fff;
 }
.search{
    position: relative;
    height: 30px;
    background-color: #fff;
    margin: 7px 50px;
    border-radius: 15px;
} 
.jd-icon{
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}
.jd-icon::after{
    position: absolute;
    content: "";
    display: block;
    right: -8px;
    top: 0;
    width: 1.5px;
    height: 15px;
    background-color: #ccc;
}
.sou{
    position: absolute;
    width: 18px;
    height: 15px;
    top: 8px;
    left: 50px;
    /* 精灵图做法 */
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}
.slider img{
    width: 100%;
}
.brand{
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div{
    width: 33.33%;
    float: left;
}
.brand div img{
    width: 100%;
}
nav{
    margin-top: 5px;
}
nav a{
    float: left;
    width: 20%;
    text-align: center;
}
nav a img{
    width: 40px;
    margin: 10px 0;
}
nav a span{
    display: block;
}
.news a{
    float: left;
    box-sizing: border-box;
}
.news img{
    width: 100%;
}
.news a:nth-child(1){
    width: 50%;
}
.news a:nth-child(n+2){
    width: 25%;
    border-left: 0.5px solid #ccc;
}

移动web开发之flex布局

Flex布局原理

  • Flex布局原理就是：给父盒子添加flex属性，来控制子盒子的位置排 列方式从而实现flex布局。
  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  • Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex 布局

Flex布局父项常见属性（重点）

1. flex设置主轴方向
  • Flex布局中默认的主轴是row，x轴。如果想改变主轴方向可通过设置flex-direction来改变
  • flex-direction:column; 将主轴改为y轴，纵轴
  • flex-direction:row; 将主轴改为x轴，横轴
  • flex-direction:row- reverse; 主轴为x轴，并且翻转
  • flex-direction:column- reverse ; 主轴为y轴，并且翻转
2. 开启flex布局后默认为不换行
  • 如果想要换行效果设置flex-wrap：wrap
3. Flex-flow就是flex-direction和flex-wrap的合写
4. justify-content设置主轴子元素排列形式
  • 值为flex-start 所有子元素在主轴头部显示
  • 值为flex-end 所有子元素在主轴尾部显示
  • 值为flex-center 所有子元素在主轴居中对齐
  • 值为space-around 所有子元素平分剩余空间
  • 值为space-between 所有子元素先两边贴边在平分剩余空间
5. align-items设置侧轴子元素排列（单行）
  • 利用align-items能够设置侧轴元素对齐的方式在子项为单项（单行） 的时候使用
  • align-items的值为flex-start 表示从头开始
  • align-items的值为flex-end 表示从结尾开始
  • align-items的值为center 表示居中显示
  • align-items的值为stretch 会将子元素拉伸
6. align-content设置侧轴子元素排列（多行）
  • Align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属 性值
  • Align-item和align-content的区别单行找 align-items 多行找 align-content

Flex布局子项常见属性

1. 子项flex属性使用
  • Flex用来设置分配剩余空间的比列的
  • 剩余空间是指父盒子的宽度减去没有设置flex的盒子的宽度
  • 在将剩余空间按占比分配给各个子盒子
  • 比列计算：当前子盒子的flex数值/所有flex的总和
2. align-self和order
			/* 2在1前面 默认是0 -1比0小 */
            	order: -1;
            	
			/* 3号盒子下来底侧 */
            align-self: flex-end;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qlQAUKiy-1587086650896)(https://s2.ax1x.com/2020/02/05/1rO1qP.png)]

案例 以及 样例展示在最上面链接里面

移动web开发之rem布局

rem基础

  • Rem是一个相对单位，相对于html的字体大小
  • 如果整个页面很多地方用rem进行布局，只需要在不同屏幕下修改 html的字体大小，那么整个页面都会同步变化

媒体查询

  • 媒体查询是css3语法，可以实现根据不同屏幕适配不同的样式
  • 语法结构为：@media screen and (max-width:800px) {css样式} 屏幕宽度不大于800px
  • 利用媒体查询实现不同屏幕适配不同样式，发现规律可简写为判断 min-width 可以从小到大写即可
  • 原理是：利用后面会层叠前面的样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n0JVmABS-1587086650900)(https://s2.ax1x.com/2020/02/05/1rOXQA.png)]

媒体查询+rem实现元素动态大小变化

  • Link标签利用媒体查询实现按需引入

Less的使用

  • 首先我们选一套标准尺寸 750为准
  • 我们用屏幕尺寸（750） 除以 我们划分的份数（15） 得到了 html 里面的文字大小 （50）这个文字大小其实也就是1rem的大小
  • 因为屏幕大小不一样，但是划分的份数一样，所以最后html的文字 大小也就不一样，那么1rem在不同的屏幕下也就不一样
// 定义一个粉色的变量
@color: pink;
// 错误的变量名 @1color @color~@#
// 变量名区分大小写 @color 和Color是两种不通的变量
@font14: 14px;
body{
    background-color: @color;
}
div{
    color: @color;
    font-size: @font14;
}
// 1.less嵌套 子元素的样式直接写到父元素里面就好了
a{
    font-size: @font14;
    color: red;
    // 2.如果有伪类、交集选择器、伪元素选择器 我们内层选择器需要&
    &:hover{
        color: blue;
    }
}
// 3.我们运算符的左右两侧必须敲一个空格隔开
// 4.如果两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
// 5.两个数参与运算，如果两个数都有单位，而且不一样的单位 最后结果以第一个为准

案例 以及 样例展示在最上面链接里面

flexible.js技术

  • 手机淘宝团队出的简洁高效 移动端适配库
  • 默认flexible是将屏幕划分10等分

cssrem 插件

  • Cssrem插件会自动将px转化为rem
  • 但是要注意 插件默认1rem = 16px
  • 需要将插件重新配置

案例 以及 样例展示在最上面链接里面

移动web开发之响应式布局

前面都是单独制作移动端页面（主流）下面我们来看看响应式开发原理

响应式开发原理

  • 默认效果是在一行显示，width固定居中，所以默认将父盒子设置 width：750px，利用margin居中
  • 当小于768的时候，父盒子占据一整行，并且子盒子占据三分之一
  • 所以利用媒体查询判断，如果满足条件，将父盒子width：100%；
  • 将子盒子的width：33.3333%

Bootstrap使用

一个很厉害的第三方库 和 前面几个创建基本文件夹一样 多一个bootstrap文件夹用来放 bootstrat资源

  • 第一步创建基本文件夹，注意：多一个bootstrap文件夹用来放 bootstrat资源
  • 第二步下载bootstrap文件放入项目
  • 第三步将基本模板复制在html里
  • 第四步引入资源文件

Bootstrap使用-栅格系统

  • 栅格系统就是默认将父元素分成12等分
  • 如果想设置子元素的宽度
  • 可根据占据的份数来决定子元素的宽度
  • 例如：子元素占据3等份，那么就相当于设置子元素width：25%，
  • 子元素占据4等份，那么就相当于设置子元素width：33.333%

Bootstrap栅格系统使用（上）

  • 栅格系统是分为行和列的
  • 所以要先写行，创建一div添加类名为row即可
  • Row下面的div为列
  • 如何设置每列占多宽？
  • 可以通过类名 col-xs-栅格的数量(设置超小屏幕)、 col-sm-栅格的 数量(设置小屏幕)、 col-md-栅格的数量(设置中等屏幕)、 col-lg栅格的数量(设置大屏幕)
  • 如果列的栅格得数量加一起没有超过12咋可能出现空白并在一行显 示
  • 如果列的栅格数量加一起超过12，则在开始超过12的那个换行显示

Bootstrap栅格系统使用（下）

  • 列的类名可以写多个
  • 也就是可以同时设置col-xs-、 col-sm-、 col-md-、 col-lgn
  • 这样的话，在不同屏幕下就会有不同的结构样式

Bootstrap列偏移

  • 使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过 为当前元素增加了左侧的边距（margin）。

响应式工具

  • visible-lg ：设置大屏幕显示
  • hidden-lg：设置大屏幕隐藏

Boostrap案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .container:nth-child(n-1){
            margin-top: 50px;
        }
        .row>div{
            height: 50px;
            background-color:pink;
        }
        span{
            font-size: 15px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
        <div class="col-md-4">
            <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素 -->
            <div class="row">
            <div class="col-md-6">a</div>
            <div class="col-md-6">b</div>
            </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
        </div>
    </div>
    <!-- 两侧对齐 -->
    <div class="container">
        <div class="row">
            <div class="col-md-3">左侧</div>
            <!-- 偏移的份数就是12 - 两个盒子的份数 = 6 -->
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <!-- 中间对齐 -->
        <div class="row">
            <!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>
    <!-- 列排序 -->
    <div class="container">
        <div class="row">
        <div class="col-md-4 col-md-push-8">左侧</div>
        <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>
    <!-- 响应式工具 -->
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-lg">我会变魔术</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>
</html>

案例 以及 样例展示在最上面链接里面

henucm
关注
专栏目录
记第一次面试分享(雪浪云)
henucm的博客
04-21 2551
文章目录Cookie，sessionStorage、localStorage的区别Cookie和session的区别简单谈一下cookie？HTTP常用状态码HTTP和HTTPS的区别描述一下XSS和CRSF攻击？防御方式？什么是点击挟持？如何防范点击挟持？SQL注入攻击？强，协商缓存状态码304和200cache-control的值有哪些 ！！！谈一谈浏览器的缓存机制？CSS优先级算法如何计算？...
【前端学习笔记】移动web-黑马程序员学习笔记
张张张张张高高的博客
07-09 3464
该笔记是博主在b站学习的移动web-黑马程序员的学习笔记，记录自己的学习，资料均为免费获取，禁止商用。
JavaWeb学习笔之概念基础
qq_42045489的博客
01-23 146
1.基本概念 1.1前言 # 就是动态的web,也就是说数据是动态变化的。几乎所有的网站都是动态的，没有数据交互的网站实际上是没有意义的。 1.2 web应用程序 # 可以提供浏览器访问的程序。web应用程序编写完毕后，若想提供给外界访问，需要一个服务器进行统一管理。 1.3 动态web # 网站展示的内容会根据不同的用户动态变化展示。 2. Web服务器 2.1 web服务器的概念 # 服务器是一种特殊的应用程序，被动地等待来自个用户的请求。 2.2 Tomc...
移动web学习总结
奋斗的小绿萝
08-07 2967
最近学习了些移动web开发的知识，总结一下： Hello,移动web： https://www.imooc.com/learn/494 一、基础知识 1. 关于Pixel px : CSS px，逻辑像素，浏览器使用的抽象单位 dp，pt： device independence pixel 物理像素：设备无关像素 dpr ： devicePixelRatio 设备像...
移动web学习--淘宝 flexible.js
热门推荐
季诗筱的博客
04-22 1万+
最近在学习移动web，需要做一个移动端和PC端都兼容的弹出框表单。查阅了很多资料，最终选择了使用淘宝的flexible.js来实现各个终端的适配。 很好的博文：     1、从网易与淘宝的font-size思考前端设计稿与工作流     2、白色橡树：移动web资源整理     3、移动端web app自适应布局探索与总结     4、手机端页面自适应解决方案—rem布局     5、使
web移动开发总结(一)
庚中
12-02 1万+
概述 移动web的概念和发展历史 移动web的开发方式和区别 响应式原理和媒体查询(重点) 响应式框架的介绍 bootstrap框架的基本使用 bootstrap全局CSS样式布局容器使用(重点) bootstrap全局CSS样式栅格系统使用(重点) bootstrap全局CSS样式响应式工具使用 微金所项目搭建和头部的结构 (重点) web前端 PC端的web ： 在PC端电脑访问的web...
web移动开发总结(四)
庚中
12-10 4421
总结 移动端的一些基本基础知识 移动京东的项目搭建 公共样式的定义 顶部通栏的布局 轮播图的布局 导航条的布局 秒杀商品布局 京东超市布局 原生移动web开发 响应式开发： 写一个页面同时适配多个终端 原生的移动web开发： 分别针对每个端都写一套代码 PC端写一套代码 移动端写一套代码 PC端一般使用固定宽高的布局 移动端全屏撑满整个页面 全屏100% 使用百分比布局（流式布局） 目...
常用移动web开发框架
简单
05-01 7990
纯粹的总结一下移动web开发框架，移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发，是成熟的框架，jQuery Mobile出自于jQuery家族，Sencha Touch来自于ExtJS。jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架，项目中也有应用。国内也有公司，像BAT巨头也在探索和实现了适合自己的移动web...
基于web的在线学习系统设计与实现 功能参考
杭州.黄老师
12-27 4599
web在线学习系统
移动web学习总结 .docx
12-31
移动Web开发是针对智能手机和平板电脑等移动设备的网页开发技术。随着移动设备的普及，这一领域的知识变得至关重要。在移动Web开发中，主要关注点包括屏幕适配、交互优化和性能提升。 1. **布局策略**：移动端的...
web前端与移动开发学习路径
08-30
web前端开发学习路径介绍
从0开始学习移动Web App开发视频课程下载整理.zip
最新发布
08-20
本课程旨在帮助初学者从零基础开始掌握移动Web App的开发技能，通过一系列视频教程进行系统性的学习。 在本"从0开始学习移动Web App开发"的课程中，你将了解到以下核心知识点： 1. **HTML5基础知识**：HTML5是移动...
java基于web的移动学习平台毕业设计程序
09-22
采用java技术构建的一个管理系统。整个开发过程首先对系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计...
HTML5移动Web开发
03-27
HTML5移动Web开发是当前互联网应用开发的重要领域，随着移动设备的普及，越来越多的开发者将目光转向了构建适应各种...通过学习，你可以掌握创建高性能、跨平台的移动Web应用所需的知识，为你的职业发展打下坚实基础。
四种接口调用方式
henucm的博客
05-06 2355
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 这里主要讲一下fetch和axios fetch Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。 fetch(url, options).then(） <script type="te...
自学前端路线以及面试遇到的坑
henucm的博客
08-15 1574
最近有一些同学问我关于应该学哪个方向以及需要学哪些知识，故写下这篇文章。这篇文章将从学习方向，学习方法，每个阶段大概需要多长时间，如何准备面试，如何写好自己简历，如何去投递自己的简历这几个方面来讲。 如果你已经在准备考研或者有考研的意向 随便看看就好 ( 既然选择了考研就一定要坚持信念 其实有的时候结果并不重要 重要的是你在这个过程中的成长以及收获 只要你认真且坚持到了最后 你就是成功了。 **永远、永远、永远不要放弃——要坚持到最后一刻 ** 加油 (ง •_•)ง 文章目录学习方向学习方法每个阶段
关于CSS优先级算法是如何计算
henucm的博客
04-22 1539
关于CSS优先级算法是如何计算 之前我一直认为的是 内联标签>id选择器>类选择器>元素选择器 !important的权重最大 这种说法是不完整的。前提是它之后不会再出现相同的权重。如果权重相同，我们则需要去比较匹配规则的特殊性。 一个匹配规则一般由多个选择器组成，一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级。 第一个等级是内联样式 1000 ...
ES5 ES6基础知识
henucm的博客
04-17 1040
ES5语法 数组方法 迭代(遍历)方法：forEach()、map()、filter()、some()、every()； array.forEach(function(currentValue, index, arr)) // currentValue：数组当前项的值 index：数组当前项的索引 arr：数组对象本身 var arr = [1,2,3]; var sum=0; arr.fo...
JavaScript中伪数组和数组以及转化
henucm的博客
04-17 1008
JavaScript中伪数组和数组以及转化 之前看到过一个经典的面试题 说如何将伪数组转成数组 当时一脸懵逼 如今学会了高级JS然后再次看这个问题 好像没有想象中那么难。 伪数组和数组 在JavaScript中，除了5种原始数据类型之外，其他所有的都是对象，包括函数（Function）。 对象与数组的关系 首先你得确保你知道原型链以及原型得继承。 我们都知道所有的JS内置构造函数的对象原型都指向的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值