zoukankan html css js c++ java

day51 JS基础

复习

1.字体图标
用i标签, 设置类名, 与第三方字体图标库进行图标匹配
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<i class="fa fa-shopping-cart cart-tag"></i>
.cart-tag {
	font-size: 20px;
}

2.盒子的显隐
.box {
	height: 0;
	overflow: hidden;
}
display: none|block; 不能动画|隐藏是不占位|显示时占位
opacity: 0|1; 能动画|隐藏显示均占位
要对显隐的盒子做定位处理, 目的是让盒子在隐藏显示状态下,都脱离文档流,不影响其他盒子布局

3.overflow: auto | scroll | hidden

4.伪类设计边框 => 不占位
.box {
	 200px;
	height: 200px;
	position: relative;
}
.box:after {
	content: "";
	
	 1px;
	height: 180px;
	background: black;
	
	position: absolute;
	top: 10px;
	left: 0;
}

5.盒子阴影
/*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/
box-shadow: 220px 0 0 20px red, 0 -220px 0 -20px blue, ...;

6.2d形变
transform: 旋转deg | 偏移px | 缩放
旋转:    transform: rotateZ(360deg);
偏移:    transform: translateX(300px) translateY(-300px);
缩放:    transform: scale(2, 0.5)

顺序可能导致过程不一样: 
transform: translateX(300px) rotateZ(360deg);
transform: rotateZ(360deg) translateX(300px);

js 导读

js属于编写运行在浏览器上的脚本语言

js采用ECMAScript语法
操作BOM: 浏览器对象模型
操作DOM: 文档对象模型
js属性名书写标准按照大驼峰体来书写

js引入(*)

<style>
#box, #wrap, #temp, #res {
     200px;
    height: 200px;
    background-color: red;
    margin-top: 10px;
}
</style>
<!--1.行间式: 就是代码块书写在全局事件属性中-->
<!--this就是激活该代码块(脚本)的页面标签(页面元素对象)-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>

<div id="temp"></div>
<!--2.内联式-->
<script>
    // id为标签的唯一标识, 使用可以识别到html的具体标签
    temp.onclick = function () { // 完成某一项功能
        this.style.width = "400px";  // this => temp
    }
</script>

<div id="res"></div>
<!--3.外联式-->
<script src="js/1.js">
// js/1.js
res.onclick = function () {  // res点击会触发一个功能
    this.style.height = "100px";  // this => res
    this.style.backgroundColor = "yellow";
    this.style.borderRadius = "50%";
}


js中用//表示单行注释,/**/表示多行注释

js选择器

<div id='box' class="bb"></div>
<div class='box1 bb'></div>
<div class='box1 bb'></div>
<script>
// getElement系列
// box
var box = document.getElementById('box');
// [] | [.box1] | [.box1, ..., .box1]
var boxs = document.getElementsByClassName('box1');  
// [] | [div] | [div, ..., div]    
var divs = document.getElementsByTagName('div');  
    
// 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.)
</script>

<script>
// 只能获取检索到的第一个满足条件的标签(元素对象)
var div = document.querySelector('.bb');  
// 获取的是满足条件的有双类名的.box1.bb
var divs = document.querySelectorAll('body .box1.bb');
    
// 总结: 参数采用的就是css选择器语法
</script>
用内联式写js遇到相同id的对象,都无法处理对象,因为无法找到唯一的对象
getElement能获取到相同id对象的第一个内容

例子:
<body>
    <div id="box"></div>
    <!--虽然id可以重复, 但是js中就无法唯一标识识别, 所以约定俗成标签id名一定不能重复-->
    <div id="box"></div>

    <div class="box1"></div>
    <div class="box1"></div>

    <div class="box2">1</div>
    <div class="box2">2</div>
</body>
<script>
    // 事件绑定这函数的地址, 使用激活事件, 就会通过函数地址找到函数功能体, 完成指定功能
    // 页面如果有两个id="box", 一个都匹配不上
    // box.onclick = function () {
    //     this.style.borderRadius = "50%";
    // }


    // document对象

    // getElement系列选择器
    // 能获得到第一个id="box", 但是第二个永远取不到, 所以id还是不能重复
    document.getElementById('box').onclick = function () {
        this.style.borderRadius = "50%";
    }


    // js变量的定义
    // 关键字(var) 变量名 = 变量值;
    var num = 10;
    // 如何查看变量名
    var a = num;

    // print(num); // 调用浏览器使用打印机

    // 弹出框查看(*)
    // alert(num);
    // alert(a);

    // 浏览器控制台查看(***)
    // console.log(num);
    // console.log(a);

    // 将内容书写到页面(*)
    // document.write(num);
    // document.write(a);

    // 断点调试(***)
    // 断点调节(debug)
    var box = document.getElementById('box');
    // 上面和下面获取的都是第一个box, box的点击事件最终绑定到的是改变背景颜色的函数地址
    box.onclick = function () {
        this.style.backgroundColor = "green";
    }
    // 通过类名 => 类名可以重复 => 获取的结果是数组(列表)
    var boxs = document.getElementsByClassName('box1');
    console.log(boxs);
    boxs[0].onclick = function () {
        this.style.backgroundColor = 'blue'
    }

    boxs[1].onclick = function () {
        this.style.backgroundColor = 'pink'
    }
    // 通过标签名 => 标签名 => 获取的结果是数组(列表)
    var divs = document.getElementsByTagName('div');
    console.log(divs);
    divs[1].ondblclick = function () {
        divs[1].style.borderRadius = "50%";
    }

</script>

<script>
    // 参数: css语法的选择器
    var box2s = document.querySelectorAll('body .box2');
    console.log(box2s);

    var box2 = document.querySelector('body .box2');
    console.log(box2);
</script>

js变量的定义
关键字(var) 变量名 = 变量值
var sum = 10;

queryselectorall 输入css的选择器格式

事件

var box = document.querySelector('.box');

// 元素对象.事件名 = 函数
box.onclick = function() {
    // 具体功能代码块; this代表就是激活该事件的元素对象
    this.style.color = 'red'; // 将box的字体颜色修改为红色
}

操作页面文档(*****)

// 1. 通过选择器获取页面元素对象(指定的标签)
// 2. 为该对象绑定事件
// 3. 通过事件中的功能操作元素对象
// i) 修改内容: innerText | innerHTML
// ii) 修改样式
// iii) 修改类名

var box = document.querySelector('.box'); // 获取页面元素
box.onclick = function () {  // 绑定事件
    // 修改内容
    // this.innerText = "innerText";  // 不能解析html标签
    // this.innerHTML = "<i>innerHTML</i>";  // 可以解析html标签

    // 修改样式 => 修改的是行间式 => 优先级高于所有内联外联样式(没有设置!important)
    // this.style.color = "green";
    // this.style.fontSize = "12px";

    // 修改类名
    // this.className = "box1";  // 直接修改类名, 会丢失之前类名下的属性们
    // 在原类名基础上添加类型
    this.className += " box1"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格
    // 清除类名
    this.className = "";  // 将类名等于空字符串就是置空类名
}

例子:
<style>
    .box {
         200px;
        height: 200px;
        background-color: orange;
        font: 900 30px/200px "STSong";
        text-align: center;
        color: red!important;
        margin: 0 auto;
    }
    .box.box1 {
        color: greenyellow!important;
        font-size: 12px;
        font-weight: lighter;
    }
</style>
<body>
    <div class="box">文本内容</div>
</body>
<script>
    // 1. 通过选择器获取页面元素对象(指定的标签)
    // 2. 为该对象绑定事件
    // 3. 通过事件中的功能操作元素对象
    // i) 修改内容: innerText | innerHTML
    // ii) 修改样式
    // iii) 修改类名

    var box = document.querySelector('.box');
    box.onclick = function () {
        // 修改内容
        // this.innerText = "innerText";
        // this.innerHTML = "<i>innerHTML</i>";  // 可以解析html标签

        // 修改样式 => 修改的是行间式
        // this.style.color = "green";
        // this.style.fontSize = "12px";

        // 修改类名
        // this.className = "box1";  // 直接修改类名, 会丢失之前类名下的属性们
        // 在原类名基础上添加类型
        this.className += " box1";
        // var cName = this.className;
        // console.log(cName);
        // cName = cName + " " + "box1";
        // console.log(cName);
        // this.className = cName;
        // 清除类名
        this.className = "";
    }

</script>

计算后样式

内联或外联设置的(行间式设置getComputedStyle也能获取到)
.box {
    font-size: 100px;
}

// 如何获取计算后样式
// getComputedStyle(元素对象, 伪类).属性名
var box = document.querySelector('.box');
var ftSize = getComputedStyle(box, null).fontSize;
console.log(ftSize);  // 100px

例子:
<style>
    /*计算后样式: 内联式和外联式书写的样式都叫计算后样式*/
    .box {
         200px;
        height: 200px;
        background-color: orange;
        font-size: 100px;
    }
</style>

<div class="box" style="font-size: 30px">12345</div>
<div class="box">12345</div>

<script>
// 如何获取提取设置好的样式属性值
var box = document.querySelector('.box');
var ftSize = box.style.fontSize;  // 这种方式操作的永远是行间式
console.log(">>>>>>>>>>>>>>>>" + ftSize);

// 如何获取计算后样式
// getComputedStyle(元素对象, 伪类).属性名
ftSize = getComputedStyle(box, null).fontSize;
console.log("=================" + ftSize);

</script>

JS基础语法

数据类型
// Number: 数字类型
var a1 = 10;
var a2 = 3.14

// String: 字符串
var s1 = "123";
var s2 = '456';

// undefined: 未定义
var u1;
var u2 = undefined;

// Boolean: 布尔
var b1 = true;
var b2 = false;

// typeof() 来查看类型

例子:
// 1.定义变量
var num = 10;
var s = "hello js";
console.log(num, "<<>>", s);
console.log("%d  %s", num, s);
// 将字符串赋值给页面元素对象
box.innerText = s;

//命名规范：
// 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
// 区分大小写
// 不能出现关键字及保留字
// var var = 30;  // 出错

// 数据类型
// 值类型
// 数字类型 | 字符串类型 | 未定义类型 | 布尔类型
// 用typeof()函数可以查看变量类型

引用类型

// Object
var obj = {};

// Function
var func = function(){}

// Null
var n = null;

例子:
<script>
    // 1.定义变量
    var num = 10;
    var s = "hello js";
    console.log(num, "<<>>", s);
    console.log("%d  %s", num, s);
    // 将字符串赋值给页面元素对象
    box.innerText = s;

    //命名规范：
    // 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
    // 区分大小写
    // 不能出现关键字及保留字
    // var var = 30;  // 出错

    // 数据类型
    // 值类型
    // 数字类型 | 字符串类型 | 未定义类型 | 布尔类型
    // 用typeof()函数可以查看变量类型

    // 1.Number
    var a = 10;
    console.log(a, typeof(a));
    a = 3.14;
    console.log(a, typeof(a));

    // 2.String
    a = '123';
    console.log(a, typeof(a));
    a = "456";
    console.log(a, typeof(a));

    // 3.undefined
    var b;
    console.log(b,typeof(b));
    a = undefined;
    console.log(a, typeof(a));

    // 4.boolean
    a = true;
    console.log(a, typeof(a));
    b = false;
    console.log(b, typeof(b));


    // 引用类型
    // 5.Function
    a = function () {
        return 0;
    }
    console.log(a, typeof(a));


    // 6.Object => 当做字典
    a = {
        name: "Bob",
        age: 18
    }
    console.log(a, typeof(a));

    // 7.Null => 空对象
    a = null;
    console.log(a, typeof(a));


    // 其他
    // 数组对象
    a = new Array(1, 2, 3, 4, 5);
    console.log(a, typeof(a));
    a = [5, 4, 3, 2, 1];  // 语法糖
    console.log(a, typeof(a));

    // 时间对象 (cookie)
    a = new Date(); // 当前时间
    // a = new Date("2019-3-1 12:00:00");  // 设定的时间
    console.log(a, typeof(a));
    var year = a.getFullYear();
    console.log(year)
    console.log(a.getDay())  // 周几
    console.log(a.getMonth())  // 月份(从0)
    console.log(a.getDate())  // 几号

    // 正则
    var re = new RegExp('\d{3}', 'g');
    var res = "abc123abc123".match(re);
    console.log(res);

    re = /d{2}/g;
    res = 'a1b23c456'.match(re);
    console.log(res);

    re = /[abc]/gi;
    res = 'aBc'.match(re);
    console.log(res);
    // 总结:
    // 1.正则 /正则语法/
    // 2.参数g 全文匹配
    // 3.参数i 不区分大小写


    // 数组与对象(字典)的使用
    var arr = [3, 5, 2, 1, 4];
    console.log(arr[2]);

    var dic = {
        "name": "Bob",
        age: 18,
        "little-name": "b"
    }

    console.log(dic['name']);
    console.log(dic['age']);
    console.log(dic.name);
    console.log(dic.age);
    console.log(dic["little-name"])
    // dic中所有的key都是string类型, value可以为任意类型
    // dic中key可以通过中括号及.语法访问值,但key不满足js命名规范时,只能使用中括号语法

</script>

小米商城导航栏例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小米导航栏</title>
    <style>
        body, ul, h1, h3 {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a {
            text-decoration: none;
            color: black;
        }
        .nav {
            /*background-color: pink;*/
        }
        .wrapper {
             1226px;
            margin: 0 auto;
        }
        .wrapper:after {
            content: "";
            display: block;
            clear: both;
        }
        h1, .nav-list {
            float: left;
        }
        h1 {
            padding-top: 22px;
        }
        h1 a {
            display: block;
             55px;
            height: 55px;
            text-indent: -9999px;
            background: url("img/logo.png");
        }
        .nav-list {
            margin-left: 160px;
        }

        .nav .list-li {
            float: left;
            padding: 0 10px;
            line-height: 100px;
        }
        .nav-list .list-li:hover {
            cursor: pointer;
        }
        .nav-list .list-li:hover a {
            color: #ff6700;
        }
        
        .nav {
            /*辅助list-ul*/
            position: relative;
        }
        .nav .list-ul {
            /*display: none;*/
             100vw;
            height: 0px;
            /*height: 200px;*/
            overflow: hidden;
            background-color: orange;
            /*需要参考nav来定位*/
            position: absolute;
            top: 100px;
            left: 0;
            transition: .3s;
        }
        .nav .list-li:hover ~ .list-ul {
            height: 200px;
        }
        .nav .list-ul:hover {
            height: 200px;
        }
    </style>
    <style>
        .list-ul li {
            float: left;
        }
        .list-ul a {
            display: block;
             160px;
            height: 200px;
            background-color: red;
            margin-right: 1px;
            position: relative;
        }
        .list-ul a h3 {
             50px;
            border: 1px solid #ff6700;
            font-size: 16px;
            font-weight: normal;
            text-align: center;
            margin-left: 55px;
            position: absolute;
        }
        .list-ul a img {
             160px;
            margin: 35px 0 0;
        }
        .list-ul a p {
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="wrapper">
            <h1>
                <a href="">小米官网</a>
            </h1>
            <ul class="nav-list">
                <li class="list-li">
                    <a href="">小米手机</a>
                </li>
                <li class="list-li">
                    <a href="">红米</a>
                </li>
                <li class="list-li">
                    <a href="">电视</a>
                </li>
                <li class="list-li">
                    <a href="">笔记本</a>
                </li>
                <li class="list-ul">
                    <ul class="wrapper">
                        <li>
                            <a href="">
                                <h3>新品</h3>
                                <img src="" alt="">
                                <p>小米 MIX3</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h3>新品</h3>
                                <img src="" alt="">
                                <p></p>
                            </a>
                        </li>
                    </ul>

                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    var datas = [ // 该数组对应的是 小米 红米 电视 笔记本 (list-li们)
        [ // 该数组对应的是 "小米" 悬浮显示商品展示的列表 (.list-ul下的ul)
            {  // list-ul 下的第一个 li下的 h3, img, p数据
                h3: true,
                img: "img/xmsj3.png",
                p: "小米 MIX3"
            },
            {  // list-ul 下的第二个 li下的 h3, img, p数据
                h3: false,
                img: "img/xmsj6.png",
                p: "小米8 青春版"
            }
        ],
        [ // 该数组对应的是 "红米" 悬浮显示商品展示的列表 (.list-ul下的ul)
            // 和 "小米" 悬浮的显示的标签是公用的, 变得只是数据
            {  // list-ul 下的第一个 li下的 h3, img, p数据
                h3: false,
                img: "img/xmsj3.png",
                p: "红米 123"
            },
            {  // list-ul 下的第二个 li下的 h3, img, p数据
                h3: true,
                img: "img/xmsj6.png",
                p: "红米 456"
            }
        ],
        [
            // 电视
        ],
        [
            // 笔记本
        ]
    ]

    // 小米 红米 电视 笔记本们的 .list-li li们
    var listLis = document.querySelectorAll('.nav-list .list-li');

    // 小米悬浮事件
    listLis[0].onmouseenter = function () {
        // 拿到 "小米" 悬浮对应的显示商品展示的列表数据
        var arr = datas[0];

        // list-ul wrapper下的第一个a下的h3, img, p
        var h3 = document.querySelector('.list-ul li:nth-child(1) h3');
        var img = document.querySelector('.list-ul li:nth-child(1) img');
        var p = document.querySelector('.list-ul li:nth-child(1) p');
        // "小米" 悬浮对应的显示商品展示的列表中第一个字典
        var dic1 = arr[0];
        if (!dic1.h3) {  // 通过数据的布尔值决定是否是新品, h3是否显示
            h3.style.display = "none";
        } else {
            h3.style.display = "block";
        }
        img.setAttribute('src', dic1.img);  // 为img标签的全局属性src设置属性值
        p.innerText = dic1.p;  // 设置p标签的内容

        // list-ul wrapper下的第二个a下的h3, img, p
        h3 = document.querySelector('.list-ul li:nth-child(2) h3');
        img = document.querySelector('.list-ul li:nth-child(2) img');
        p = document.querySelector('.list-ul li:nth-child(2) p');
        // "小米" 悬浮对应的显示商品展示的列表中第一个字典
        var dic2 = arr[1];
        if (!dic2.h3) {
            h3.style.display = "none";
        } else {
            h3.style.display = "block";
        }
        img.setAttribute('src', dic2.img);
        p.innerText = dic2.p;


    }
    // 红米悬浮事件
    listLis[1].onmouseenter = function () {
        // 拿到 "红米" 悬浮对应的显示商品展示的列表数据
        var arr = datas[1];

        var h3 = document.querySelector('.list-ul li:nth-child(1) h3');
        var img = document.querySelector('.list-ul li:nth-child(1) img');
        var p = document.querySelector('.list-ul li:nth-child(1) p');
        var dic1 = arr[0];
        if (!dic1.h3) {
            h3.style.display = "none";
        } else {
            h3.style.display = "block";
        }
        img.setAttribute('src', dic1.img);
        p.innerText = dic1.p;


        h3 = document.querySelector('.list-ul li:nth-child(2) h3');
        img = document.querySelector('.list-ul li:nth-child(2) img');
        p = document.querySelector('.list-ul li:nth-child(2) p');
        var dic2 = arr[1];
        if (!dic2.h3) {
            h3.style.display = "none";
        } else {
            h3.style.display = "block";
        }
        img.setAttribute('src', dic2.img);
        p.innerText = dic2.p;
    }
    listLis[2].onmouseenter = function () {
    }
    listLis[3].onmouseenter = function () {
    }


</script>
</html>

查看全文

相关阅读:
关于findViewById返回空指针的错误
 android客户端向服务器发送图片和文字，类似于发微博。能用json格式发送吗？
nodejs 学习资料大全
 篇章三:[AngularJS] 使用AngularCSS動態載入CSS
篇章二:[AngularJS] 使用AngularAMD動態載入Service
篇章一:[AngularJS] 使用AngularAMD動態載入Controller
Angular 资料大集合
 js-音乐播放器，播放|暂停|滑块的功能
 JS-以鼠标位置为中心的滑轮放大功能demo1
使用 Electron 构建桌面应用（拖动控制篇）

原文地址：https://www.cnblogs.com/shanau2/p/10305912.html

最新文章
无限极分类
 PHP无限极分类的几种方法
 最大子序列
 分治法
 数学归纳法
 AVL数
 堆
 二叉搜索树
 完全二叉树
 MEF example code