前端 -- 易忘 -- 易错 -- 知识点 -- (1)

最新推荐文章于 2024-09-10 14:15:01 发布

LC-name

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量226

点赞数

本文链接：https://blog.csdn.net/qq_45367843/article/details/105292767

版权

一. HTML

二. CSS

去除li标签前的小圆点： list-style: none;
去掉a标签的下划线： text-decoration：none;
去除图片底边3像素问题：

.img{
	/* 去除图片底边3像素距离 */
           vertical-align: top;
}

css的光标样式：

.target{
	/* 显示一只手 */
	cursor: pointer;
	/* 此光标指示文本 */
	cursor: text;
	/* 此光标指示程序正忙(通常是一只表或沙漏) */
	cursor: wait;
	/* 此光标指示可用的帮助(通常是一个问号或一个气球) */
	cursor: help;
}

height: 100%; 和 height:auto;的区别
案例：垂直滚动条content盒子高度的设置。
height:100%; 与父级元素有关
height:auto; 与子元素有关

6 首行文本缩进: text-indent:

三. JS

函数的参数和字符串的区别
形参不能加引号（“ ”），否则就会变成字符串了！！！
变量不加引号，不是变量的都得加引号！！！

// 正确写法 将形参src 拼接到语句中
 function changePic(src) {
 	return document.body.style.backgroundImage = "url('"+ src + "')";
}

// 错误写法 此时形参src被变成了字符串 要对其进行拼接操作
function changePic(src) {
  return document.body.style.backgroundImage = "url(src)";
}

window.onlode()的执行时间;
用于在网页完成加载完毕后（包括图片,CSS文件等等）立即执行的操作，执行代码脚本。。。
js三要素
事件源事件事件处理函数
onmouseover 、onmouseout 与 onmouseenter 、onmouseleave的区别
冒泡：当自己接受一个事件时会将其传给父级。。。
前者会发生冒泡，而后者不会发生冒泡事件！！！
checked判断是否被选中

//案例 实现 全选 清除 反选 就应用到了checked判断是否被选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
        window.onload = function () {
            var ins = document.getElementById("box").getElementsByTagName("input");

            function $(id) {
                return document.getElementById(id)
            }

            // 全选
            $("all").onclick = function () {
                for (let i = 0; i < ins.length; i++) {
                    ins[i].checked = true;                    
                }
            };

            // 清除所选项
            $("clear").onclick = function () {
                for (let i = 0; i < ins.length; i++) {
                    ins[i].checked = false;                    
                }
            }

            // 进行反选
            $("change").onclick = function () {
                for (let i = 0; i < ins.length; i++) {
                    if(ins[i].checked == true) {
                        ins[i].checked = false;
                    } else {
                        ins[i].checked = true;
                    }                    
                }
            }
        }
    </script>
</head>
<body>
    <button id="all">全选</button>
    <button id="clear">清除</button>
    <button id="change">反选</button>
    <div id="box">
        <ul>
            <li>选项<input type="checkbox" name=></li>
            <li>选项<input type="checkbox" name=></li>
            <li>选项<input type="checkbox" name=></li>
            <li>选项<input type="checkbox" name=></li>
            <li>选项<input type="checkbox" name=></li>
            <li>选项<input type="checkbox" name=></li>
            <li>选项<input type="checkbox" name=></li>
            <li>选项<input type="checkbox" name=></li>
            <li>选项<input type="checkbox" name=></li>
            <li>选项<input type="checkbox" name=></li>
        </ul>
    </div>
</body>
</html>

js中创建元素（案例: 微博发布）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿写微博发布</title>
    <style>
        .box{
            margin: auto;
            width: 600px;
            height: 300px;
            border: 1px black solid;
            box-shadow: 5px 5px plum ;
        }
        #txt{
            resize: none;
        }
        .box a{
            float: right;
        }
    </style>
    <script>
        window.onload = function () {
            var txt = document.getElementById("txt");
            var btn = document.getElementById("btn");
            // 通过creatElement创建一个ul元素
            var ul = document.createElement("ul");
            // 查找btn的父级元素 然后添加其孩子ul元素
            btn.parentElement.appendChild(ul);

            btn.onclick = function () {
                if(txt.value == ""){
                    alert('请输入内容');
                    return false
                }
                // 创建一个li元素
                var li = document.createElement("li");
                li.innerHTML = txt.value + "<a href = '#'>删除</a>";
                var lis = ul.children;
                if(lis == 0) {
                    ul.appendChild(li);
                } else {
                    // 将一个元素插入到特定的元素之前
                    ul.insertBefore(li,lis[0])
                }
                txt.value = "";
                var as = document.getElementsByTagName("a");
                for(var i = 0;i < as.length;i++) {
                    as[i].onclick = function () {
                        // ul移除孩子节点  当前节点的父节点
                        ul.removeChild(this.parentNode)
                    }
                } 
            }
        };
    </script>
</head>
<body>
    <div class="box">
        微博发布:<textarea id="txt" cols="60" rows="10"></textarea>
        <button id="btn">发布</button>
    </div>
</body>
</html>

js中的Date() 对象 (案例：日历的制作，以及倒计时制作)
js中使用Date对象表示时间，Date()是一个构造函数。

// 直接使用的话，是封装为当前代码执行的时间
var date = new Date();

// 设置一个指定的时间 2021年9月1日7点
var date = new Date("2021/9/1 7:00:00")

Date()中经常使用的方法:

// 获取一个月中的某一天（1 ~ 31）
date.getDate();

// 获取一周中的某一天（0 ~ 6），0表示周天
date.getDay();

// 从Date对象返回月份(0 ~ 11),0表示一月
date.getMonth();

// 从Data对象以四位数字返回年份
date.getFullYear();

// 返回1970年1月1日至今的毫秒数
date.getTime();

设置按钮是否允许被点击！！！

// 设置为按钮可以点击
按钮.disabled = false;

// 设置为按钮不可以点击
按钮.disabled = true;

window.location.href 的作用：
在当前页面打开href所对应的链接！！！
offsetLeft的使用：clientX 和 clientY的使用：screenX 和 screenY的使用：
（1）offsetLeft值跟offsetTop值的获取跟父级元素没关系，而是跟其上一级的定位元素如fixed,relative,absolute有关系，分别用于获取与上一个定位元素左边或上边的距离。
（2）clientX 和 clientY当鼠标的事件发生时，鼠标相对于浏览器x（y）轴的距离！
但是由于兼容性通常这样写

// 截取自点击鼠标跟随案例：
box.onclick = function(event) {
	 var evevt = evevt || window.event;
     endTop = evevt.clientY - box.offsetHeight / 2;
     endLeft = evevt.clientX - box.offsetWidth / 2;
}

（3）screenX 和 screenY当鼠标事件发生时鼠标相对于显示器屏幕X(Y)轴的位置。

遍历json的方式

    var json = {
        width: 200,
        height: 500,
        left:300
    }

    for (var k in json){
     	// k 遍历的是json 可以得到的是 属性
        console.log(k);
        // json[k] 得到 得是属性的值
        console.log(json[k]);
    }

JS中设置style
(1) target.style.left = xxx;
(2) target.style[“left”] = xxx; // 这种通常用于设置未知的注意 “ [] ” 内要是字符串。
JavaScript中闭包：
为什么要使用闭包？？？
因为作用域链中函数内部的变量不可以被外部使用，但是函数外部的变量可以被内部使用，因此引出了闭包的概念来解决
一. 闭包的作用：
(1) 可以让我们在全局作用域中访问局部变量。
(2) 可以让局部变量一直注入在内存当中。
二. 闭包的缺点：
会导致原有的作用域链不被释放，造成内存泄漏
三. 闭包面试题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包的基本使用</title>
</head>
<body>
    <script>
        function outerFun() { // 外部函数
            var a = 0; // 清空了
            function innerFun() { // 内部函数
                a++;
                alert(a);
            }
            return innerFun; // 这里值得关注 -- 这句话是整个闭包的核心
        }

        var obj = outerFun(); //
        obj(); // 1
        obj(); // 2

        // 非持久型变量神奇的保留在闭包最初定义（或创建）时得值

        var obj2 = outerFun();
        obj2(); // 1
        obj2(); // 2
    </script>
</body>
</html>