Web前端Js笔记
Js笔记
优惠券已抵扣
余额抵扣
还需支付
¥99.90
¥299.90
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
吴椰啵
快乐星球驾驶员
展开
-
65-JQuery操作节点
把匹配的元素插入到另一个,指定的元素集合前面。1.JQuery创建节点。2.父元素内部的末尾添加。3.父元素内部的开头添加。后面的从索引2补充上。删除完之后索引值自动。原创 2024-02-22 16:47:37 · 61 阅读 · 0 评论 -
64-JQuery动画
4.通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选的触发一个回调函数隐藏。2.通过高度变化(向上减小)动态的隐藏所有匹配元素,在隐藏完成后可选触发一个回调函数,第一个值为ture时,动画立即停止;第二个值为ture时,动画立即完成。3.停止所有在指定元素上正在运行的动画。为隐藏,元素隐藏切换为可见。5.添加自定义动画的函数。原创 2024-02-22 11:27:43 · 54 阅读 · 0 评论 -
63-JQuery语法,选择器,事件,方法,遍历循环each,attr(),.prop(),JQuery操作DOM
如果.next()如果括号中不写内容的话就找下一个,如果写的话就找给定的那个。1.一个JS库,用js封装很多的方法放到一个文件里面,直接拿了用就可以。10.4匹配所有紧接在prev元素后的next元素。通过选取HTML元素,并对选取的元素执行某些操作。文件名带min是压缩过的不带min是没压缩过的。5.jquery对象和DOM对象相互转换。10.2获得当前元素集合中每个元素的后代。10.3获得当前元素集合中每个元素的子代。5.1jquery转换成DOM对象。5.2DOM转换成jquery对象。原创 2024-02-21 21:15:35 · 98 阅读 · 0 评论 -
62-JS-canvas画布高斯模糊之图像操作
相当于图片路径,用于将canvas对象转换为base64位编码。把图像数据(从指定的ImageData对象)放回画布上。2.获取当前画布上各各像素点的数据的。用内置服务器打开,练习代码效果如下。将一张图片放到canvas画布上。原创 2024-02-20 21:10:49 · 228 阅读 · 0 评论 -
61-语义化标签(盒子),audio,video,canvas,渐变色,Math.sin/cos
小圆圆心的x坐标,小圆圆心的y轴坐标,小圆的半径,大圆圆心的x轴坐标,大圆圆心的y轴坐标,大圆的半径。,放大的是画布,需要保存当前状态sava()恢复到初始状态restore()1个Math.PI代表圆的一半,180度,用arc绘制一个圆形,如下。圆心的x位置,圆心的y位置,半径r,开始的位置,结束的位置。起点的x坐标,起点的y坐标,结束点的x坐标,结束点的y坐标。3.4.1.1 旋转rotate转的是画布,左上角点x坐标,左上角点y坐标,宽度,高度。左上角点x坐标,左上角点y坐标,宽度,高度。原创 2024-02-19 23:28:13 · 389 阅读 · 0 评论 -
60-JS-Ajax
(他可以自己保存东西cookie):无状态指的是不建立持久的连接,创建之后会把这个东西立马删掉。CSS:Cascading Style Sheets(层叠样式表)发送信息由Ajax负责发送,那么接受信息时,需要Ajax接受信息。浏览器方式请求:打开浏览器--输入请求地址--敲回车发送请求。1.ajax的使用,创建ajax对象,发起对服务器请求。ajax取数据的一种手段,局部刷新,例如弹幕。Ajax接收服务器返回信息,可以接收。创建新的HTTP请求,需要调用。左侧调用,右侧函数的封装。原创 2024-02-05 16:00:32 · 671 阅读 · 0 评论 -
59-JS-JSON语法,解析,序列化,JSON.stringify()第二个参数过滤,第二个参数传入函数,第三个参数排版
3.2.3序列化JSON.stringify()还提供了第三个参数,用于控制过滤。JSON就像是一串字符串,序列化和反序列化是处理字符串的一种方式。3.2.1序列划JSON.stringify()提供了第二个参数,用于。2.JSON语法 (可以表示3种类型的值:简单值,对象,数组),()控制排版缩进,可以是数字也可以是字符串,增加可读性。将json字符串解析成原生的JavaScript值。JSON文件是以.json为结尾的文件。3.json的解析(反序列化)和序列化。最常用的json结构,原创 2024-02-01 16:38:13 · 153 阅读 · 0 评论 -
58-JS-本的存储cookie,h5本地存储localStorage,sessionStorage,继承,onstorage
(每一个对象都有一个内部属性__proto__属性,属性的值可以是一个对象,也可以是null,如果他的值是一个对象,则这个对象也一定有自己的原型,这样就形成了一条线性的链,我们称之为原型链)1.4.1在写入一条和之前一样名的cookie,覆盖掉原有的,把失效时间设置为昨天 让新写入的达到失效的效果,最后看起来和删除的。3.1原型链继承,子类可以拿到父类原型当中的东西(缺点无法传参)3.2构造函数继承(可以传参,无法借用原型身上的东西)1.4删除cookie。子类的原型==父类的实例。原创 2024-01-31 16:31:05 · 140 阅读 · 0 评论 -
57-原型prototype,_ _proto_ _,isPrototype Of(),hasOwnProperty(),JavaScript中in操作符,混合模式
属性值是一个对象(属性的集合),默认的只有一个constructor属性,指向这个函数本身,原型是一个对象,其他对象 可以通过他实现属性继承。2.1如果当前实例化对象身上已经拥有实例属性,那么就找自身的属性,否则去找构建出来当前实例化对象的构造函数身上的原型属性。2.原型上的所有内容可以被实例共享 ,默认的指针指向的是原本的构造函数。实例化对象身上的属性,指向构造出来当前实例化对象的构造函数身上的原型。如果想访问原型中属性,那么就把实例属性删除掉就可以。(在实例身上时的属性)原创 2024-01-30 16:38:07 · 151 阅读 · 0 评论 -
56-主,回调函数,回调函数的参数传参,函数和变量的公私有,特权方法,立即执行函数,闭包(解除引用)
b函数在a函数之中,在a函数的外部无法访问b函数,即b是a的内部函数,也称之为私有函数。自己创建一个公共接口(公有方法),用来找到或返回内部私有变量 ,用公有方法访问私有变量。创建闭包常见方式是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量。2.将实参变为函数,将person方法作为参数(实参),传递给了sayName方法。3.同步回调,异步回调(延时器自己开始调用和其他函数没有关系)函数。定义了函数,没有调用函数,但最终执行了。4.2回调函数的参数在调用。(最终执行的函数),原创 2024-01-30 12:09:14 · 101 阅读 · 0 评论 -
55-工厂模式创建对象,instanceof检测,自定义构造函数
当函数被保存为一个对象的属性时,它就可以称为这个对象的方法(例如方法模式调用 this指向调用对象)工厂模式就是将创建的对象的语句放在一个函数里,通过传入参数来创建特定对象,最后返回创建的对象。检测,能检测原生构造函数格式创建出来的对象,但无法识别是由哪个函数生产出来的。3.工厂模式创建对象 ,批量创建(new方法返回的是一个对象)。5.1构造函数,this指向新实例化对象,没有return语句。3.1Object原生构造函数--->创建单个对象。3.2 工厂模式创建--->批量创建。原创 2024-01-29 11:42:50 · 42 阅读 · 0 评论 -
54-函数的3种定义,函数的4种调用:函数模式调用,方法模式调用,构造函数模式调用,apply call bind调用
5.apply(召集),或call(借用)方法调用;unction("形参1","形参2","形参3","方法体");区别:call和apply借用方法,会直接调用;用把函数当成一个对象的方法去使用,1.函数的声明定义:具有声明提升。方法和call,apply。2.函数的表达式定义。原创 2024-01-24 16:12:48 · 122 阅读 · 0 评论 -
53-JS之BOM,打开,关闭窗口,screen对象,history对象,location对象,工作区尺寸,滚动距离
可以理解为元素的可视高度(整体占位的宽高)7.1用于获取当前页面的地址(URL),并把浏览器重定向到新的页面,简单说就是可以给赋值,像使用open一样。记录浏览器访问的信息,当前页面跳转过哪一个页面,或者当前页面从哪一个页面跳转过来的。元素宽度(内容的实际宽高度(包含内容隐藏元素的高度)+上下padding)包含的属性描述了正在使用的浏览器,即包含有关浏览器的信息(了解即可)。,设置获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离。,设置或获取位于对象最顶端与窗口中可见内容的最顶部之间的距离。原创 2024-01-23 16:38:07 · 108 阅读 · 0 评论 -
练习作业,二级联动,三级联动,JS返回顶部,拖拽,放大镜
【代码】53.作业,二级联动,三级联动。原创 2024-01-22 17:01:45 · 45 阅读 · 0 评论 -
52-节点属性,DOM事件0级,2级,3级事件,事件冒泡,捕获,event事件对象,事件委托
DOM 0 级无法给一个处理程序(例如:onclick)添加多个处理函数 (处理函数例如:function)把第一个按钮的事件解绑,用覆盖的方式取消(在JS当中,下面的代码会覆盖上面的代码)同样可以阻止事件的传播,不同的是还可以把这个元素绑定的同类型事件也阻止事件了。元素节点的nodeName与标签名相同(大写)文本节点的nodeName永远是#text。(1)nodeName:节点的名称,只读。属性节点的nodeName是属性的名称。属性节点的nodeValue是属性值。原创 2024-01-22 16:31:08 · 201 阅读 · 0 评论 -
51-JS鼠标,键盘,表单,粘贴板,窗口事件,遍历节点树,DOM操作:创建/添加,删除,替换
打开一个页面,所有的东西都加载好以后,自动触发这个事件,在JS当中只能有一个window.onload;当整体html代码和JS代码加载时间不一样的时候,在整体的html和css代码都加载好以后,在执行JS代码(这样JS代码不会b报错),这个时候把所有代码放在window.onload里面可以做到这个效果。点击文本框,输入内容然后点击别的地方,也就是失焦,然后和失焦之前内容对比不一致,触发。按下,抬起,按下并抬起。当窗口尺寸改变的时候,会自动触发;点击文本框聚焦,实时触发,只要输入新的内容就触发。原创 2024-01-17 15:01:18 · 460 阅读 · 0 评论 -
50-Js控制元素显示隐藏
4.一个按钮:显示--->(变成)隐藏,并实现相应的效果。1.使用style样式,两个按钮:显示按钮,隐藏按钮。2.style样式,一个按钮:显示/隐藏。3.利用开关实现显示或者隐藏。原创 2024-01-16 19:24:32 · 381 阅读 · 0 评论 -
49-定时器,倒计时,清除定时器,延迟器
1.1当前时间距离放假过年还有多长时间,练习题。原创 2024-01-16 18:40:55 · 99 阅读 · 0 评论 -
48-DOM节点,innerHTML,innerText,outerHTML,outerText,静态获取,单机click,cssText,创建注释节点
1)文档节点 2)属性节点(标签内的属性href,src) 3)文本节点(标签内的文字) 4)注释节点 5)元素节点(标签)Document Object Module,文档对象模型,window对象,document文档,都可以获取和操作。创建两个a标签和两个img标签。2.2.通过class名获取。4.2获取两种按钮的内容。3.获取属性和元素节点。4.获取和操作文本节点。2.1通过标签名获取。2.3通过id名获取。原创 2024-01-16 11:07:51 · 209 阅读 · 0 评论 -
47-模拟数组,冒泡排序,数组去重,二分查找
2.模拟数组反转reverse()1.模拟数组查找方法。原创 2024-01-15 18:22:42 · 300 阅读 · 0 评论 -
46-数组创建,添加,删除,查找,反转,拼接,截取,转换,反转
当Array中只有一个数字的时候,代表是数组的长度。需要指定两个参数:要删除开始的位置,要删除的个数。数组-->字符串-->数组。可以删除任意数量元素并返回被删除的元素。在括号内部参数只有一个值,且这个值为。1.1字面量方式 添加数组。(字母都一个效果)的时候,会把这个数字设置为数组的。原创 2024-01-15 17:08:42 · 191 阅读 · 0 评论 -
44-js return返回值,全局作用域,局部作用域,隐式作用域,变量的生命周期,delete释放内存
全局变量和局部变量都是从被声明时开始;全局变量,直到页面关闭以后结束;局部变量,所在函数体调用以后结束。一个页面当中,局部变量多更好,局部变量用完可以及时删除,自动释放内存,全局变量会一直在很占内存。查找变量的时候,会从当前作用域开始查找,如果当前作用域查找不到,逐层(外层)向上查找。返回值:函数执行后剩下结果就是返回值。在函数体内部,没有使用var声明的变量。3.1全局变量生命周期。3.2局部变量生命周期。原创 2024-01-12 19:40:24 · 561 阅读 · 0 评论 -
43-函数的声明定义,函数表达式定义,函数的调用,声明提升,参数,形参,实参
4.声明提升:函数的声明定义具有声明提升,函数表达式没有。用形参和实参遍历数组。原创 2024-01-12 18:46:37 · 360 阅读 · 0 评论 -
42-单双多路分支,嵌套分支,switch分支,for循环,for in,while,do while,break,continue
js流程控制,代码的执行机制:顺序控制,分支控制,循环控制。1.顺序控制:就是按照代码的书写顺序,自上而下执行。3.3for in 遍历数据。2.5switch分支。3.2for循环遍历数据。6.continue继续。3.1for循环嵌套。原创 2024-01-11 16:01:20 · 431 阅读 · 0 评论 -
41-随机数.random(),ceil,floor,abs,比较两者或多者为较大值或较小值,round,找数组和对象的随机数
JavaScript数值操作,内置对象有:Math,Date,Array,String。1.4比较两者或多者为较大值或较小值。1.2向下取整floor。1.5四舍五入round。2.随机数random。1.1向上取整ceil。2.2找到对象的随机值。2.1找数组的随机数。原创 2024-01-09 17:50:03 · 413 阅读 · 0 评论 -
40-特殊运算符delete,new,.getDate,.setDate,运算符优先级
设置某一天(1-31);还有以下用法:2.setMouth()设置月份(0-11)3.setFullyear()设置年份4.setHours() , setMinutes() , setSecondes()2.2小练习:距离到4024/2/9 14:37:14还有XXX天XXX时XXX秒XXX毫秒。注意每周天数从0-6,月份从0-11,所以真实月份应该加1;再把得出来的一串数进行转换。原创 2024-01-09 16:23:37 · 440 阅读 · 0 评论 -
39-Javascript运算符,数字运算符,自增自减运算符,赋值运算符,比较运算符,与或非,三元运算符
=代表在原本自身的基础上,增加一个值;=一个等号是赋值运算。+加 -剪 *乘 /除 %取余。代表在原本值的基础上+1。++在前,先自增,后赋值;++在后,先赋值,后自增。代表在原本基础值上-1。原创 2024-01-09 10:29:15 · 755 阅读 · 0 评论 -
38-对象,数据类型转换:数字➡️⬅️字符串parseInt(),parseFloat取浮点,Number(),isNaN(),toString和String,.split(符号),布尔和运算符号
Number只要有不合法的部分,直接转换成NaN。如果开头是合法数字部分, parseInt正常保留,直到遇到不合法的部分不要。非数字返回ture,数字返回false。将当前的字符串以内部所书写的符号为分隔符 ,拆开成若干个字符串数组。不同点:在进行转换的时候,如果开头是不合法的部分,转换成NaN。一系列的属性和属性值的集合;字符串-------------->数字。数字----------->字符串。ture 是非0 ,false是1。以不合法开头的整数部分取整。,保留整数部分的同时。原创 2024-01-08 20:19:29 · 802 阅读 · 0 评论 -
37-数据类型,一元运算符typeof,字符串string,布尔Boolean,未定义undefined,空null,数组Array
简单数据类型(5种):数字number,字符串string,布尔boolean,未定义undefined,空null。3.布尔Boolean:用于表示逻辑上的真或假,只有两个取值:true和false。4.未定义undefined: 表示变量已被声明但尚未赋值,或者不存在某个属性或方法。字符串拼接,两者相加,如果其中一个为字符串,+作为连接的作用。凡是左右两侧被单引号或者双引号包裹的内容,就是一串字符串。5.空null: 表示空对象指针,表示变量没有,为空。字符串+字符串=字符串,数字+字符串=字符串。原创 2024-01-08 18:01:50 · 431 阅读 · 0 评论 -
36-javascript输出方式,弹框:普通,confirm弹框,prompt弹框,控制台输出:普通,warm,error
6.2警告信息warn。6.3 报错error。5.可输入内容的弹窗。原创 2024-01-08 16:05:09 · 932 阅读 · 0 评论 -
35-javascript基础,引入方式;变量命名规范
DOM:获取和操作html元素的标准方法;BOM:浏览器对象模型,包含所有浏览器的详细信息,可视区域高度(屏幕宽度,浏览器宽度,文档高度),定时器,延时器。高级:闭包,原型,原型链 jqueary。html分为三部分;结构html,表现css,行为js;js就是javascript。ECMAScript:简称ES,ES5,ES6核心语法。1.javascript引入方式。原创 2024-01-08 15:16:00 · 391 阅读 · 0 评论