JS学习
关注
分享
扫一扫
sunset0827
这个作者很懒，什么都没留下…
展开
-
Tampermonkey/油猴/暴力猴编写监听/修改iframe内容
Tampermonkey/油猴/暴力猴编写监听/修改iframe内容原创 2024-11-24 11:37:47 · 715 阅读 · 0 评论 -
Echarts series-graph roam 缩放
这个事件找了我整整两天当echart不需要geo作为背景时使用echarts.on('graphRoam', (params: any) => { console.log(params);});echarts issues地址原创 2022-04-12 10:59:25 · 1963 阅读 · 1 评论 -
处理 URL 的查询字符串
new URLSearchParams()构造的实例可以查询字符串中的参数，如：var paramsString = "q=URLUtils.searchParams&topic=api"var searchParams = new URLSearchParams(paramsString);通过searchParams.get('q')即可拿到结果；react中获取到的url里的参数字符串也可以这样写const searchParams = new URLSearchP.原创 2021-11-04 15:59:34 · 455 阅读 · 0 评论 -
用js的requesAnimationFrame动画做弹跳球
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-07-26 17:50:40 · 2186 阅读 · 0 评论 -
jQuery入门-1
jquery的引入一般script标签写在body里的最下面,script的标签是按照顺序先后导入并执行的,在第一个script标签执行完毕之前不会执行第二个script,多个script标签,本质上是将其中的代码拼接在了一起,所以他们处于同一个全局作用域导入jquery必须写在使用它之前,然后再在下面创建script标签写js代码<script src="jquery.js"...原创 2018-08-03 20:43:27 · 406 阅读 · 0 评论 -
jQuery入门-2
首先引入jquery<script src="jquery.js"></script>$函数,参数如果是html字符串,用于创建元素,html字符串可以是嵌套复杂的html字符串,同时可以包含属性var $div = $("<div id='box'><span>123</span></div>&原创 2018-08-03 20:59:49 · 304 阅读 · 0 评论 -
jQuery入门-3,jQuery的链式调用及事件监听
jQuery的链式调用为什么可以链式调用?jq对象调用修改元素的方法之后,返回值还是对象本身$("#box") .text("文本内容") .css("color","red"); $("<div></div>") .css("width","100px")原创 2018-08-03 21:46:37 · 492 阅读 · 0 评论 -
jQuery入门-4,jQuery动画
动画还是代码效果演示比较好,复制粘贴,浏览器打开,根据注释理解 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2018-08-03 21:48:18 · 332 阅读 · 0 评论 -
js中if判断小技巧
在js种,条件判断的括号中可以写非布尔值写数字类型时,0被认为值假,非0都是真写字符串时,空字符串是假,非空字符串都是真undefined,null,NaN都被认为是假 任何对象都会被认为是真if(123){ console.log("真"); }else{ console.log("假"); }修改123为字符串对象等...原创 2018-08-03 21:51:56 · 517 阅读 · 0 评论 -
表单元素属性和事件
关掉input烦人的自动提示给input添加autocomplete="off"即可<input type="text" id="username" autocomplete="off">设置元素不可交互(input,select等表单元素)添加disable属性 <button id="regist-btn" disabled&quo原创 2018-07-27 11:52:57 · 1249 阅读 · 0 评论 -
JS构造函数
创建一个对象可以字面量创建或构造函数创建字面量创建对象例如:// 字面量创建对象 var p1 = { name:"sunset", speak:function(){ console.log("我是",+this.name); } }但如果需要创建多个同一类型(属性和方法都相同)的对象,使用字面...原创 2018-08-14 20:05:02 · 6876 阅读 · 1 评论 -
JS中改变this指向
在js中,函数也是对象,函数也有自己的属性和方法,先定义一个函数做例子 function test(a,b){ console.log(a+b); console.log(this); }这时候调用test,this指向window,原因看这里window对象和全局域然后创建一个对象var obj = {name:"wang"}***...原创 2018-08-14 20:13:17 · 1275 阅读 · 0 评论 -
JS类的继承/使用原型优化对象
类的继承在面向对象编程中,类是某一些具有相同特性的对象的集合,例如,猫,狗,鱼都可以抽象为动物,手机,电脑可以抽象为电子产品根据某个类所实例化的个体叫做这个类的对象(类实例化后就是对象,类是模板,对象是产品)如果A类是B类的子类,那么在设置这两个类的构造函数时,可以选择让A继承于B,例如function Animal(age,color,weight){ this...原创 2018-08-14 20:30:32 · 334 阅读 · 0 评论 -
JS-原型和原型链
先声明一个构造函数function People(name,age){ this.name = name; this.age = age; }把类的方法写在构造函数原型对象中,子类就不能再通过调用父类构造函数来继承方法(属性还是可以继承)// 给People的原型添加方法People.prototype.speak = function()...原创 2018-08-14 20:49:03 · 386 阅读 · 0 评论 -
JS-闭包和变量声明提前
闭包在函数A中声明了函数B,函数B中使用了函数A的作用域中的变量,且函数A返回(return)了函数B,那么函数B就对函数A的作用域形成了闭包,函数A调用完毕之后,只要返回的函数B存在,函数A的作用域也一直存在function makeFn(){ var n1 = 100; function fn(){ var n2 = 200;...原创 2018-08-14 20:55:04 · 528 阅读 · 0 评论 -
JS动画requestAnimationFrame
requestAnimationFrame,H5新出的方法 requestAnimationFrame函数,参数是一个函数,效果是在浏览器下一次刷新帧时调用这个函数浏览器对于页面的刷新频率是 每秒60次,相当于大约17毫秒一次.(当计算机资源不足时,可能会导致刷新率降低)function f2(){ console.log("帧刷新了"); timer = reque...原创 2018-07-25 21:35:51 · 846 阅读 · 0 评论 -
history对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-07-25 21:29:22 · 292 阅读 · 0 评论 -
JS中navigator对象
这个对象一般在我们想知道自己的浏览器型号时会用到其中常用的时userAgent属性 navigator对象,记录了运行当前页面的浏览器信息以及操作系统信息和一些硬件信息 navigator.userAgent属性,记录了浏览器类型,操作系统类型等 console.log(navigator.userAgent)...原创 2018-07-25 21:28:25 · 1083 阅读 · 0 评论 -
js元素对象的自定义属性
自定义属性一般用自定义属性选择器html标签的属性可分为html自带属性和自定义属性html自带的属性又分为通用属性和专用属性，例如id，class，title是通用属性，src，href是专用属性html标签还可以添加自定义属性对于自定义属性，浏览器在解析页面时会忽略这些属性在HTML标签中添加的属性叫做标签属性找到这个元素对象，通过打点访问的属性是这个对象的属性。这...原创 2018-07-23 21:33:13 · 2321 阅读 · 0 评论 -
js鼠标事件
贴代码和效果比较直观,实现点击切换颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2018-07-23 21:37:18 · 842 阅读 · 0 评论 -
js键盘事件
只有能够成为焦点的元素才能监听键盘事件如:input,a,button,body等表单元素onkeydown,键盘某个键被按下的事件.onkeyup,某个键弹起时的事件一般后面写匿名函数(当然也可以不是)document.body.onkeydown = function(e){ console.log("键盘上某个键被按下了"); conso...原创 2018-07-23 21:40:25 · 275 阅读 · 0 评论 -
js定时器的创建和取消
setTimeout函数,创建一个定时器,它可以实现延迟一段时间后执行某段代码有两个参数:第一个参数是定时器事件函数,表示需要延迟执行的函数,第二个参数是延迟时间,单位是毫秒返回值是一个定时器编号,通过这个编号可以在定时器触发前取消定时器var timer = setTimeout(function(){ console.log("3秒过去") },3000)...原创 2018-07-23 21:43:32 · 3490 阅读 · 0 评论 -
JS中对象和对象属性
对象创建格式:在js中可以使用字面量(直接量)创建对象,格式为:{属性名1:属性值1,属性名2:属性值2,......}属性名的命名规则与变量名相同var p1 = { name:"名字", age:20};可以使用 打点 的方式访问对象的属性console.log(p1.name);js特有功能:对象在创建之后可以添加新的属性 p1.s...原创 2018-07-18 22:19:15 · 321 阅读 · 0 评论 -
元素的尺寸和位置
如果有两个div嵌套,像这样<style> body{ margin: 0; } #box{ width: 100px; height: 80px; background-color: red; color: ...原创 2018-07-25 08:55:56 · 357 阅读 · 0 评论 -
js的scroll事件
这个代码是在id为box的div里写了很多p标签然后溢出,给#box设置overflow:scroll;然后在#box里滚动条滚动时就会输出<script> var box = document.getElementById("box"); // 元素对象的onscroll事件,当元素内容发生滚动时触发,它是一个频繁触发的事件 box.onscroll ...原创 2018-07-25 08:59:33 · 11652 阅读 · 0 评论 -
基本数据类型的自动装箱
自动装箱js中,number,string,boolean三种基本数据类型都有自己对应的对象类型number对应Numberstring对应Stringboolean对应Boolean只有对象才有属性和方法,基本数据类型没有属性和方法,但是在js中却可以使用基本数据类型调属性和方法,例如:"asd".length();"asd".split();因为:在js中,...原创 2018-07-19 21:46:39 · 300 阅读 · 0 评论 -
JS中数组常用方法
var arr1 = [4,5,6,3];//栈// .push,向数组的最后添加一个元素。arr1.push(10);console.log(arr1);// .pop，从数组最后删除一个元素。返回值就是删除的元素。var n = arr1.pop();console.log(n);console.log(arr1);// .unshift,向数组的最前边添加...原创 2018-07-20 11:37:14 · 232 阅读 · 0 评论 -
事件响应链
先附一张老师的图:这里少了一层html(当时懒得画)比如说两个div嵌套,然后点击内层div时,外层div也会响应onclick,如<div id="outer"> <div id="inner"></div> </div> 事件对象的stopPropagation方法,可以阻止事件的继续传播<s原创 2018-07-25 20:56:37 · 345 阅读 · 0 评论 -
js第三种添加事件监听的方法
前面写过在元素标签里写onclick();和获取元素通过js添加onclick,这次记addEventListener方法上一篇记事件响应链的时候记了两个div的嵌套时响应问题(响应链),这次还用嵌套来记addEventListener先准备好两个嵌套的div,并设置不同的背景色和大小<div id="outer"> <div id="inner">...原创 2018-07-25 21:06:49 · 7520 阅读 · 0 评论 -
js中事件默认行为
事件对象的preventDefault方法,可以阻止本次事件所触发的浏览器默认行为,例如a标签的href跳转,浏览器的F5刷新等等在点击事件里添加e.preventDefault()即可准备一个a标签就行<a id="link" href="http://www.baidu.com">百度</a><script> var lin...原创 2018-07-25 21:12:27 · 865 阅读 · 0 评论 -
window对象和全局域
DOM:document object model,文档对象模型 DOM的根对象是document,通过DOM可以实现对页面的修改和操作在开发过程中,有时也需要对浏览器本身进行一些设置,例如刷新页面,页面后退,前进等,这些操作是针对浏览器的,所以不能通过document进行,这时候用BOMBOM:browser object model,浏览器对象模型 BOM的根对象时window,...原创 2018-07-25 21:22:10 · 1063 阅读 · 0 评论 -
JS中location对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-07-25 21:25:56 · 821 阅读 · 0 评论 -
通过js修改元素html属性
通过js修改的样式实际上是修改了元素的行内样式获取元素对象:var title = document.getElementById("title");通过style属性修改样式,在css中样式名是通过 - 分隔,在js中,样式名要用驼峰命名法title.style.fontSize = "20px";textContent和innerHTML属性都用于修改元素的内容,区别是:t...原创 2018-07-23 21:25:14 · 13784 阅读 · 0 评论