BOM基础

已于 2022-09-06 13:21:14 修改
阅读量455 收藏
点赞数
分类专栏： JS学习日记 文章标签： javascript 前端 json
于 2022-09-06 13:14:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44893253/article/details/126712917
版权

BOM基础

BOM的全称叫Browser Object Model浏览器对象模型，它是JS里面的一个组成部分
JavaScript
ECMAScript
DOM
BOM

location对象

location是浏览器的内置对象，全称是window.location，它指的是浏览器的地址栏

  1. href用于设置或获取浏览器地址栏里面的地址，如果是设置，则浏览器会跳转到新的网址

  2. hostname用于返回当前地址栏里面的主机名

    https://www.softeem.xin:9090/html_project			www.softeem.xin
http://127.0.0.1:5500/01.html 				127.0.0.1
http://aaa.bbb.ccc/02.html 					aaa.bbb.ccc

  3. port返回当前地址栏里面的端口号

    http://localhost:9998/02location.html			端口号9998
http://www.softeem.xin:8090/ 					端口号8090
https://www.baidu.com/							端口号443
http://www.softeem.com/web3/index.html			端口号80

    https开头的网址端口号默认是443,http开头的端口号默认是80

  4. host用于返回当前地址柆里面的hostname+port

    http://localhost:9998/02location.html	
主机地址  localhost:9998

  5. protocol返回当前地址栏里面的协议号，它是http:或https:

  6. origin返回当前地址栏的域的信息，它是location三大属性之一，origin=protocol+//+hostname+:port

    http://localhost:9998/02location.html			域http://localhost:9998
http://www.softeem.xin:8090/ 					域http://www.softeem.xin:8090/
https://www.baidu.com/							域https://www.baidu.com/
http://www.softeem.com/web3/index.html			域http://www.softeem.com

    这个域后期对BOM编程限制非常大，因为会有一个现象叫跨域【后面会讲，也会遇到】

  7. hash返回或设置当前地址栏里面的哈希值，它是location三大属性之一，hash值代表的就是地址栏#后面的东西（后期的SPA开发里面用到）

    http://localhost:9998/02location.html#div1
//哈希  #div1

  8. search返回当前地址栏里面的?后面的东西，它是location三大属性之一,它常常用于跨页面传值

    http://localhost:9998/03location.html?aaa=123
//searh就是?aaa=123

    在讲到search属性的时候 就不得不提起BOM当中比较重要的一个对象叫URLSearchParams

    <body>
    <input type="text" id="userName" placeholder="请输入账号">
    <input type="text" id="age" placeholder="年龄">
    <button type="button" onclick="toPage2()">提交</button>
</body>
<script>
    function toPage2() {
        var userName = document.querySelector("#userName").value;
        var age = document.querySelector("#age").value;
        // location.href = "05b.html";    这个代码只会把页面跳转到05b，但是数据没有过去

        location.href = "05b.html?userName=" + userName + "&age=" + age;
    }
</script>

    在这里插入图片描述

    现在回到05b.html这个页面

    在这里插入图片描述
    这个时候就可以看到地址栏的上面多了search部分，只需要拿到里面的值就可以了。如果要拿到里面的值就必须使用内置对象URLSearchParams

    // http://localhost:9998/05b.html?userName=yangbiao&age=18
var p = new URLSearchParams(location.search);
p.get("userName");          //yangbiao
p.get("age")                //18

  9. pathname代表当前浏览器地址栏里面的路径

    http://localhost:9998/05b.html?userName=yangbiao&age=18
它的pathname就是/05b.html

  10. reload()重新加载当前地址，相当于刷新当前页面

  11. assign()载入一个新的网址，它的作用与href是一样的

    location.assign("http://www.baidu.com");
location.href = "http://www.baidu.com";

    上面的2个代码效果是一样的，没有区别

  12. replace()方法，替换当前地址栏里面的地址，也会跳到一个新的网页

    replace()这个方法是替换了地址栏里面东西，它退不回之前的页面

    什么场景下面会使用replace

    <body>
    <div>
        <input type="text" placeholder="请输入账号">
    </div>
    <div>
        <input type="password" placeholder="请输入密码">
    </div>
    <div>
        <button type="button" onclick="checkLogin()">登录</button>
    </div>
</body>
<script>
    function checkLogin(){
        alert("登录成功");
        // location.href = "http://www.baidu.com";          
        //如果通过href或assigin去跳转页在，这样还是可以回到之前的页面
        location.replace("http://www.baidu.com");
    }
</script>

    在上面的代码当中，如果是登录的场景里面，登录成功以后不应该再回到之前的页面，这个时候就阿使用replace来完成跳转

    同时在支付的场景下面，如果支付成功或支付失败，都只能用replace来跳转

    <body>
    <button type="button" onclick="payOrder()">确定支付</button>
</body>
<script>
    function payOrder(){
        if(confirm("确定要支付吗?")){
            // location.href = "07-1replace.html";
            // 支付成功以后，也不能退回到之前的页面
            location.replace("07-1replace.html");
        }
    }
</script>

关于href/assign与replace的原理是什么

为什么href/assign去跳转页面以后可以回到之前的页面，而replace不可以
在这里插入图片描述

现在再来看replace的情况

在这里插入图片描述

history对象

history对象就是浏览器访问以后的历史记录对象

  1. length属性
  2. back()方法，相当于浏览器的后退功能
  3. forward()方法，相当于浏览器的前进功能
  4. go(step)方法，直接前进几步或后退几步，如果是负数就代表后退，如果是正数就代表前进

navigator对象

这个对象代表当前的浏览器，它记录了当前浏览器的相关信息

  1. appVersion记录了当前浏览器的怎么本信息，后期可以通过这个版本信息来判断当前浏览器到底是版本，如IE，或Chrome或火狐等

  2. maxTouchPoints当前浏览器是否支持多点触摸

  3. bluetooth获取当前设置的蓝牙信息

  4. connection返回当前设备的网络连接信息

  5. geolocation获取当前设备的位置，相当于地理定位

    <body>
    navigator
    <button type="button" onclick="start()">开始定位</button>
</body>
<script>
    // 地理定位
    function start() {
        navigator.geolocation.getCurrentPosition(function (pos) {
            // 定位成功以后的回调
            console.log("定位成功");
            console.log(pos)
        }, function (error) {
            //定位失败以后的回调
            console.log("定位失败");
            console.log(error)
        }, {
            //是否启用高精度定位信息
            enableHighAccuracy: true
        })
    }
</script>

  6. getUserMedia()获取当前设备的多媒体信息，前面学过的打开电脑的摄像头与话筒用的就是这个

window对象

整个浏览器最高的对象就是window对象，这个对象是所有BOM的根对象，它里面有一些常用的方法根大家说一下

  1. alert()弹出一个对话框，只有确定按钮

  2. confirm()弹出一个询问框，包含确定与取消按钮，如果点击确定则返回true，如果点击取消就返回false

  3. prompt()弹出一个输入框 ，用户可以输入,这个方法的返回值就是用户输入的内容，如果用户点击取消就返回null

    var x = prompt("请输入你心中最帅的那个人?");

    在这里插入图片描述

  4. open(url:string,target:string,features?:string)打开一个新的页面

    url代表要打开的网址，target代表打开的方式 ，这个与a标签的target保持一致，最后的features代表新打开的网页的样式

    window.open("http://www.softeem.xin:8090", "_blank", "width=375px,height=667px,left=200px,top=300px")

    这个时候会在新的浏览器里面打开网页，打开的以后_target 的方式打开 ，并且宽度和高度以及左边和上边的位置都设置

    在这里插入图片描述

  5. close()关闭一个网页

跨页面作用技术 【重难点】

通过window.open()打开的页面叫父子页面

父子页面是通过open()打开以后的页面，父子页面可以相互的操作

01.html

<body>
    <h1 style="color: blue;">我是父页面</h1>
    <button type="button" onclick="a1()">打开子页面</button>
</body>
<script>
    var childWindow = null;
    function a1() {
        // 01的页面打开了02的页面
        // 那么01就是02的爹(父页面)
        childWindow = window.open("02.html");
        childWindow.document.querySelector("h2").innerText="我是你儿子啊，父亲在操作儿子";
        //这里的childWindow指代的就是就是子页在的02的window对象
    }
</script>

代码分析：

当通过window.open()打开一个页面以后，就可以返回一个window 对象，这个对象就是新打开的页面的window全局对象

02.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子页面</title>
</head>
<body>
    <h2 style="color: red;">我是子页面</h2>
</body>
 <script>
    //如果在子页面里面要打爹
    console.log(window.opener);
</script>
</html>

当去点击父页面上面的按钮以后就会后期02这个页面，那么02的页面就是01的页面的子页面，父子之间是可以相互操作

window.opener;				//通过这个可以找到父页面

localStorage本地存储

它的中文名称叫本地存储，它指的是浏览器的存储行为，可以在网页上面调用这个方法来实现对一个东西进行存储。它指的是浏览器的本地存储

  1. setItem(key,value)将一个值放在缓存当中

    localStorage.setItem("userName","yangbiao");
localStorage.setItem("age","18");

  2. getItem(key)根据一个key从缓存当中取出值

    localStorage.getItem("userName");			//"yangbiao"
localStorage.getItem("age");				//"18"

  3. removeItem(key)根据一个key从缓存当中删除某一项

    localStorage.removeItem("userName");

  4. clear()清除lcoalStorage的缓存

    localStorage.clear();

localStorage 本身还是一个对象，它的每一个缓存就是一个属性名，所以缓存的操作也可以以对象的方式来完成

localStorage.setItem("nickName","小小花");		//放一个缓存
localStorage.nickName = "小小花";				//以对象的形式来操作

localStorage.getItem("nickName");			 //"小花花"
localStorage.nickName;						 //"小花花";

localStorage.removeItem("nickName");		 //删除缓存"小花花"
delete localStorage.nickName;
localStroage的注意事项及特点

  1. localStorage可以跨页面共享值

  2. localStorage在关闭浏览器以后还会保存

  3. localStorage如果不手动清除会一直存在

  4. localStorage不能跨域访问

    在这里插入图片描述

上面的域是http://localhost:9998，下面的域是http://127.0.0.1:8080，两个域不相同，所以它们不能共享数据，也不能互相访问

sessionStorage会话存储

在这里插入图片描述

sessionStorage是一个会话存储 ，可以理解为它的缓存是在这一根蓝色的线上面的，它不在浏览器的本地，它所具备的方法与操作方式与localStorage保持一致

  1. setItem(key,value)赋缓存
  2. getItem(key)取缓存
  3. removeItem(key)删除一个缓存
  4. clear()清除sessionStorage的缓存

同时对象的操作方式也与localStorage一致

sessionStorage.setItem("age","19");
sessionStorage.age = "19";
sessionStorage的注意事项及特点

虽然说sessionStorage与上面的学习过的localStorage操作方式保持一致，但是它们的特点完全不一样

  1. sessionStorage不能跨页面共享数据，除非是父子页面
  2. sessionStorage关闭浏览器以后数据会自动清除
  3. sessionStorage不能跨域访问

cookie

cookie也是一个缓存，但是与上面的storage的缓存是完全不一样的， storage的缓存是在window对象下面， 所以是使用window.localStorage 和window.sessionStorage

但是cookie是在document对象下面，它的访问就是window.document.cookie

cookie也是一种缓存方案，但是它与前面缓存有一点区别，它可以上设置到期时间，到期以后自动清除，同时也要注意它的到期时间指的是GMT时间（GMT时间：格林宁治时间，也就是0时区的时间）

cookie的设置

document.cookie = "缓存名=缓存值";
document.cookie = "userName=biaogege";

在这里插入图片描述

可以看到，userName的cookie已经设置成功了，但是它的Expires/Max-Age指的是它的过期时间，仍然是会话，这是因为如果cookie在设置的时候不设置过期时间就默认以session为过期

设置带过期时间的cookie

document.cookie = "缓存名=缓存值;Expires=过期时间";
document.cookie = "userName=biaogege;Expires="+new Date("2022-09-07 12:00:00").toGMTString();

在这里插入图片描述

cookie的取值

在这里插入图片描述

现在cookie里面有2个值 ，怎么取出cookie里面的值呢？

document.cookie;				//'userName=biaogege; age=18'
//如果在结果里面取得userName和age的值
function getCookieValue(cookieName) {
    var str = document.cookie + ";";
    var reg = new RegExp("(?<=" + cookieName + "=).*?(?=;)", "g");
    var result = str.match(reg);
    // 取到了就是一个数组，取不到就是null
    return result ? result[0] : null;
}

在上面的代码里面，cookie的取值操作使用了正则表达式去完成

真正的开发里面， 没有谁会自己手动的写正则取cookie，因为有插件叫js-cookie

<script src="js/js.cookie.js"></script>
<script>
    Cookies.get("userName");
    Cookies.get("sex");
    Cookies.get("age");

    Cookies.set("hobby","123123123");

    Cookies.set("stuName","张三峰",{
        Expires:new Date("2022-09-06 12:00:00").toGMTString()
    });
    	
    //删除某一个cookie
    Cookies.remove("stuName");
</script>
cookie的注意事项及特点
  1. cookie是可以跨页面的
  2. cookie的path会隔离，子级的path可以访问父级的path，父级的访问不了子级的，同级别的path也是可以相互访问的
  3. cookie关闭浏览器以后不会自动消失，它的消失是根据过期时间来决定的，但是这个时间是GMT时间
  4. cookie是可以存储在document上面的，它会随着请求到达服器，随着响应返回浏览器
  5. cookie是在大小限制，每个浏览器都不一样

在这里插入图片描述
在这里插入图片描述

JSON

这里有一个注意事项，上面的3种缓存里面都有一个共同的缺点，它们只能存储字符串

如果现在有一个数组要存储进去，怎么办？如果有一个对象要存储进去，怎么办？

var arr = ["a","b","c","d","e"];
var userInfo = {
    userName:"张三",
    age:18,
    sex:"男"
}
sessionStorage.setItem("arr",arr);
sessionStorage.setItem("userInfo",userInfo);

因为只能存储字符串，所以可以看到默认情况下arr.toString()了，userInfo.toString()了

为了解决上面的问题，就有必要了解学习一下JSON

在这里插入图片描述

通俗的说：“JSON是对象的字符串表示方法”

// 对象，也是数组
var arr = ["a", "b", "c", "d", "e"];
//JSON
var str = '["a", "b", "c", "d", "e"]';

//对象
var obj = {
    userName: "张三",
    age: 18
}
//JSON
var str2 = '{"userName": "张三","age": 18}';

如果将一个对象变成了字符串以后，就可以将它以字符串的形式进行存储

其实在所有浏览器里面都有一个内置对象叫JSON

JSON.stringify()序列化

这个方法可以将JS的对象序列化成JSON字符串

//对象
var obj = {
    userName: "张三",
    age: 18
}
//现在想得到上面对象的JSON字符串，怎么办呢？
var str = JSON.stringify(obj);          //'{"userName":"张三","age":18}'
JSON.parse()转化

这个方法可以将JSON字符串转化成JS对象

var str = '{"userName":"张三","age":18}';
var userInfo = JSON.parse(str);			//这里就得到了对象

URL对象

这个对象与之前所学习的location对象一样的，但是有一个点一定要讲那就是URLSearchParams，它可以将search字符串转换成对象来操作，这一点在location也提到了

var str = "http://127.0.0.1:8080/07URL.html?userName=biaogege&age=18";

怎么样得到上面地址栏里面的userName和age的的值呢？

第一种方式：使用之前所学习过的URLSearchParams

var str = "http://127.0.0.1:8080/07URL.html?userName=biaogege&age=18";
var p = new URLSearchParams("?userName=biaogege&age=18");
//现在的问题就是，你怎么拿?后面的东西    【待定：假设已经拿到？后面的东西】
var userName =  p.get("userName");
var age = p.get("age");

在上面的这个方法里同，是假设拿到了?后面的字符串，但实际上面没有拿到

第二种方式：使用URL对象

var str = "http://127.0.0.1:8080/07URL.html?userName=biaogege&age=18";
//第一步：直接将上面的str转变成一个url对象
var u = new URL(str);

var userName = u.searchParams.get("userName");
var age = u.searchParams.get("age");

在这里插入图片描述

URL.createObjectURL()

这个是重点，这个是超重点

在这里插入图片描述

在之前的多媒体学习的时候，讲了文件与base64,将一个文件读取成base64格式，现在再来学习一下

<body>
    <img id="img1" alt="">
    <input type="file" onchange="fileChange(this)">
</body>
<script>
    function fileChange(obj) {
        if (obj.files.length > 0) {
            var file = obj.files[0];
            var reg = /^image\/(jpe?g|bmp|gif|svg\+xml|webp)$/;
            if (reg.test(file.type)) {
                //将图片读取成base64
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload=function(){
                    var img1 = document.querySelector("#img1");
                    img1.src = reader.result;
                }
            }
            else {
                alert("请选择图片");
            }
        }
    }
</script>

在这里插入图片描述

在这里插入图片描述

上面的代码就是将文件读取成了base64的格式，然后直接显示，这么做是没有问题的，但是也知道如果读取比较我大的时候的时候（如视频video），这个时候就会变得非常慢

现在有了URL.createObjectURL()这一个方法以后，再次操作就会变得非常简单了

<body>
    <img id="img1" alt="">
    <input type="file" onchange="fileChange(this)">
</body>
<script>
    function fileChange(obj) {
        if (obj.files.length > 0) {
            var file = obj.files[0];
            var reg = /^image\/(jpe?g|bmp|gif|svg\+xml|webp)$/;
            if (reg.test(file.type)) {
                var img1 = document.querySelector("#img1");
                //核心代码就这一句
                img1.src = URL.createObjectURL(file);
            }
            else {
                alert("请选择图片");
            }
        }
    }
</script>

在这里插入图片描述

这个时候的方式比上面读成base64的方式要快很多，也方便很多，直接将文件转转换成了一个对象URL

URL编码与解码

在浏览器里在，哪地址栏里面有中文的时候，它默认不会以中文来显示，而是一个“乱码”，这种“乱码”其实是一个特殊的加密编码

http://127.0.0.1:9998/03%E8%A7%86%E9%A2%91.html

在上面的网址里面，看到里面有一串乱码是因为里面有中文，在浏览器里面，浏览器有自带的路径加密与解密方式

  1. encodeURIComponent()将一个字符串进行URI的编码

    encodeURIComponent("你好");			//'%E6%9D%A8%E6%A0%87'
encodeURIComponent("abcde3r");	 	 //'abcde3r'

    这个方法只对中文进行编码，对英文与数组是不会进行编码的

  2. decodeURIComponent()将一个字符串进行URI的解码

    decodeURIComponent('%E6%9D%A8%E6%A0%87');			//你好

    同理，这个方法只对中文进行解码，英文与数组不进行操作

天才小胖达
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS（十四）BOM
jjjh968的博客
09-09 269
一、什么是BOM？ BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。 BOM 的核心是 window 对象，表示浏览器的实例。 二、BOM对象 window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性； document 对象，文档对象； location 对象
JS基础_BOM属性
魂断楼兰的博客
11-29 307
BOM简介1. window对象1.1 window是JavaScript的顶级对象1.2 所有定义在全局作用域中的变量和函数都是window对象中的属性和方法1.3 window对象下的属性和方法调用的时候可以省略window2. BOM的内置方法和内置对象2.1 新窗口=window.open(地址,是否开新窗口,新窗口的参数) window.open(url,target,param) url
JS5 - DOM & BOM & Ajax跨域
yuan
07-07 256
此处的知识点为常用知识点, 了解更多可以查看这篇优秀的文章 《2021JavaScript知识汇总》 ( 也是我写的 - _ - ) 1、DOM ⑴、本质 HTML 是一个有既定标签标准的 XML 格式，标签的名字、层级关系和属性，都被标准化（否则浏览器无法解析）。同样，它也是一棵树。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document&l.
web前端进阶_html_基础篇1
qq_17495489的博客
08-12 25万+
HTML基础 一、HTML基础语法 1. 什么HTML HTML（Hypertext Markup Language） - 超文本标记语言 标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不同, 例如：markdown、html HTML大小不敏感： html ==Html == HTML == hTMl (小写和大写功能一样) 2. 标签 - 就是标记， 标签是HTML的基本结构，不同的标签功能不一样 语法： 双标签(标准标签): <标签名 属性1=属性值1 属性2=属性值2 …&
http://syy7.com/a/25.php,vue_element/vue_elementui.sql at 3ffdcb477ce3fbbc24cf1a4d7e3481a187023a02 ·...
热门推荐
weixin_34064233的博客
04-13 98万+
INSERT INTO `user_tb` VALUES ('1', '女', 'burtyang', 'C041580E1C6192B6084E03CE76D5C05C', '18', null, 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAwICQoJBwwKCQoNDAwOER0TERAQESMZGxUdKiUsKykl...
BOM基础（源代码） BOM基础（源代码）
05-31
BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源...
BOM基础 BOM基础 BOM基础
05-31
**BOM基础详解** BOM（Bill of Materials）在IT行业中，特别是在制造、工程和项目管理领域，是一种至关重要的概念。BOM是一个详细列出产品或系统所有组件的清单，包括每个组件的数量、规格和层次关系。它不仅是产品...
BOM基础学习,前端学习
06-30
BOM是browser object model的缩写，简称浏览器对象模型。它提供了独立于内容而与浏览器窗口进行交互的对象，并且每个对象都提供了很多方法和属性。BOM主要用于管理窗口与窗口之间的通信，因此其核心对象时window。
BOM基础知识培训教材.pptx
10-11
BOM基础知识培训教材.pptx
javascript中BOM基础知识总结
10-20
JavaScript中的BOM（Browser Object Model）是用于处理浏览器窗口与窗口之间交互的API，它不是一个标准，而是由各个浏览器厂商实现的。BOM的核心对象是`window`，它不仅是JavaScript的全局上下文，还能让我们控制...
使用socket抓取网页源码
11-05
本人前面已经写了一个抓取网页的程序，准确性很高，但是没有蜘蛛的爬行功能，而且效率也不是怎么很理想；本人经过一段时间的研究，参考了其他高手的程序，然后自己写了一个网页抓取的，具有蜘蛛爬行功能，大家有兴趣可以去学习一下
基于java实现仿京东商城电商系统项目设计与实现源码分享
03-01
java毕设 SSM架构，是三层结合所成的框架，分别是Spring、SpringMVC、MyBatis所组成 SpringMVC：视图层，界面层；负责接收请求，显示处理结果，管理Controller控制器对； Spring：业务层，管理service，dao，工具类对象；依赖注入来管理各层，面向切面编程管理事务，日志和权限 MyBatis：持久层；访问数据库；基于jdbc的框架，主要用来操作数据库，并且将业务实体和数据表联系起来 1、Spring （1）基本概念 Spring是一个开源开发框架，是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架。 spring主要用来开发java应用，构建J2EE平台的web应用。其核心就是提供一种新的机制管理业务对象及其依赖关系 （2）spring的优点 容器：spring是一个容器，包含并管理对象的生命周期和配置。可以配置每个bean如何被创建，基于一个可配置原型prototype，你的bean可以创建一个单独的实例或者每次需要时都生成一个新的实例。 支持AOP：spring提供对AOP的支持，它允许将一些
微信小程序实现打开并下载服务器上面的pdf文件到手机
10-16
主要介绍了微信小程序实现打开并下载服务器上面的pdf文件到手机，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序把阿里icon变为组件
最新发布
aleluye的博客
04-11 2万+
在app.json中引。
vue项目实战
小蜗牛的博客
03-01 431
node连接服务器 【全栈初体验】Vue+Node+MySQL实现前后端分离开发_艾欢欢的博客-CSDN博客 node项目 1.猫眼电影移动端 在博客‘前端学习三’中项目入门的基础上进行 1.首先上图是测试了跳转，现在正式开发：要展示的是电影列表，这个列表对于正在上映和即将上映都需要，只是请求的数据/调用的接口不同，因此将其设置为一个组件 1.在components中新建一个moviesDetail.vue:其展示的内容是每次点击最上面的正在热映/即将上映触发一个请求进行返回的.
在线影院的实现
weixin_45656074的博客
07-01 2592
html ---------------------------------------------------------------- 决定前端架构css------------------------------------------------------------------- 决定前端样式js--------------------------------------------------------------------- 决定页面行为jQuery ( js 框架 )Bootstrap
我理解的JavaScript运算符
weixin_45952303的博客
10-12 180
JavaScript运算符 ECMA-262 描述了一组用于操作数据值的操作符，包括算术操作符（如加号和减号）、位操作符【现在暂进不考虑】、 关系操作符和相等操作符。这些操作符可以运用于我们的很多数据类型，它不像我们其它编程语言，操作符只对某些数据支持 一元操作符 只能操作一个值的操作符我们叫一元操作符。 一元加减操作符在我们的JS里面最主要的作用就是类型转换。 例题: var a = “01”; a = -a; console.log(a); 运行结果： 一元加减操作符其实就是对当前的变量调用了Num
【vue项目实战】Vue工程化项目--猫眼电影移动端（三）
艾欢欢的博客
05-06 7998
vue工程化第三节 组件化开发，标题部分 多处用到的代码就在全局进行注册 优化用户体验：当网速过慢时，显示加载动画。 播放宣传片 保留组件状态，避免重新渲染 keep-alive 图片懒加载 本节完整demo 组件化开发（标题） 思想：不同种类的组件，划分不同模块 从首页进入详情页，标题文字会改变，也会多出一个返回按钮，但样式还是不变的，所以这里也可以拆分为一个组件（我不会告诉你们，是我在...
【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
艾欢欢的博客
04-20 1万+
vue工程化第二节 添加内容和样式 使用axios请求数据，参考这里 添加局部左右滑动（即将上映页），参考 （左右滑动也可使用插件） 组件化开发，相同代码可以提取出来作为一个组件来调用，减少代码量，提高代码可复用性 路由传值跳转电影详情页，[参考] 本节完整[demo参考] 提高代码可复用性 相同代码单独作为一个组件，提高代码可复用性。 下面两个界面的红色框框，样式和内容都差不多，可以...
JavaScript DOM与BOM基础：交互性与浏览器模型详解
本文档主要介绍了JavaScript的基础知识及其在网页开发中的重要作用，特别关注了DOM(Browser Object Model)和BOM(Document Object Model)这两个浏览器原生模型。JavaScript是一种客户端脚本语言，它具有以下关键特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值