前端基础复习_{"name":"保时捷","color":"红色","price":655350.35}-优快云博客

本文链接：https://blog.youkuaiyun.com/t1144013358/article/details/115026743

笔记

箭头函数

var f = () => "f箭头函数无参";
console.log(f());
var f1 = a => a;
console.log(f1(100));

JavaScript面向对象

var Car = new Object();
Car.name = "保时捷718";
Car.type = "Cayman T";
Car.color = "红色";
Car.price = 641000;
Car.toStr = function() {
    return Car.name + "," + Car.type + "," + Car.color + "," + Car.price;
};
console.log(Car);
console.log(Car.price);
console.log(Car.toStr());

Car.text = "汽车";
console.log(Car);

Car.whatColor = function(color){
    return "这个汽车我喜欢: "+color+"颜色";
}
console.log(Car);
console.log(Car.whatColor("棕色"));

JavaScript数据类型

var name = "某某某";
console.log(name);
var age = 18;
var sex = true;
name = 123; //整数覆盖字符串, 变量类型发生变化

console.log(name);
console.log(age);
console.log(sex);

/* 定义一个add的函数, 有两个参数 */
var add = function(a, b) {
    return a + b;
}
console.log(add(123, 456)); //579
console.log(add("123", "456")); //123456
var arr = [1, 2, 3, 4, 5];
console.log(arr);

css样式

width: 400px;
font-size: 10px;
/* border: 1px red solid; */
/* 文字的横向居中 */
text-align: center;
/* 字体大小 */
font-size: 22px;
/* 字体颜色 */
color: red;
/* 字体加粗 */
font-weight: bold;
/* 斜体 */
font-style: italic;
/* 阴影: 颜色 x偏移值 y偏移值 浓度(值越小越清晰) */
text-shadow: #0ff -5px -5px 2px;
/* 设置字体 */
font-family: 楷体;
/* 文本修饰 overline上划线 underline下划线 line-through删除线 none去掉文本修饰 */
text-decoration: overline underline line-through;
/* 元素四周空5个像素 */
margin: 5px;
/* 设置背景颜色 */
background-color: #00FFFF;
/* 元素上边空5个像素 */
margin-top: 5px;
padding-left: 5px;
/* 行高 */
line-height: 25px;
display: inline-block;
padding: 5px;
/* 默认流式布局, 类似表格布局 */
display: inline-table;
border: 1px solid green;

/* 
alert(document.title);
谷歌浏览器 chrome 内置一个调试器
console浏览器提供对象
log方法, 写日志
打开调试器: f12
*/
console.log(document.title);

JavaScript获取及修改页面元素

/* 访问第一个h1标签 */
var h1 = document.getElementsByTagName("h1")[0];
console.log(h1.innerText);
/* 修改标签中间的文本内容 */
h1.innerText = "<font color='red'>js 操作 DOM树</font>";
/* 修改标签中间的内容为html元素 */
h1.innerHTML = "<font color='red'>js 操作 DOM树</font>";

/* 获取页面的所有a标签，得到多个值，是一个数组的结构 */
var as = document.getElementsByTagName("a");
console.log("第一个a标签中间的文本内容：" + as[0].innerText);
console.log("第一个a标签的链接：" + as[0].href);

as[0].innerText = "京淘";
as[0].href = "http://act.codeboy.com";

console.log("第二个a标签的内容：" + as[1].innerText);
console.log("第二个a标签的链接：" + as[1].href);

console.log("第三个a标签的内容：" + as[2].innerText);
console.log("第三个a标签的链接：" + as[2].href);
alert(as[2].id);

es6的一些语法

/* var z = 10;
for (var i = 0; i < 3; i++) {
    var z = 100;//100
    alert(i + ": " + z);
}
alert(z); //100*/

let z = 10;
for (var i = 0; i < 3; i++) {
    let z = 100;
    alert(i + ": " + z); //100
}
alert(z); //10

/* es6 有常量const
    默认js的错误是不会直接给用户来展现
    F12看错误信息
 */
const PI = 3.14;
//PI = 3.1415926;
/* Uncaught TypeError: Assignment to constant variable.
        at es6.html:24 */
alert(PI);

var jsfun = function(x) {
    alert(x * x);
}
jsfun(10);

var es6f0 = () => alert("abc es6");
es6f0();
var es6f1 = (x) => alert(x * x);
es6f1(5);

var jsonstr = '[{"p":"5999.00","op":"5999.00","cbf":"0","id":"J_100009077449","m":"6499.00"}]';
/* json字符串转换为json对象 */
var jsonobj = JSON.parse(jsonstr);
/* 数组取下标的值 */
var rs = jsonobj[0];
/* 对象取属性的值 */
var price = rs.p;
console.log(price);
/* 从字符串下标为2的位置截串到末尾 */
var id = rs.id.substring(2);
console.log(id);

/* jquery修改html元素中间的文本内容 */
$("#id").text(id);
/* jquery修改html元素样式 */
$("#id").css("color", "blue");

//实现按钮的后期绑定
$("#selectAll").click(function() {
    //获取到页面上所有ckColor(多个元素)
    //jQuery attr()方法设置或返回被选元素的属性和值
    $("[id=ckColor]").attr("checked", true);
});
$("#unSelectAll").click(function() {
    $("[id=ckColor]").attr("checked", false);
});


/* jquery的prop方法可以修改页面元素属性的值 */
$("#selectAll").click(function() {
    $("[id=ckColor]").prop("checked", true);
});
$("#unSelectAll").click(function() {
    $("[id=ckColor]").prop("checked", false);
});

<button id="zfbPay" onclick="zfbPay()">支付宝支付</button>
<button id="wxPay">微信支付</button>

<script>
    // 自定义一个js函数, 前期绑定click事件
    function zfbPay() {
        // 1.把按钮消失
        // $("#zfbPay").hide();

        // 2.把按钮禁止, attr, prop
        $("#zfbPay").attr("disabled", true);
        $("#zfbPay").text("您支付成功, 不要再次点击, 请稍后");
    }
    // 后期绑定, 利用jQuery代码给上面的按钮加一个事件
    $("#wxPay").click(function() {
        //匿名函数，好处私有，其他线程无法访问，多线程安全
        // $("#wxPay").hide();
        //$(this).hide(); //$(this)代表当前按钮, 微信按钮
        $(this).text("您支付成功, 不要再次点击, 请稍后");
    });
</script>

🔺json字符串和js的json对象的相互转换

//京东商品价格地址：https://p.3.cn/prices/mgets?skuIds=J_100009077449
//js可以单引号括起来双引号, 或者双引号中单引号括起来
var jsonstr = '[{"p":"5999.00","op":"5999.00","cbf":"0","id":"J_100009077449","m":"6499.00"}]';
console.log(jsonstr);

//js提供JSON工具, 对json字符串进行转换, js对象
var jsonobj = JSON.parse(jsonstr);
console.log(jsonobj);
console.table(jsonobj);

//把js对象转换成json字符串
var jsonstr2 = JSON.stringify(jsonobj);
console.log(jsonstr2);

jQuery的ajax请求

<span id="id"></span>
<span id="price"></span>

$.ajax({
    async: true,
    type: "POST",
    url: "https://p.3.cn/prices/mgets",
    data: {
        "skuIds": "J_100009077449"
    },
    contentType: "application/json;charset=utf-8;",
    dataType: "jsonp",
    success: function(data) {
        console.log(data);
        //[{p: "5999.00", op: "5999.00", cbf: "0", id: "J_100009077449", m: "6499.00"}]
        console.log(data[0].p);
        var price = data[0].p;
        console.log(data[0].id.substring(2));
        var id = data[0].id.substring(2);
        $("#price").text(price).css("color", "blue");
        $("#id").text(id).css("color", "red");
    },
    error: function(e) {
        console.log(e.status);
        console.log(e.responseText);
    }
})

//var username = document.getElementById("username");
console.log($("#username").val());

// var msg = document.getElementsByClassName("msg")[0];
// console.log(msg.innerText);
console.log($(".msg").text());
// msg.innerHTML = "<font color='red'>登录成功, 欢迎: " + username.value + "</font>";
$(".msg").text("登录成功, 欢迎: "+$("#username").val()).css({"color":"red","background-color":"green","width":"170px","height":"25px","text-align":"center"});

/* 点击提交按钮触发事件 doSubmit(), 自定义一个函数 */
function doSubmit() {
    //获取页面的用户名, 获取数组的第一个元素
    //var username = document.getElementsByName("username")[0];
    //获取唯一, html规范, 标签的id属性, 在页面声明时, 必须唯一
    var username = document.getElementById("username");
    console.log(username.value);

    //<div class="msg">登录成功</div>
    var msg = document.getElementsByClassName("msg")[0];
    console.log(msg.innerText);
    //msg.innerText = "登录成功, 欢迎: "+username.value;
    msg.innerHTML = "<font color='red'>登录成功, 欢迎: " + username.value + "</font>";
}

<ul>
    <li><a href="https://www.w3school.com.cn/" target="_blank">aw3school</a></li>
    <li><a href="https://www.runoob.com/" target="_blank">菜鸟教程</a></li>
    <li><a href="https://www.cnblogs.com/" target="_blank">博客园</a></li>
    <li><a href="https://www.youkuaiyun.com/" target="_blank">优快云</a></li>
    <li><a href="https://segmentfault.com/" target="_blank">思否</a></li>
</ul>
<style>
    ul {
        list-style: none;
    }

    li {
        float: left;
        margin-right: 10px;
        /* border: 1px black solid; */
        background-color: blueviolet;
        padding: 5px 10px;
        color: aquamarine;
        border-radius: 10px;
    }

    li:hover {
        background-color: #0ff;
    }

    a {
        text-decoration: none;
        color: #fff;
    }
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xROItoO4-1616219936327)(D:\Users\86155\Desktop\QQ截图20210320091239.png)]

//var car = new Object();		//标准写法
var car = {}; //简写
//var car;						//语法错误

car.name = "保时捷 718 Cayman T";
car.color = "红色";
car.price = 641000;

console.log(car);
console.log(car.name + car.color + car.price);
console.log(car["name"] + car["color"] + car["price"]);

console.log(car);
console.log(car.price);

//定义对象并初始化
var person = {
    firstName: "某", //定义属性
    lastName: "某某",
    age: 18,
    fullName1: function() { //定义方法
        return this.firstName + " " + this.lastName;
    }
};
console.log(person);

person.age = 16; //动态修改属性
person.address = "北京"; //动态添加属性，多么灵活
console.log(person);

//动态添加方法
person.fullName2 = function() {
    return this.firstName + " " + this.lastName;
}
console.log(person);
console.log(person.fullName2());
console.log(person.fullName1());

//重复声明不会报错，而直接把前面的都干掉
var person = {
    name: "陈子枢"
};
console.log(person);
console.log(person.age);

js定时器和时间

<body onload="window.setInterval(run, 1000);">
    时钟：
    <div id="enclock" style="color: red;"></div>
    <div id="cnclock" style="color: blue;"></div>
</body>

<script type="text/javascript">
function run() {
    var date = new Date();

    var year = date.getFullYear(); //getYear()缺陷已经废除
    var month = date.getMonth() + 1; //从0开始
    var day = date.getDate();
    var week = date.getDay(); //星期

    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();

    document.getElementById('enclock').innerHTML = new Date();
    document.getElementById('cnclock').innerHTML = year + '年' + month + '月' + day + '日' + ' ' + hour + '时' + minute +
        '分' + second + '秒';
}
</script>

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YpSUgIBC-1616219936328)(D:\Users\86155\Desktop\QQ截图20210320092439.png)]

<style>
    div{
        margin: 20px;
    }
    /* 默认情况下lable和span标签设置宽度是无效的 block块方式会换行,所以设置为inline-block宽度才有效 */
    label{
        width: 80px;
        display: inline-block;
    }
</style>
<script>
    //展示登录成功信息
    function doLogin(){
        var msg = document.getElementById("msg");
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        alert( "用户名："+username.value+"，密码："+password.value );
        msg.innerHTML = "<font color='red'>登录成功</font><div>欢迎："+username.value+"</div>";
    }

    //获取页面所有的input框，是text和password框，内容=空串
    function doClear(){
        var inputs = document.getElementsByTagName("input");
        for(var i=0; i<inputs.length; i++){
            if(inputs[i].type=='text' || inputs[i].type=='password'){
                inputs[i].value = '';
            }
        }
    }
</script>
<div id="msg"></div>
<section>
    <fieldset>
        <legend>登录</legend>
        <div>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" />
        </div>
        <div>
            <label for="password">密码</label>
            <input type="text" id="password" name="password" />
        </div>
        <div>
            <input type="submit" id="btnLogin" value="登录" onclick="doLogin()" />
            <input type="button" id="btnClear" value="清除" onclick="doClear()" />
        </div>
    </fieldset>
</section>
<script>
    //后期绑定，给按钮增加onclick事件
    var btnLogin = document.getElementById('btnLogin');
    btnLogin.addEventListener('click', function() {
        doLogin();
    });
    /* jquery方式:后期绑定点击事件
    $("btnLogin").click(function(){
    	doLogin();
    });
    */
    var btnClear = document.getElementById('btnClear');
    btnClear.addEventListener('click', function() {
        doClear();
    })
</script>

html图片的插入

<style>
    div {
        border: 1px solid red;
        width: 500px;
        height: 496px;
        background-image: url(images/zly1.jpg);
        border-radius: 250px;
    }
    img {
        /* display: block; */
        border-radius: 250px;
    }
</style>
<div></div>
<img src="images/zly.jpg" />

html音视频的插入

<h1>播放音乐，src指向音乐文件，controls 播放音乐控制台</h1>
<audio src="audio/1.flac" controls="controls"></audio>
<h1>播放图像</h1>
<video src="video/1.mp4" height="400" controls="controls"></video>

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1MYM39Rg-1616219936329)(D:\Users\86155\Desktop\QQ截图20210320094722.png)]

css拉伸动画

<style>
    .transitionbox {
        width: 500px;
        height: 500px;
        background-color: red;
        background-image: url(images/zly.jpg);
        border-radius: 100px;
        /* 
        拉伸效果的动画
        transition 拉伸动画
        width 拉宽, 动画持续时间1s
         */
        transition: width 1s;
        /* 以相对位置, 元素才能动起来 */
        position: relative;
    }

    /* 
    拉伸效果不是使用关键帧方式触发动画执行,利用鼠标移动画体至少来触发
    注意写法,样式之后:hover(鼠标移入触发),不能有空格
     */
    .transitionbox:hover {
        width: 700px;
    }
</style>
<div class="transitionbox"></div>

css线性渐变

<style>
    #grad1 {
        height: 200px;
        background-color: red;
        /* 线性渐变, 设置起始颜色和结束颜色 */
        background-image: linear-gradient(#e66465, #9198e5);
    }
</style>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaxoWQ2t-1616219936331)(D:\Users\86155\Desktop\QQ截图20210320100523.png)]

css旋转动画

<style>
    div {
        /* 横向居中0上下，auto左右自动 */
        margin: 0px auto;
    }

    .earth-rotation {
        width: 310px;
        height: 310px;
        /* 加背景图 */
        background-image: url(images/earth.png);
        border-radius: 180px;
        /* 
        动画，旋转360 
        动画的轨迹：线型 linear;动画延时开始时间：0s;infinite 一直循环播放动画
        */
        animation: earth-rotation 5s linear 0s infinite;
    }

    /* 
    变形动画 transform，rotate旋转，旋转单位度 deg;动画从0deg开始到360deg结束，刚好一周，反复播放
    */
    @keyframes earth-rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* 
    鼠标移入时，暂停动画播放，地球就停下来，移出继续运行 
    animation-play-state 播放状态 paused 暂停
    */
    .earth-rotation:hover {
        animation-play-state: paused;
    }
</style>
<div class="earth-rotation"></div>

效果

 动画，旋转360 
    动画的轨迹：线型 linear;动画延时开始时间：0s;infinite 一直循环播放动画
    */
    animation: earth-rotation 5s linear 0s infinite;
}

/* 
变形动画 transform，rotate旋转，旋转单位度 deg;动画从0deg开始到360deg结束，刚好一周，反复播放
*/
@keyframes earth-rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 
鼠标移入时，暂停动画播放，地球就停下来，移出继续运行 
animation-play-state 播放状态 paused 暂停
*/
.earth-rotation:hover {
    animation-play-state: paused;
}

```

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LINJf2Q9-1616219936332)(D:\Users\86155\Desktop\css旋转.gif)]