JS学习笔记(个人)
「已注销」
漫漫长路修远兮,吾将上下而求索。
展开
-
js基础-数组(Array)
别看了!这个人已经开摆了!原创 2022-04-05 14:46:34 · 317 阅读 · 0 评论 -
js基础-内置对象
别看了!写这篇文文的那个人已经摆烂了!原创 2022-04-05 14:44:27 · 828 阅读 · 0 评论 -
JS基础-特效篇-联动动画(对于前面的总结!)
我刚才突然发现,刚才封装的某些函数有错误!以后写函数的时候!不能把脑子全都交给视频课!自己也得动脑子啊!1.样式<style> * { margin: 0; padding: 0; } img { vertical-align: top; /*也可以使用font-size和border*/ width: 400px;原创 2021-05-12 16:17:11 · 120 阅读 · 0 评论 -
JS基础-特效篇-封装MyTool
1.把之前写的动画函数封装进去!新的:json.hasOwnProperty(key)2.JS函数var myTool = { $: function (id) { return typeof id === "string" ? document.getElementById(id) : null; }, scroll: function () { if (window.pageYOffset !== null) { //最新的浏览器原创 2021-05-12 15:06:35 · 114 阅读 · 0 评论 -
JS基础-特效篇-透明度动画
1.设置opacity。1-0。高版本用:filter。alpha()。2.特殊属性特殊处理:1)页面元素和样式<head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } body {原创 2021-05-12 14:55:59 · 359 阅读 · 0 评论 -
JS基础-特效篇-多组动画
1.知识点:回调!(坚持就是胜利!已经到现在了!没点儿收获,对不起自己啊!)2.案例:1)页面:<button id="btn">向左走</button><button id="btn1">向右走</button><div id="box"></div><script src="MyTool/MyTool.js"></script>2)样式<style> * {原创 2021-05-12 14:39:49 · 199 阅读 · 0 评论 -
JS基础-特效篇-多属性动画(JSON)
1.对象和JSON不能用for循环遍历。实验:<script> var obj = { "left":300, "top":400, "width":600, "height":600 }; for(var key in obj){ console.log(obj.key); //undefined console.log(key,obj[key]); //l原创 2021-05-12 14:28:41 · 300 阅读 · 0 评论 -
JS基础-特效篇-单属性动画
1.目的:针对一个属性,属性值改变动画2.函数:/* *@description:[缓动动画函数] *@param:{String}[attr] *@param:{Object}[eleObj] *@param:{Number}[target] *@date:2021/5/11 */ function buffer(eleObj, attr, target) { //清除定时器 clearInterval(eleObj.t原创 2021-05-12 13:46:59 · 136 阅读 · 0 评论 -
JS基础-特效篇-JS设置CSS样式值02
还有两天了,我一定要把这个视频课程全部学完才行啊!1.点语法:box.style.属性,缺点:跟在style后面的属性不能由外传入;2.下标语法:利用[]访问属性,元素.style['属性'];动态地传递参数作为属性!3.问题:只能获取行内样式!!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>原创 2021-05-12 11:23:32 · 127 阅读 · 0 评论 -
JS基础-特效篇-JS设置CSS样式值01
1.页面:<button id="btn">向左走</button><button id="btn1">向右走</button><div id="box"></div><script src="MyTool/MyTool.js"></script>2.样式:<style> * { margin: 0; padding: 0; }原创 2021-05-11 17:20:38 · 153 阅读 · 0 评论 -
JS基础-特效篇-缓动重现
1.对数值性的属性做动画!缓动系数有个公式!element.setAttribute(attributename,attributevalue)封装的函数:$: function (id) { return typeof id === "string" ? document.getElementById(id) : null; },function buffer(eleObj,target) { eleObj.setAttribute('timer','nu原创 2021-05-11 17:03:34 · 46 阅读 · 0 评论 -
JS基础-特效篇(三大家族)12-选中内容获取
1.案例:选中特定内容进行分享!1)获取选中内容2)分享选中内容2.标准浏览器:window.getSelection();ie获得选择的文字:document.selection.createRange().text;。原创 2021-05-11 15:54:27 · 132 阅读 · 0 评论 -
JS基础-特效篇(三大家族)11-冒泡案例(登录蒙版)
1.效果:页面上有个登录按钮,点击登录按钮后进入页面,点击蓝色方块进入目标页面,无法滚动!2.自己的工具库MyTool.jsvar myTool = { $: function (id) { return typeof id === "string" ? document.getElementById(id) : null; }, scroll: function () { if (window.pageYOffset !== null) { /原创 2021-05-11 15:06:10 · 124 阅读 · 0 评论 -
JS基础-特效篇(三大家族)10-JS事件传递机制(事件捕获)
1.参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListenerhttps://www.runoob.com/jsref/met-element-addeventlistener.html2.语法:element.addEventListener(event, function, useCapture)3.useCapture可选。布尔值,指定事件是否在捕获或冒泡阶段执行。可能值:true -原创 2021-05-11 14:41:49 · 89 阅读 · 0 评论 -
JS基础-特效篇(三大家族)10-JS事件传递机制(冒泡和阻止冒泡)
1.冒泡机制:事件从DOM树的底层,层层往上传递,直至传递到DOM层的根节点。教程(脚本之家):https://www.jb51.net/article/94399.htm2.冒泡顺序:div>body>html>document>window;blur,focus,load,unload不能冒泡。3.阻止冒泡:标准浏览器、IE浏览器w3c:event.stopPropagation() IE:event.cancelBubble = true(与对应英文类似!)...原创 2021-05-11 14:17:35 · 109 阅读 · 0 评论 -
JS基础-特效篇(三大家族)09-优化瀑布流
目的:可视区域可以自动适应页面改变!前言:https://blog.csdn.net/weixin_45799003/article/details/116569864window.addEventListener('load', function (ev) { //1实现瀑布流布局 waterFull('main', 'box'); //2加载数据 var time1 = null; window.addEventListener('scroll', fu原创 2021-05-11 11:14:00 · 140 阅读 · 0 评论 -
JS基础-特效篇(三大家族)08-onresize
概念:当窗口或者框架的大小发生改变时就会调用。用于自适应页面布局等多屏幕适配场景。1.案例:改变浏览器尺寸,可以改变浏览器背景颜色。<script src="MyTool/MyTool.js"></script><script> window.addEventListener('load',function (ev) { changeColor(); //1.监听窗口的尺寸发生改变 window.addEve原创 2021-05-11 10:45:08 · 168 阅读 · 0 评论 -
JS基础-特效篇(三大家族)07-可视区域封装
1.ie9及其以上版本,最新浏览器–window.innerWidth,window.innerHeight。2.标准模式浏览器:document.documentElement.clientWith,document.documentElement.clientHeight。3.怪异模式:document.body.clientWidth,document.bodyclientHeight。...原创 2021-05-11 10:27:41 · 71 阅读 · 0 评论 -
JS基础-特效篇(三大家族)06-client以及比较
1.clientWidth:网页可见区域宽度;clientHeight:网页可见区域的高度。2.clientLeft clientTop:返回的是元素边框的borderWidth。(它是内容加上内边距;offset是内容加上内边距加上边框。)offset(屏幕)client(边框)scrollwidth/heightborder+padding+内容的宽度和高度border+padding+内容的宽度和高度能够滚动的内容的宽度和高度(可能超出容器范围)left/top原创 2021-05-10 20:52:02 · 116 阅读 · 0 评论 -
JS基础-特效篇(返回顶部)
1.强回:<h1 id="dingbu">哼哼哼,赫尔嘿嘿</h1><a href='#dingbu'>。2.浅回,弱回。3.scrollTo(x,y):把内容滚动到指定的坐标;其中x为要在窗口文档显示区左上角显示的文档的x坐标,y为要在窗口文档显示区左上角显示的文档的y的坐标。4.MyTool.jsvar myTool = { $: function (id) { return typeof id === "string" ? docum原创 2021-05-10 20:33:59 · 150 阅读 · 0 评论 -
JS基础-特效篇(侧边广告位)
1.效果:不用绝对定位,触顶弹回,底部同样!2.页面元素(这里只有aside比较重要!)<div id="aside"> <img src="images/watch.jpg" alt=""></div><header id="head"> <img src="images/color05.jpg" alt="" style="width: 100%;height: 70px;margin: 0 auto"></h原创 2021-05-10 17:02:32 · 318 阅读 · 0 评论 -
JS基础-特效篇(导航吸顶)
1.效果原理2.页面元素<header id="head"> <img src="images/color05.jpg" alt="" style="width: 100%;height: 70px;margin: 0 auto"></header><nav id="nav"> <ul> <li>首页</li> <li>直播</li>原创 2021-05-10 16:31:57 · 120 阅读 · 0 评论 -
JS基础-(补充)站点复制工具
1.目的:感觉一个网页做的很好!我要整个都复制下来!2.工具:整站下载工具!https://smalltool.github.io/2020/06/10/soft106/#下载地址仿站小工具https://www.duitang.com/search/?kw=%E5%8A%A8%E6%BC%AB%E5%B8%85%E5%93%A5&type=feed复制目标:堆糖https://blog.csdn.net/qq_14996421/article/details/86240562?ops原创 2021-05-10 15:45:30 · 127 阅读 · 0 评论 -
JS基础-(补充)视频课笔记
1.盒子模型有时候会出现设置背景边框无法撑大和设置内外边距异常,一般来说导致此类问题的原因是?BFC:清除伪类,清除浮动。块级格式化上下文 (Block Fromatting Context).2.HTML标签是否能够自定义,标签所包含的属性是否支持自定义?class MyDiv{}window.customElements.define(‘my-div’,MyDiv)—ES6的部分。3.清除间距:<li></li><li></li>放在一行就可以了原创 2021-05-10 15:09:20 · 85 阅读 · 0 评论 -
JS基础-特效篇(瀑布流)
案例:https://www.duitang.com/search/?kw=%E5%B8%85%E5%93%A5&type=feed一个叫堆糖的网址,搜索图片的时候,能够不断的往下浏览!案例:https://list.mogu.com/search/goods?q=%E8%BF%9E%E8%A1%A3%E8%A3%99&acm=3.mce.1_10_13u0k2.39084.108675.lSznUswUSj2nz.mid_39084-sd_115-mdt_sketch-pm_998-di原创 2021-05-10 14:51:08 · 217 阅读 · 0 评论 -
JS基础-特效篇(三大家族)05-JSON
1.JSON:javascript object notation轻量级的数据交换格式。2.基于ECMAScript的一个子集,相比于XML,json易于阅读和编写,同时也易于机器解析和生成。3.微信公众号开发:XML??重量级数据交换格式。4.结构:对象;数组;键值对?(组成)5.解析:http://www.bejson.com/(在线校验json格式)6.Postman:工具;https://www.cnblogs.com/mafly/p/postman.html官网:https://www.原创 2021-05-09 20:22:41 · 102 阅读 · 0 评论 -
JS基础-特效篇(三大家族)04-scroll家族
https://www.javascriptcn.com/post/63072暂时没找到相关文档!scroll家族1.网页正文全文宽:document.body.scrollWidth2.网页正文全文高:document.body.scrollHeight3.网页被卷去的高:document.body.scrollTop(用的最多!)4.网页被卷去的左:document.body.scrollLeft...原创 2021-05-09 19:26:35 · 80 阅读 · 0 评论 -
JS基础-特效篇(三大家族)03-严格模式和怪异模式
1.怪异模式quirks mode早起的浏览器Netscape4和Explorer4对css进行解析时,并未遵守W3C标准,这时的解析方式就是怪异模式。2.严格模式strict mode当众多浏览器开始依照W3C标准解析css时,仿照W3C标准解析css的模式我们称为严格模式。3.判断:document.compatMode:BackCompat怪异模式;CSS1Compat严格模式。4.兼容性相关:<style> body{ height:原创 2021-05-09 16:46:47 · 137 阅读 · 0 评论 -
JS基础-特效篇(事件对象)03-放大镜
1.案例:小盒子移动,大盒子装图片;显微镜放大作用!显微镜的小黄色块,有地图比例尺的同样作用,就是大盒子和小盒子的比例!有分页的时候使用pageX/pageY。https://www.cnblogs.com/shirleysblog/p/13405584.html本来想全部都回忆一下呢!结果什么都学不会!!时间紧,任务重!先学,慢慢以后再复习吧!页面元素<div id="box"> <div id="small_box"> <img sr原创 2021-05-09 16:07:37 · 97 阅读 · 0 评论 -
JS基础-特效篇(事件对象)02-事件对象常用属性
学多少算多少吧!赶鸭子上架吧!1.clientX:光标相对于网页的水平位置。2.clientY:光标相对于网页的垂直位置。以当前可视区域为基准,类似于固定定位3.screenX:光标相对于屏幕的水平位置。4.screenY:光标相对于屏幕的垂直位置。以屏幕为基准进行测量!5.pageX:光标相对于网页的水平位置(滚动,no ie)6.pageY:光标相对于网页的垂直位置(滚动,no ie)以当前文档为基准,绝对定位!不适用于ie6-8<div></div>di原创 2021-05-09 13:43:09 · 122 阅读 · 0 评论 -
JS基础-特效篇(事件对象)01-基础
function (ev),ev-event凡事事件产生一定会有一个事件对象产生!event就是当前事件的对象,简称事件对象。只要触发DOM上的某个事件,就会产生一个事件对象event,这个对象中包含所有与事件有关的信息。参考文档:https://www.w3school.com.cn/jsref/dom_obj_event.asp属性描述altKey返回当事件被触发时,“ALT” 是否被按下。button返回当事件被触发时,哪个鼠标按钮被点击。client.原创 2021-05-08 21:10:02 · 70 阅读 · 0 评论 -
JS基础-特效篇(三大家族)02-天猫导航
效果页面:当鼠标移动的时候,这个灰色背景会跟着;当鼠标点击的时候,会记住点击位置,离开导航,灰色背景会回到点击的位置。1.页面<nav id="nav"> <span id="t_mall"></span> <ul> <li>双十一狂欢</li> <li>服装</li> <li>家电</li> <l原创 2021-05-08 20:40:44 · 90 阅读 · 0 评论 -
JS基础-特效篇(三大家族)01-offset(2)
1.属性:offsetParent返回当前对象的父级(带有定位)盒子,可能是父亲,也可能是爷爷。<div id="grandPa" style="position: relative"> <div id="father" style="position: relative"> <div id="son"></div> </div></div> var son = document.getEleme原创 2021-05-08 19:50:45 · 111 阅读 · 0 评论 -
JS基础-特效篇(三大家族)01-offset(1)
https://www.cnblogs.com/sj1988/p/6600829.html三大系列:offset、scroll、client事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)offset:抵消;自己的,用于获取元素尺寸。五个属性:1.offsetWidth和offsetHeight:获取对象自身的宽度和高度,包括内容、边框和内边距,即:offsetWidth = width + border + padding。#box{ wi.原创 2021-05-08 17:02:40 · 175 阅读 · 0 评论 -
JS基础-特效篇(定时器)10-轮播图片
功能:每隔1秒换一张图片显示!改变current!!鼠标好像不太好使了!换了电池也还是反应迟钝!键盘的快捷键也似乎老化很快!我15年买的电脑!21年了!这台电脑跟了我差不多有六年了!希望你能够一直陪我吧!真的很有感情了!I LOVE YOU!1.效果2.页面元素<div id="box"> <div class="left"> <ul> <li class="current"><a href="#原创 2021-05-08 16:09:28 · 145 阅读 · 0 评论 -
JS基础-特效篇(定时器)09-缓动动画
封装的时候,先实现其中的一个功能,之后叠加就可以了!封装动画/函数库新建MyTool文件夹,文件夹内新建一个MyTool.js文件举例:使用匿名函数定义$字面量方式1:var myTool = { $:function (id) {return typeof id === "string" ? document.getElementById(id) : null; }};调用:myTool.$(id);方式2:(function(w){w.myTool = {$:原创 2021-05-08 14:53:53 · 212 阅读 · 0 评论 -
JS基础-特效篇(定时器)08-一次定时器
1.一次定时器:某个行为需要在多长时间后执行!setTimeout(function () { alert(1); }, 1000)2.编程思维:软件Xmind–>不太会用!(撩课视频推荐的)3.匀速动画(封装一个动画函数,大部分动画里面都需要定时器!)JS可以封装很多动画库!综合动画:可以水平移动,也可以竖直移动;运用定位left,top或者设置margin-left。1)页面元素<button id="btn">开始动画</button&原创 2021-05-08 13:47:54 · 368 阅读 · 0 评论 -
JS基础-特效篇-随机点名册
如上图效果1.页面:<button id="begin">开始点名</button><button id="end">结束点名</button><div id="name">小小猪</div>2.样式<style> body { text-align: center; } #name { font-size: 2.原创 2021-05-08 10:59:03 · 220 阅读 · 0 评论 -
JS基础-特效篇(定时器)07-长图滚动
1.效果:鼠标在图片上半部分向上滚动,鼠标在图片下半部分向下滚动;鼠标不在图片上停止滚动。2.页面元素<div id="box"> <img id="pic" src="images/03.jpg" alt=""> <span id="to-top"></span> <span id="to-bottom"></span></div>3.样式<style> *原创 2021-05-08 10:39:44 · 240 阅读 · 0 评论 -
JS基础-特效篇(定时器)06-定时器累加
1.定时器累加问题window.onload = function(ev){ var box = document.getElementById('box'); var height = 0; box.addEventListener('mouseover',function(ev1){ setInterval(function(){ height+=1; },1000) });}如上诉代码,每当鼠标进入,都会执行一次设置定时器,其实,当前会有很多定时器运行了!所以执行的时候,原创 2021-05-07 20:36:57 · 616 阅读 · 0 评论