JavaScript知识点详细学习笔记
文章平均质量分 57
学习JavaScript新手上路
superfortunate
大学在读,前端在学,希望得到一些交流与指导。
展开
-
2、classList的使用(元素类名)
calssList属性,返回元素的类名。<style> .bg { background-color: black; }</style><div class="one two"></div> <button> 开关灯</button> <script> // classList 返回元素的类名 var div原创 2022-02-16 02:00:05 · 459 阅读 · 0 评论 -
1、移动端触屏事件
touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板的操作。touchstart 手指触摸到一个DOM元素触发 touchmove 手指在一个DOM元素上滑动时触发 touchmove 手指从一个DOM元素上移开时触发 var div = document.querySelector('div'); div.addEventListener('touchstart',fu...原创 2022-02-15 01:07:41 · 333 阅读 · 0 评论 -
(12)筋斗云案例(导航栏醒目显示跟随)
鼠标经过某个小li,筋斗云跟着到当前小li位置 鼠标离开这个小li,筋斗云复原为原来的位置 鼠标点击了某个小li,筋斗云就会留在点击这个小li的位置 仍然利用动画函数做动画效果 原先筋斗云的起始位置是0 鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可...原创 2022-02-14 01:23:18 · 716 阅读 · 0 评论 -
(11)页面带动画的返回顶部
滚动窗口到文档中的特定位置。window.scroll( x , y)带动画的返回顶部则继续使用前面封装的缓动动画函数 只需要把前面函数里所有left相关的值 改为 页面垂直滚动距离相关就可以了 页面滚动了多少,可以通过window.pageYOffset得到 //返回顶部 var top = document.querySelector('.guding'); top.addEventListener('click', function() { //windo原创 2022-01-30 23:04:19 · 448 阅读 · 0 评论 -
(10)节流阀
节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。防止轮播图按钮连续点击造成播放过快。核心思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。开始设置一个变量var flag = true;if(flag){falg = fasle;do something} 关闭水龙头利用回调函数 动画执行完毕,flag = true 打开水龙头下面是上一节右键点击滑动轮播图案例: /...原创 2022-01-29 23:22:04 · 1123 阅读 · 0 评论 -
(9)网页轮播图
结构搭建如下: <div class="qiantu width"> <!-- <img src="images/_V9A3354.png" alt=""> --> <ul class="ddl"> <li> <a href=""><img src="images/001.jpg" alt=""></a>原创 2022-01-28 23:40:44 · 159 阅读 · 0 评论 -
(8)缓动动画添加回调函数、动画函数的使用
回调函数原理:函数作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。<script> function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器,只保留当...原创 2022-01-27 23:43:16 · 172 阅读 · 0 评论 -
(7)js简单动画原理
核心原理:通过定时器setInterval()不断移动盒子的位置。实现步骤:获得盒子的当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意元素需要添加定位,才能使用element.style.left做一个简单的移动<style> div { position: absolute; left: 0; width: 100px;原创 2022-01-26 22:54:50 · 625 阅读 · 0 评论 -
(6)三大系列总结,mouseenter和mouseover的区别
offset、client、scroll三大系列总结element.offsetWidth 返回自身包括padding、边框、内容区的宽度,返回数值不带单位 element.clientWidth 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位 主要用法:offset系列经常用于获得元素位置 offsetLeft offsetTopclient系列经常用于获原创 2022-01-25 22:18:50 · 583 阅读 · 0 评论 -
(5)元素滚动scroll系列、scroll事件、侧边栏案例
scroll翻译过来就是滚动的,我们使用scroll相关系列的属性可以动态的得到该元素的大下,滚动距离等。element.scrollTop 返回被卷去的上侧距离(有滚动条时,下滑上侧内容会被卷去),返回数值不带单位 element.scrollLeft 返回被卷上的左侧距离,返回数值不带单位 element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位 element.scrollHeight 返回自身实际的高度,不含边框,返回数值不带单位原创 2022-01-24 23:15:58 · 2896 阅读 · 0 评论 -
(4)元素可视区client系列、立即执行函数
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。element.clientWidth 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 element.clientHeight 返回自身包括padding、内容区的高度,不含边框,返回数值不带单位 element.clientTop 返回元素上边框的大小 element原创 2022-01-23 22:48:48 · 230 阅读 · 0 评论 -
(3)仿京东放大镜效果
在原先需要放大的图片上准备一个有颜色的遮挡层背景的盒子,例如样式为 .mask { display: none; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: #FEDE4F; opacity: .5;//半透明 border: 1px solid #ccc; cursor: move;} 子绝父相,给 原图原创 2022-01-22 22:50:25 · 768 阅读 · 0 评论 -
(2)案例:模态框拖拽(点击弹出登录框并能拖拽)
点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。display:block; 点击关闭按钮,关闭模态框,并同时关闭灰色半透明层。display:none; 鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动 鼠标松开,可以停止拖拽移动...原创 2022-01-21 22:27:16 · 287 阅读 · 2 评论 -
(1)PC端网页特效导读、offset概述
学习目标:能够说出常见offset系列属性的作用 能够说出常见client系列属性的作用 能够说出常见scroll系列属性的作用 能够封装简单动画函数 能够写出网页轮播图案例知识点即为:元素偏移量offset系列 元素可视区client系列 元素滚动scroll系列 动画函数封装 常见网页特效案例offset概述翻译过来就是偏移量,使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获取元素距离带有定位父元素的位置 获得元素自身的大小(宽高) 返回原创 2022-01-20 22:12:05 · 656 阅读 · 0 评论 -
JavaScript-筑基(二十五)navigator对象(判断页面打开终端)、history对象
navigator对象包含有关游览器的信息,它有很多属性,我们常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。下面前端代码可以判断用户那个终端打开页面,实现跳转 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|原创 2022-01-19 23:13:21 · 2740 阅读 · 0 评论 -
JavaScript-筑基(二十四)URL、location对象
首先了解一个名词。URL是统一资源定位符(Uniform Resource Locator)是互联网上标准资源的地址。互联网上的每个文件都有唯一的URL,它包含的信息指出文件的位置以及游览器应该怎么处理它。一般格式:protocol://host[:port]/path/[?query]#fragment例如:http://www.itcast.cn/index.html?name=andy&age=18#linkprotocol 通信协议 常用的http,ft...原创 2022-01-19 22:06:11 · 539 阅读 · 0 评论 -
JavaScript-筑基(二十三)js执行机制
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致——为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进性添加,之后再删除。单线程意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务,这样所导致的问题是;如果js执行时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。(目前这个问题已经解决了,允许JavaScript创建多个线程)原创 2022-01-18 23:00:36 · 50 阅读 · 0 评论 -
JavaScript-筑基(二十二)this指向问题
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。全局作用域或者普通函数中this指向全局对象window(定时器里面的this指向window) 方法调用中谁调用this指向谁 btn.addEventListener('click', function() { console.log(this); // this指向的是btn这个按钮对象 })原创 2022-01-18 22:19:12 · 163 阅读 · 0 评论 -
JavaScript-筑基(二十一)定时器、回调函数、倒计时
window提供的两种定时器setTimeout() setInterval()window.setTimeout(调用函数,[延迟的毫秒数]);setTimeout()方法用于设置一个定时器,延迟时间到了就去执行调用函数,只执行一次就结束了。<script> //延时时间单位是毫秒 //setTimeout('callback()',2000);是和下面一样的但是不提倡 setTimeout(callback,2000);原创 2022-01-17 22:04:08 · 870 阅读 · 0 评论 -
JavaScript-筑基(二十)window窗口事件
窗口页面加载事件window.onload = function() {}或者window.addEventListener('load', function() {});window.onload是窗口(页面)加载事件,当文档内容完全加载完成后才会触发该事件(包括图像、脚本文件、CSS文件等)。注意:有了window.onload就可以把js代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数; window.onload传统注册方式只能写一次,如果有.原创 2022-01-16 12:14:36 · 1264 阅读 · 0 评论 -
JavaScript-筑基(十九)BOM游览器对象模型-概述
学习目标:能说出什么是BOM 能够知道游览器的顶级对象window 能写出页面加载事件以及注意事项 能写出两种定时器函数并说出区别 能过说出js执行机制 能过使用location对象完成页面之间的跳转 能知晓navigator对象涉及的属性 能过使用history提供的方法实现页面刷新学习内容:BOM概述 window对象的常见事件 定时器 js执行机制 location对象 navigator对象 history对象BOM(Browser Object Model)即原创 2022-01-15 16:16:36 · 87 阅读 · 0 评论 -
JavaScript-筑基(十八)键盘事件
onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下时触发,但是它不识别功能键盘,比如ctrl、shift、箭头等 document.onkeyup = function(){ //使用 console.log(11); } document.addEventListener('keyup',function(){ conso原创 2022-01-15 16:15:39 · 355 阅读 · 0 评论 -
JavaScript-筑基(十七)禁止鼠标右键、选中文字、获取鼠标坐标
禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下菜单 禁止鼠标选中(selectstart开始选中) // 1. contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) // 2. 禁止选中文字 selectstart..原创 2022-01-14 14:52:25 · 197 阅读 · 0 评论 -
JavaScript-筑基(十六)事件委托(代理、委派)
作用:只操作一次DOM,提高了程序的性能。原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在父节点上,然后利用冒泡原理影响设置每个节点。例如当ul里有许多li时,给ul注册点击事件,然后利用事件对象的target来找到当前点击的li,事件会冒泡到ul上,ul有注册事件,就会触发事件监听器。<ul> <li>点击就会变噢</li> <li>点击就会变噢</li> <li&g原创 2022-01-14 07:00:00 · 72 阅读 · 0 评论 -
JavaScript-筑基(十五)事件对象属性方法
事件对象属性方法 e.target 返回触发事件的对象 e.srcElement 返回触发事件的对象(ie6-8) e.type 返回事件的类型 如click、mouseover e.cancelBubble 该属性阻止冒泡(ie6-8) e.returnValue 该属性阻止默认事件(ie6-8) e.preventDefault() 该方法阻止默认事件 (标准) e.stopPropagation 阻止 冒泡 (标准) this和e原创 2022-01-13 16:56:32 · 127 阅读 · 0 评论 -
JavaScript-筑基(十四)删除事件、DOM事件流及事件对象
解绑事件传统注册方式删除:eventTarget.onclick = null; 方法监听注册方式删除:eventTarget.removeEventListener(type, listener[, useCapture]); <div>1</div> <div>2</div> <div>3</div> <script> var divs = document.query原创 2022-01-13 16:06:42 · 253 阅读 · 0 评论 -
JavaScript-筑基(十三)事件高级导读、注册事件概述
掌握写出元素注册事件的两种方法 能够说出删除事件的两种方式 能够说出DOM事件流的三个阶段 掌握利用事件对象完成跟踪鼠标案例 掌握封装阻止冒泡的兼容性函数 能够说出事件委托的原理 能够说出常用的鼠标事件和键盘事件学习的主要内容:注册事件(绑定事件) 删除事件(解绑事件) DOM事件流 事件对象 阻止事件冒泡 事件委托(代理、委派) 常用的鼠标事件 常用的键盘事件注册事件概述两种方式:传统方式(前面学的)和方法监听注册方式传统注册方式,利用on开头的事件onclick原创 2022-01-12 22:07:09 · 180 阅读 · 0 评论 -
JavaScript-筑基(十二)节点操作之动态生成表格案例、三种动态创建元素区别
这里我们先模拟数据,采取数组对象形式储存 var datas = [ { name:'中观', subject:'java', score:100 },{ name:'信安', subject:'java', score:60 },{ name:'常常', subj原创 2022-01-11 13:54:40 · 261 阅读 · 0 评论 -
JavaScript-筑基(十一)节点操作及发布留言案例
兄弟节点node.nextSibling 返回下一个兄弟节点,同样,包含所有类型的节点node.previousSibling 返回上一个兄弟节点,包含所有类型的节点node.nextElementSibling 返回下一个兄弟元素节点node.previousElementSibling 返回上一个兄弟元素节点<div>aodjoawdoa</div> <span>dadcascaca</span> <script原创 2022-01-10 14:38:30 · 361 阅读 · 0 评论 -
JavaScript-筑基(十)节点操作初识及下拉栏案例
网页中所有的内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。所有节点均可通过JavaScript进行访问和修改,所有HTML元素(节点)均可被修改,也可被创建或者删除。一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。元素节点nodeType 为 1 (实际开发主要获取) 属性节点nodeType 为 2 文本节点nodeType 为 3(文本节点包含文字、空格、换行等)利用节点层级关系原创 2022-01-09 21:46:13 · 303 阅读 · 0 评论 -
JavaScript修炼之路-筑基篇(九)获取和修改元素属性值
<div id="demo" index-data = "1"></div> <script> var div = document.querySelector('div'); //1.获取元素属性值 //(1)element.属性 console.log(div.id);//输出demo //(2)element.getAttribute('属性'); 一般用以获取自...原创 2022-01-08 22:44:42 · 546 阅读 · 0 评论 -
JavaScript修炼之路-筑基篇(八)操作元素
目录修改元素内容密码输入框的案例修改样式属性案例:点击按钮其xx隐藏或显示案例:循环精灵图案例:显示、隐藏文本框的内容案例:密码框提示输入格式不对修改元素内容js的DOM操作可以改变网页的内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。如: 将 ‘这会显示一个时间’改成 现在的时间<body> <button>显示时间</button> <div>这会显...原创 2022-01-07 16:29:24 · 221 阅读 · 0 评论 -
JavaScript修炼之路-筑基篇(七)事件基础(鼠标事件)
js检测到的行为。 触发---响应机制,网页每个元素都可以产生某些可以触发的js的事件。 如:点击按钮,弹出一个对话框 事件三要素 事件源、事件类型、事件处理程序 <body> <button id="btn">这是一个按钮,请不要按</button></body><script > //事件源 谁 按钮 var btn = document.getElementById...原创 2022-01-06 11:59:57 · 69 阅读 · 0 评论 -
JavaScript修炼之路-筑基篇(六)Web APIs、Dom及元素获取
js中DOM页面文档对象模型和BOM游览器对象模型即为Web APIs。API即为基于软硬件得以访问一组例程的能力,一个工具,能更轻松的实现想要的功能,Web API是游览器提供的一套操作 游览器功能 和 页面元素 的API。一般都有输入和输出(函数的传参和返回值),很多都是方法 DOM简介:处理可扩展标记语言的标准编程接口,w3c已经定义一系列dom接口,通过这些dom可以改变网页的内容、结构和样式。 文档document、元素element、节点node(都是对象) ..原创 2022-01-06 11:40:00 · 381 阅读 · 0 评论 -
JavaScript修炼之路-筑基篇(五)字符
字符的不可变性:指的值不变,原内容占据原内存,看起来内容变了是因为地址变了,开辟了一个新空间。(不要大量的拼接字符串,会因占内存而卡顿)字符串里面所有的方法,都不会改变字符串本身。根据字符返回位置 ,亦可以用 indexOf(‘要找的字符串’,开始的位置)var str = 'acacacajbckbamkink'; var index = str.indexOf('a'); while(index !==-1){ console.log(i...原创 2022-01-05 18:42:48 · 294 阅读 · 0 评论 -
JavaScript修炼之路-筑基篇(四)对象
对象分为三类 自定义对象 (封装自己的对象)、内置对象(math、日期、数组、字符串对象)、游览器对象一为自定义对象js中是一组无序的相关属性(特征)和方法(行为)的集合,让结构表达更清晰创建对象://利用字面量创建对象 {}//var obj = {} 创建了一个空的对象//里面的属性使用键值对的形式 建 属性名:值 var obj = { unname:'张三疯', age:18, ...原创 2022-01-05 00:58:48 · 94 阅读 · 0 评论 -
JavaScript修炼之路-筑基篇(三)函数、预解析
js函数、js执行过程原创 2022-01-04 18:22:22 · 90 阅读 · 0 评论 -
JavaScript修炼之路-筑基篇(二)运算、数组
在上一篇学会引用和定义变量后,开始学习异或复习简单的语法原创 2022-01-04 17:04:24 · 243 阅读 · 0 评论 -
JavaScript修炼之路-筑基篇(一)输入输出、变量声明
1、引用js行内式js,直接写到元素内部eg:<inputtype="button"value="javascrpt"onclick="alert('wochaochao')">内嵌的js(与写css style一样)<script>alert()</script>外嵌式(单独写在js文件里面,然后在html里面写以下引用)最常用的方式。<scriptsrc="my.js"><...原创 2022-01-04 11:44:05 · 506 阅读 · 1 评论