前端知识学习笔记-四（DOM、CSS操作）

已于 2024-04-10 09:31:57 修改
阅读量893 收藏 10
点赞数 29
分类专栏： 前端知识 文章标签： 前端 学习 笔记
于 2024-04-10 09:25:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/strugglegirl/article/details/135505819
版权

DOM概述

DOM 是JavaScript 操作网页的接口，全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(比如对元素增删内容)。
浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构(DOMTree)。所有的节点和最终的树状结构，都有规范的对外接口。
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是JavaScript 语法的一部分，但是DOM操作是JavaScript 最常见的任务，离开了DOM，JavaScript 就无法控制网页。另一方面JavaScript 也是最常用于DOM 操作的语言。
节点
DOM 的最小组成单位叫做节点 (ode)。文档的树形结构(DOM 树)，就是由各种不同类型的节点组成每个节点可以看作是文档树的一片叶子。

节点的类型有七种
Document: 整个文档树的顶层节点
DocumentType: doctype标签
Element: 网页的各种HTML标签
Attribute: 网页元素的属性 (比如class="right”Text: 标签之间或标签包含的文本
Comment:注释
DocumentFragment: 文档的片段

节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，层节点，下一层都是顶层节点的子节点，倒过来就像一棵树。
浏览器原生提供document节点，代表整个文档。

document
// 整个文档树

除了根节点，其他节点都有三种层级关系

父节点关系 (parentNode) : 直接的那个上级节点
子节点关系 (childNodes) : 直接的下级节点
同级节点关系(sibling) : 拥有同一个父节点的节点

Node.nodeType属性
不同节点的nodeType属性值和对应的常量如下：

文档节点 (document): 9，对应常量Node.DOCUMENT_NODE
元素节点 (element):1，对应常量Node.ELEMENT_NODE
属性节点 (attr) : 2，对应常量Node.ATTRIBUTE_NODE
文本节点(text):3，对应常量Node.TEXT_NODE
文档片断节点(DocumentFragment) :11，对应常量Node.DOCUMENT_FRAGMENT_NODE

document对象方法/获取元素

document.getElementsByTagName()
documentgetEementsByTagName 方法搜索 HTML标签名，返回符合条件的元素。它的返回值是一个类似数组对象可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。

<body>
    <div>hello world</div>
    <script>
        var divs=document.getElementsByTagName('div');
    </script>
</body>

如果传入"*"，就可以返回文档中所有 HTML 元素;

var a11Elements = documentgetElementsByTagName('*');

document.getElementsByClassName()
documen.getElementsByClassName 方法返回一个类似数组的对象(HTMLClecion 实例)，包括了所有 class 名字符合指定条件的元素，元素的变化实时反映在返回结果中。

> var elements = document.getElementsByClassName(names);

由于class 是保留字，所以JavaScript 一律使用className 表示CSS的cass参数可以是多个 coss ，它们之间使用空格分隔。

var elements = documentgetElementsByClassName( 'foo bar');

document.getElementsByName()
document.getElementsByName 方法用于选择拥有 name 属性的 HTML元素 (比如form、radio、img等)，返回个类似数组的的对象 ( NodeList 实例)，因为 name 属性相同的元素可能不止一个。

// 表单为 <form name="username"></form>
2 var forms = document.getElementsByName('username');

document.getElementByld()
document.getElementById 方法返回匹配指定id 属性的元素节点。如果没有发现匹配的节点，则返回null

var elem = document.getElementById('login');

注意，该方法的参数是大小写敏感的。比如，如果某个节点的id 属性是 man ，那么 document.getElementById(Main)将返回 null

document.querySelector()
document.querySeletor方法接受一个CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null

var e11 = document.queryselector(' .myclass');

document.querySelectorAll()
document.querySelectorAll 方法与 queySelector 用法类似，区别是返回一个 NodeList 对象，包含所有匹配给定选择器的节点.

var elementList = document.queryselectorA11(' .myclass');

document对象方法/创建元素

document.createElement()
document.createElement 方法用来生成元素节点，并返回该节点

var newDiv=document.createElement("div");

document.createTextNode()
document.createTextNode 方法用来生成文本节点( Te 实例)，并返回该节点。它的参数是文本节点的内容

var newP=document.createElement("p");//创建新的P标签
var newcontent=document.createTextNode("新内容");//创建P标签内容
newP.appendChild(newcontent);//把内容放到P标签中
document.body.appendChild(newP);//把新创建的P标签放到body中

document.createAttribute()
document.createAtribure 方法生成一个新的属性节点(Ar实例)，并返回它

var newP=document.createElement("p");//创建新的P标签
var newcontent=document.createTextNode("新内容");//创建P标签内容
var id=document.createAttribute("id");//创建id
newP.appendChild(newcontent);
id.value="新标题";//给id赋值
newP.setAttributeNode(id);//给新创建的P标签设置Id
document.body.appendChild(newP);
console.log(newP);

Element对象_属性

Element对象对应网页的 HTML 元素。每一个HTML元素，在 DOM 树上都会转化成一个Element节点对象
(以下简称元素节点)。
Element.id
Elementd 属性返回指定元素的d 属性，该属性可读写

// HTML 代码为 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"

Element.className
className 属性用来读写当前元素节点的 css 属性。它的值是一个字符串，每个 class之间用空格分割

// HTML 代码 <div class="one two three" id="myDiv"></div>
var div = document .getElementById('myDiv');
div.className

Element.classList

classLis: 对象有下列方法
add() : 增加一个 class。
remove() : 移除一个 class。
contains(): 检查当前元素是否包含某个 class。
toggle() : 将某个 class 移入或移出当前元素。

var div = document .getElementById('myDiv') ;
div.classList.add('myCssClass');div.classList.add('foo' ,'bar');
div.classList.remove('myCssClass');
div.classList.toggle('myCssClass'); // 如果 myCssClass 不存在就加入，否则移除
div.classList.contains('myCssClass'); // 返回 true 或者 false

Element.innerHTML
Elementinner.HTML属性返回一个字符串，等同于该元素包含的所有 HTML代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括HTML和body 元素.

 <div class="one two three" id="myDiv"></div>
 <script>
     var div = document .getElementById('myDiv');
     div.innerHTML = '<p>hello world</p>';
 </script>

Element.innerText
innerTex 和innerHTML 类似，不同的是innerText 无法识别元素，会直接染成字符串.

 div.innerHTML = '<p>hello world</p>';//hello world
 div.innerText='<p>hello world</p>';//<p>hello world</p>

Element获取元素位置

在这里插入图片描述
Element.clientHeight，Element.clientWidth

Element.clientHeight 属性返回一个整数值，表示元素节点的CSS
高度(单位像素)，只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。

除了元素本身的高度，它还包括 podding 部分，但是不包括 border 、 mrgin
。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。

Element.clientWidth
属性返回元素节点的CSS宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度.

document.documentElement 的 clientHeght 属性，返回当前视口的高度 (即浏览器窗口的高度)。
document.body 的高度则是网页的实际高度

// 视口高度（屏幕高度）
document.documentETement.clientHeight
//视口宽度（屏幕宽度）
document.documentElement.clientWidth

//网页总宽度
document.body.clientWidth
//网页总高度
document.body.clientHeight

CSS操作

HTML 元素的 style 属性
操作CSS 样式最简单的方法，就是使用网页元素节点的 setAmrbute 方法直接操作网页元素的 style 属性

<script>
 div.setAttribute(
'style' 
'background-color:red;' + ' border:1px solid black';
</script>
)

元素节点的 style 属性

var divstyle = document.queryselector('div').style;
divstyle.backgroundcolor = 'red";
divstyle.border = "1px solid black' ;
divStyle.width = '100px';
divstyle.height = '100px';
divStyle.fontsize = '10em;

cssText 属性

var divstyle = document.querySelector('div').style;
diystyle,cssText='background-color: red; border:solid black;height: 100px;width: 100px;';

事件处理程序

事件处理程序分为:
HTML事件处理
DOM0级事件处理
DOM2级事件处理

HTML事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <button onclick="clickHandler()">提交</button>
    <script>
        function clickHandler(){
            alert("是否确认提交");
        }
    </script>

</body>
</html>

DOM0级事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <button id="btn"">提交</button>
    <script>
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            alert("是否确认提交");
        }
    </script>

</body>
</html>

DOM2级事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <button id="btn"">提交</button>
    <script>
        var btn=document.getElementById("btn");
        btn.addEventListener("click",function(){
            alert("确认提交");
        })
    </script>

</body>
</html>

hetm事件（一般不选）
缺点：HTML和JS未分离
DOM0级事件
优点：HTML和JS分离
缺点：无法添加多个事件
DOM2级事件
优点：HTML和JS分离；可以添加多个事件
缺点：写起来麻烦

鼠标事件

鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些
click:按下鼠标时触发
dblclick:在同一个元素上双击鼠标时触发
mousedown:按下鼠标键时触发
mouseup:释放按下的鼠标键时触发
mousemove:当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
mouseenter:鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseleave:鼠标离开一个节点时触发，离开父节点不会触发这个事件
mouseover:鼠标进入一个节点时触发，进入子节点会再一次触发这个事件mouseout:鼠标离开一个节点时触发，离开父节点也会触发这个事件
wheel:滚动鼠标的滚轮时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <button id="btn1">单击</button>
    <button id="btn2">双击</button>
    <button id="btn3">鼠标按下</button>
    <button id="btn4">鼠标抬起</button>
    <button id="btn5">鼠标移动</button>
    <button id="btn6">鼠标进入</button>
    <button id="btn7">鼠标离开</button>
    <script>
        var btn1=document.getElementById("btn1");
        var btn2=document.getElementById("btn2");
        var btn3=document.getElementById("btn3");
        var btn4=document.getElementById("btn4");
        var btn5=document.getElementById("btn5");
        var btn6=document.getElementById("btn6");
        var btn7=document.getElementById("btn7");
        btn1.addEventListener('click',function(){
            alert("单击了");
        })
        btn2.addEventListener('dblclick',function(){
            alert("双击了");
        })
        btn3.addEventListener('mousedown',function(){
            alert("鼠标按下了");
        })
        btn4.addEventListener('mouseup',function(){
            alert("鼠标抬起了");
        })
        btn6.addEventListener('mouseenter',function(){
            alert("鼠标进入了");
        })
        btn7.addEventListener('mouseleave',function(){
            alert("鼠标离开了");
        })
        btn5.addEventListener('mousemove',function(){
            alert("鼠标移动了");
        })


    </script>

</body>
</html>

温馨提示 这些方法在使用的时候，除了DOM2级事件，都需要添加前缀 on

Event事件对象

Event对象属性
Event.Target
Event.type

Event.target
Event.target属性返回事件当前所在的节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <button id="btn">提交</button>

    <script>
       var btn = document.getElementById("btn");
       btn.onclick = function(){
                   event.target.innerHTML = "提交中";
       }


    </script>
</body>
</html>

Event.type
Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <button id="btn">提交</button>

    <script>
       var btn = document.getElementById("btn");
       btn.onclick = function(){
                   event.target.innerHTML = "提交中";
                   console.log(event.type)//click
       }
    </script>
</body>
</html>

Event对象方法
Event.preventDefault()
Event.stopPropagation()

Event.preventDefault
Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <a href="https://baidu.com" id="baidu">百度</a>
    <script>
       var baidu= document.getElementById("baidu");
       baidu.onclick=function(){
           event.preventDefault();//阻止跳转
       }
    </script>
</body>
</html>

Event.stopPropagation()
stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数

键盘事件

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件

keydown: 按下键盘时触发
keypress: 按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
okeyup:松开键盘时触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <input type="text" id="username">
    <input type="password" id="password">
    <script>
       var username = document.getElementById("username");
       username.onkeydown = function(e){
           console.log("按下了");
       }
       username.onkeyup = function(e){
           console.log(e.target.value);
       }
       username.onkeypress = function(){
           console.log("123");
       }
      var password = document .getElementById("password")
       password.onkeyup = function(e){
           //keyCode:代表每个按键的唯一标识
           console.log(e.keyCode);
           if(e.keyCode ===  13){
               console.log("开始搜索");
           }
       }
    </script>
</body>
</html>

表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件

input事件
select事件
Change事件
reset事件
submit事件

input事件
input事件当input，select、textarea 的值发生变化时触发。对于复选框(input type=checkbox )或单选框( input type=radio>)，用户改变选项时，也会触发这个事件
input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
 	<input type="text" id="username">
 	<script>
    	var username = document.getElementById("username");
    	username.oninput = function(){
       		alert("输入了"+username.value);
   		}
	</script>
</body>
</html>

select事件
当在 input、textarea 里面选中文本时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <input type="text" id="username">
    <script>
       var username = document.getElementById("username");
       username.onselect=function(){
           alert("hello");
       }
    </script>
</body>
</html>

change 事件
Change事件当input、select、textarea的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <input type="text" id="username">
    <input type="password" id="password">
    <input type="submit" value="登录" id="login">
    <script>
       var password = document.getElementById("password");
       password.onchange = function (e) {
           console.log(e.target.value)
       }
    </script>
</body>
</html>

reset 事件，submit 事件
这两个事件发生在表单对象 form上，而不是发生在表单的成员上。
reset事件当表单重置 (所有表单成员变回默认值)时触发
submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是form元素，而不是button元
素，因为提交的是表单，而不是按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <form action="http://localhost" id="myForm",onsubmit="submitHandle">
        <input type="text">
        <button id="resetBtn">重置</button>
        <button>提交</button>
    </form>
    <script>
        var resetBtn=document.getElementById("resetBtn");
        var myForm=document.getElementById("myForm");
        resetBtn.onclick = function(){
            myForm.reset();
        }
        function submitHandle(){
            console.log("提交成功");
            alert("提交成功");
        }
    </script>
</body>
</html>

事件代理（事件委托）

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理 (delegation)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>

</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    </form>
    <script>
        var list = document.getElementById('list');
        list.addEventListener('click',function(e){
            var target = e.target;
            if(target.tagName === 'LI'){
                target.style.color ='green';
            }
        })
        list.addEventListener('mouseover',function(e){
            var target = e.target;
            if(target.tagName === 'LI'){
                target.style.background='red';
            }
        })
        list.addEventListener('mouseout',function(e){
            var target = e.target;
            if(target.tagName === 'LI'){
                target.style.background='white';
            }
        })

定时器-setTimeout

JavaScript 提供定时执行代码的功能，叫做定时器 (timer)，主要由setTmeout()和senterval()这两个函数来完成。它们向任务队列添加定时任务。

setTimeout 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(funclcode, delay);

setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数。

setTimeout(function(){
console.log("定时器")
},1000)

温馨提示
还有一个需要注意的地方，如果回调函数是对象的方法，那么setTimeout 使得方法内部的 this 关键字指向全局环境，而不是定义时所在的那个对象.

<script>
	name="idear";
	user={
		name:"iwen",
		getName:function(){
			setTimeout(function(){console.log(this.name),3000})
			}
		}
		user.getName()//结果为idear
</script>

定时器可以取消

var timer=setTimeout(function(){
	console.log("延迟3秒打印")；
	}，3000)
clearTimeout(timer)；//取消定时器

定时器-setInterval
setintervel 函数的用法与setTimu 完全一致，区别仅仅在于stnel 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>
</head>
<body>
    <script>
        var i=0;
	    var timer = setInterval(function() {
            i++
            console.log(i);
            },1000)
</script>
</body>
</html>

动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>
    <style>
        #someDiv {
            background-color: red;
            height: 100px;
            width: 100px;
            opacity: 0;
        }
    </style>
    </style>

</head>
<body>
    <div id="someDiv"></div>
    <script>

        var someDiv = document.getElementById("someDiv");
        var opacity = 0;
	    var fade= setInterval(function() {
            opacity += 0.1;
            if (opacity >= 1) {
                clearInterval(fade);
            } else {
                someDiv.style.opacity = opacity;
            }
            },1000)
</script>
</body>
</html>

防抖

防抖严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。
从滚动条监听的例子说起。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>
    <style>
        #someDiv {
            background-color: red;
            height: 2000px;
            width: 100px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="someDiv"></div>
    <script>
        window.onscroll = showTop
        function showTop(){
            var scro11Top = document.documentElementscrollTop;
            console.log("滚动条位置: + scro11Top");
        }

</script>
</body>
</html>

在运行的时候会发现存在一个问题:这个函数的默认执行频率，太!高!了!。高到什么程度呢? 以chrome为例，我们可以点击选中一个页面的滚动条，然后点击一次键盘的[向下方向键]，会发现函数执行了8-9次!

然而实际上我们并不需要如此高频的反馈，毕竟浏览器的性能是有限的，不应该浪费在这里，所以接着讨论如何优化这种场景。

基于上述场景，首先提出第一种思路: 在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后

如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

效果:如果短时间内大量触发同一事件，只会执行一次函数

实现:既然前面都提到了计时，那实现的关键就在于setTimeout这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>
    <style>
        #someDiv {
            background-color: red;
            height: 2000px;
            width: 100px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="someDiv"></div>
    <script>
        //降低执行频率，防抖
        function debounce(fn,delay){
            var timer = null;
            return function(){
                if(timer){
                    clearTimeout(timer);
                }
                timer = setTimeout(fn,delay);
            }
        }
        //滚动事件
        window.onscroll = debounce(showTop,200)
        function showTop(){
            var scrollTop = document.documentElementscrollTop;
            console.log("滚动条位置:" + scrollTop);
        }
</script>
</body>
</html>

节流

如果在限定时间段内，不断触发滚动事件(比如某个用户闲着无聊，按住滚动不断的拖来拖去)，只要不停止触发，理论上就永远不会输出当前距离顶部的距离
但是如果产品同学的期望处理方案是: 即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢?其实很简单: 我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活(类似于技能冷却时间)效果:如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScrip</title>
    <style>
        #someDiv {
            background-color: red;
            height: 2000px;
            width: 100px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="someDiv"></div>
    <script>
        //节流
        function throttle(fn,delay){
            var valid = true;
            return function(){
                if(!valid){
                    return false;
                }
                setTimeout(function(){
                    fn();
                    valid = true;
                },delay);
            }
        }
        //滚动事件
        window.onscroll = throttle(showTop,300)
        function showTop(){
            var scrollTop = document.documentElementscrollTop;
            console.log("滚动条位置:" + scrollTop);
        }
</script>
</body>
</html>
strugglegirl
关注
  • 29
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css网站布局实录学习笔记第一部分
12-13
今天开始，认真学习前端技术，哈哈哈~~~加油~~~ 推荐这本《CSS网站布局实录》（第2版）给初级入门选手，虽然这本书年代有点久远，不过很经典。 注明一下：这里讲述的CSS均为CSS 2.0版本。 第一章 Web标准与CSS布局...
java web前端.docx
02-20
本文档是本人学习java web前端时所写笔记 拿出来分享 包含了前端基础的大部分内容 HTML CSS JS DOM编程 jQuery框架 AJAX基础
front-end-notes:前端笔记
05-10
front-end-notes前端学习笔记CSS 盒模型DOM 事件HTTP 协议原型链面向对象通信安全算法浏览器页面相关JS 运行机制页面性能错误监控业务能力职业竞争力md-3：前端 JavaScript 知识总结目标ES6原型异步虚拟 DOMMVVM 和 ...
前端开发笔记.docx
08-21
在前端开发的学习和实践过程中，以下是一些重要的笔记内容： HTML（超文本标记语言）： HTML是构建Web页面的基础，它描述了页面的结构和内容。笔记应包括常见的HTML标签、元素嵌套规则以及语义化的重要性。 CSS...
学习笔记（一）——邂逅Vuejs
01-08
特点：解耦视图和数据，可复用的组件，前端路由技术，状态管理，虚拟DOM 学习前提：需要具备一定的HTML、CSS、JavaScript基础 3.Vue.js安装 (1)直接CDN引入 (2)下载和引入 开发环境：...
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 165
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 675
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1118
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 256
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
综合性练习-验证码
cj13106811623的博客
05-15 822
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
前端-移动端布局
Kongfutu的博客
05-21 73
可以在浏览器里打开检查 点击一下移动端按钮 然后选择一下对应的手机型号可以切换到对应的手机端。进阶学习建议 Vue.js 和 微信小程序。如何在PC端模拟移动端设备。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 821
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
【VueRouter 的基本使用】
2302_76611599的博客
05-17 172
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
编程知识分享，主打前端
05-19 753
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
python EEL + vue3.js 简单示例
bigcarp的专栏
05-15 191
eel官方示例中暴露的js函数是全局函数，vue中的自定义函数作用域通常都是组件范围内。要让eel.js调用，需要将其升为全局可用。一般方法有 app.config.globalProperties 或 mixin等。
【JAVA WEB实用与优化技巧】如何自己封装一个自定义UI的Swagger组件，包含Swagger如何处理JWT无状态鉴权自动TOKEN获取
yh4494的博客
05-21 7
Swagger 原生UI存在的缺点 ① 不够方便直观 swagger ui 布局是上下瀑布式的，比如我访问完A接口，想访问B接口，访问完B接口想继续访问A接口就必须往上翻，接口少还好操作。接口多的话来回就很烦。 ② 请求的参数没有缓存 ③ 不够美观 ④ 如果是JWT 无状态登录，Swagger使用起来就没有那么丝滑了，因为JWT无状态登录这种需要每次在请求的Header中带上TOKEN，Swagger可没那么只能给你登录接口返回的token带过去，这样就导致无状态session的情况下Swagg...
React: memo
卡卡西：一个擅长拷贝的前端程序员
05-14 526
React.memo 允许组件在 props 没有改变的情况下跳过重新渲染。
企业网站开发技术
做网站建设设计小程序推广鸿运通
05-15 428
JavaScript是一种用于网页交互的脚本语言，通过使用JavaScript，开发者可以实现网页的动态效果、表单验证等功能。Java是一种跨平台的编程语言，它具有丰富的类库和开发工具，常用于开发大型企业网站。响应式设计是指网页根据浏览器窗口的大小和设备特性等因素，自动调整网页的布局和内容，以适应不同的屏幕尺寸和设备类型。SEO优化可以提升网站的可见性和流量，提升企业的品牌知名度和影响力。前端开发主要使用HTML、CSS和JavaScript等技术，后端开发主要使用PHP、ASP.NET和Java等技术。
笔记：前端知识梳理
weixin_46691179的博客
05-17 208
让JavaScript能够在目标机器上能够正常运行的一种实现方式，浏览器不同，JavaScript引擎的实现也不同，如：谷歌的v8、火狐的spidermonkey、IE的chakra、Edge的chakracore。：在v8引擎的基础上又新增了很多js库，换句话说：Node.js内置了自身实现的js变量和函数，功能类似C/C++的标准库。：脚本语言的标准，不同版本的标准称为ESx，如：ES5、ES6。：对ES标准的一种实现，ES标准的其他实现还有JScript。：Node.js的包（库）管理工具。
python学习笔记--皮大庆
08-14
《Python学习笔记》是由皮大庆编写的一本关于Python语言学习的教材。在这本书中，作者详细介绍了Python语言的基础知识、语法规则以及常用的编程技巧。 首先，作者简要介绍了Python语言的特点和优势。他提到，Python...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值