![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
JS
小白白中之白
这个作者很懒,什么都没留下…
展开
-
js中各种宽和高
屏幕尺寸(screen)window.screen.heiht和window.screen.availHeightwindow.screen.width=window.screen.availWidth浏览器尺寸(inner和outer)window.innerHeight和window.outerHeightwindow.innerWidth和window.outerWidthwindow.innerWidth会受开发者工具影响截至上述所有均包含滚动条页面尺寸(client和off原创 2021-08-19 22:25:23 · 310 阅读 · 0 评论 -
scrollingElement和documentElement
区别与相同scrollingElement在MDN上的解释:界面的scrollingElement只读属性 Document返回对Element滚动文档的引用。在标准模式下,这是文档的根元素 document.documentElement.在 quirks 模式下,该scrollingElement属性返回 HTML body元素(如果它存在并且是潜在可滚动,否则返回 null。documentElement在MDN上的解释:Document.documentElement 是一个会返回文原创 2021-08-19 18:09:01 · 461 阅读 · 0 评论 -
js判断页面到达底部
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-08-18 21:03:00 · 129 阅读 · 0 评论 -
js取绝对值的两种方法
1:Math.abs();2:a>0?a:-a原创 2021-08-18 16:24:10 · 16255 阅读 · 0 评论 -
parseInt用法
MDN:从给定的字符串中解析出的一个整数。代码:<script> var a=parseInt("100px"); console.log(typeof(a)); </script>效果:原创 2021-08-18 16:07:25 · 243 阅读 · 0 评论 -
浏览器执行JS的过程
转载 2021-08-06 16:12:00 · 149 阅读 · 0 评论 -
setInterval和clearInterval
语法:var intervalID = setInterval(func, delay)clearInterval(intervalID)代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi原创 2021-08-06 16:09:47 · 87 阅读 · 0 评论 -
js中样式属性的书写规则
JavaScript和css中属性名称有哪些差异?主要有两个:JavaScript使用驼峰命名法,而css不是。JavaScript的属性值用字符串表示,而css不是。而导致这两个原因的就是JavaScript的语法。1、 在css中,属性名中的单词之间是用横杠隔开,如font-weight, background-color。但在JavaScript中,横杠可能被认为是减号,所以采用驼峰命名法,单词之间不用横杠,如font-weight在JavaScript中应该写成fontWeight;而转载 2021-08-06 15:54:40 · 700 阅读 · 0 评论 -
块级作用域和函数作用域
函数作用域与块级作用域函数作用域:在函数内部声明的变量只能影响到变量所在函数体本身,无法从外部对函数内部的变量进行调用,被称为‘函数作用域’块级作用域:ES6 引入了 let 和 const 关键字,JavaScript 也有了块级作用域。当代码块中存在 let 或 const,这个代码块就成为了块级作用域。ES6 的块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域。(即定义变量和使用变量只能在同一个{}里)var,let,const的区别varvar没有块原创 2021-08-03 15:44:07 · 2147 阅读 · 0 评论 -
classList
A.classList.add("") 添加一个类名A.classList.remove("") 移除一个类名A.classList.toggle("") 切换一个类名(有就删除,没有就添加)原创 2021-07-29 15:12:39 · 76 阅读 · 0 评论 -
window对象
红色框框内的为window对象原创 2021-07-29 13:57:05 · 52 阅读 · 0 评论 -
js鼠标事件
介绍mouseenter 划进mouseleave 划出mouseover 划进mouseout 划出mousemove 移动解释1和3的区别在于3支持冒泡(划进子元素也会执行)2和4的区别在于4支持冒泡(划出子元素也会执行)mousemove也会冒泡如何理解此处冒泡?当鼠标移上或者移出容器中的子节点时,会分别触发mouseover和mouseout事件,紧随着dom树向上冒泡传递,然后父元素刚好有该事件,所以该事件被执行。点击这里:能冒泡的事件...原创 2021-07-29 13:47:56 · 59 阅读 · 0 评论 -
querrySelector()无style
额,一个小小的问题发现通过类选择器选择出来没有style属性。但是写出来还是有效的原创 2021-07-29 12:34:40 · 258 阅读 · 0 评论 -
property和attribute,以及获取设置属性
在这里插个眼,说实话,没太明白区别和相同一般的内联属性为property和attribute共有,但自定义属性(内联样式中)为attribute所有。attribute中的class在property中叫做className(在取值和赋值时注意)取值和赋值(设值)的区别:3.1.attribute的取值和赋值:getAttribute(‘属性名’,‘属性值’),setAttribute(‘属性名’,‘属性值’)3.2.property的取值和赋值分别为:变量=对象.属性;对象.属性=属性值(不原创 2021-07-28 22:56:17 · 530 阅读 · 0 评论 -
JS笔记之this指向问题
参考文章:彻底理解js中this的指向,不必硬背。深入理解JS函数中this指针的指向MDN-this原创 2021-07-27 17:25:53 · 55 阅读 · 0 评论 -
JS日记之事件三要素
事件由三部分组成:事件源、事件类型、事件处理程序。例如:代码:<body> <button id="btn"></button> <script> var button=document.getElementById("btn"); button.onclick=function(){ alert('哈哈'); } </script></b原创 2021-04-29 16:44:44 · 265 阅读 · 0 评论 -
js日记之修改元素属性
代码: <script> var btn=document.querySelector('button'); var img=document.querySelector('img') btn.onclick=function(){ img.src='../images/2.jpg' } </script>原创 2021-04-29 16:49:09 · 52 阅读 · 0 评论 -
js日记之获取页面元素
如何获取页面元素一:根据ID获取通过getElementById()接口获取,由于文档页面是从上往下加载的,所以得现有标签,我们script写在标签下面代码:<script> var aa=document.getElementById('a'); console.log(aa); console.log(typeof aa);</script>效果:注意:1.括号内为’id名2.console.dir()返回对象原创 2021-04-29 00:01:24 · 192 阅读 · 0 评论 -
js日记之Math对象和Data对象
一:Math对象Math对象为内置对象,可以直接使用琪方法和属性。代码: <script> console.log(Math.PI); console.log(Math.max(12,54,1)); console.log(Math.max()); console.log(Math.max(1,2,'dsa')); </script>效果:二:Data对象Data为一个构造函数,必须使用new来调原创 2021-04-27 23:52:58 · 89 阅读 · 0 评论 -
js日记之对象
一:什么是对象对象是一个具体的事物,js中对象是一组无序的相关属性和方法的集合。可使结构更清晰。二:创建对象的三种方式1:利用字面量创建对象格式:{属性;方法;}代码: <script> var obj={ name:'张三', age:'18', sex:'男', SayHi:function(){ console.log("hi"原创 2021-04-26 17:28:27 · 73 阅读 · 0 评论 -
js日记之Dom
Dom强调一下内容:文档:一个页面就是一个文档,DOM中使用document表示、元素:页面中的所有标签都是元素,DOM中使用element表示节点:网页中所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示...原创 2021-04-28 22:49:18 · 82 阅读 · 0 评论 -
JS日记之数组
一:创建数组对象的两种方式1:利用字面量创建数组代码: <script> var arr1=[1,2,3]; console.log(arr1[0]); </script>效果:2:利用new Array()创建数组对象代码:<script> var arr1=new Array(2);/* 2为数组长度,内容为空 */ var arr2=new Array(2,3); console.lo原创 2021-04-28 22:26:21 · 53 阅读 · 0 评论 -
js日记之操作元素属性
方法一:element.属性方法二:element.getAttribute(‘属性’)区别:getAttribute可以获得自定义属性的值代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie原创 2021-05-02 19:01:50 · 50 阅读 · 0 评论 -
js小案例之显示隐藏文本框内容
代码:<body> <input type="text" value="哈哈"> <script> var text=document.querySelector('input'); text.onfocus=function(){ if (text.value=='哈哈'){ text.value=' '; } } &原创 2021-04-29 18:06:34 · 282 阅读 · 0 评论 -
js日记之排他思想
主要方法:1.所有元素全部清除样式(干掉其他人)2.给当前元素设置样式(留下我自己)代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2021-04-30 00:21:12 · 94 阅读 · 0 评论 -
js日记之获取鼠标坐标
clientX与clientY首先来了解什么是浏览器窗口可视区。红色小框框里的就是浏览器窗口可视区。浏览器窗口可视区可变化:看浏览器窗口可视区因为我的开发者工具而变小了!然后是坐标轴:看懂了没有!以浏览器窗口可视区的坐上顶点为原点向右,向下分别构成了X轴正方向和Y轴正方向!简单的代码:<body> <script> document.addEventListener('click',(e)=>{ consol.原创 2021-05-04 12:24:49 · 92 阅读 · 0 评论 -
js日记之事件委托
代码:<body> <ul> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> </ul> <s.原创 2021-05-03 16:33:06 · 38 阅读 · 0 评论 -
js日记之BOM
原创 2021-05-04 13:09:31 · 54 阅读 · 0 评论 -
js日记之节点操作
睡不着,半夜起来学习–2021年某日凌晨4:02一:父节点1:返回父节点element.parentNode,得到的是离元素最近的父节点。如果找不到则返回为null代码:<body> <div class="g"> <div class="f"> <div class="s"></div> </div> </div> <scrip原创 2021-05-03 11:04:29 · 204 阅读 · 0 评论 -
js日记之注册与删除事件
一:传统注册方式on开头的事件,例如onclick特点:注册事件的唯一性(同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数)代码:效果:二:方法监听注册方式addEventListener(‘事件’,函数)特点:同一个元素同一个事件可以注册多个监听器,按照注册顺序依次执行;IE9+(之前使用)一&二代码:<!DOCTYPE html><html lang="en"><head> <meta原创 2021-05-03 14:54:18 · 137 阅读 · 0 评论 -
js日记之阻止默认行为和阻止冒泡
阻止默认行为e.preventDefault()代码:<body> <a href="https://www.csdn.net/?spm=1011.2124.3001.4476">CSDN</a> <script> var a=document.querySelector('a') a.addEventListener('click',function(e){ e.preventDe原创 2021-05-03 16:17:24 · 65 阅读 · 0 评论 -
js之无法选中文字和禁止右键菜单小案例
代码:<body> <p>这是一段无法右键复制的文字</p> <p>这是一段无法选中的文字</p> <script> /* 禁止鼠标右键菜单 */ var p=document.querySelectorAll('p') p[0].addEventListener('contextmenu',(e)=>{ e.preventDefau原创 2021-05-04 11:11:49 · 515 阅读 · 0 评论 -
js日记之自定义属性
H5规定自定义属性data-开头作为属性名并且赋值。原创 2021-05-02 19:39:57 · 45 阅读 · 0 评论 -
JS日记之DOM事件流
光说不练假把式上demo!代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">..原创 2021-05-03 15:18:01 · 62 阅读 · 0 评论 -
js日记之事件对象
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&..原创 2021-05-03 15:54:01 · 81 阅读 · 0 评论 -
js日记之键盘事件
三个常见的键盘事件原创 2021-05-04 12:57:54 · 60 阅读 · 0 评论 -
js日记之location常见方法
代码:<script> var buttons=document.querySelectorAll('button') for(var i=0;i<buttons.length;i++){ if(i==0){ buttons[i].addEventListener('click',()=>{ location.assign('https://blog.csdn.net/m原创 2021-05-05 10:58:09 · 85 阅读 · 0 评论 -
js日记之倒计时跳转页面案例
代码:<body> <div></div> <script> var div =document.querySelector('div') var time =5 ; setInterval(function(){ /* div.innerHTML = `页面将在${time}后跳转` */ div.innerHTML = "页面将在"+time+"后跳转"原创 2021-05-05 10:58:20 · 52 阅读 · 0 评论 -
js日记之offset
element.offsetTop与element.offsetLeftoffsetTop和offsetLeft是相对于有定位的父元素的偏移,如果没有有定位父元素则是相对与document的距离.代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&.原创 2021-05-05 10:57:56 · 77 阅读 · 0 评论 -
js日记之history对象
原创 2021-05-05 10:58:15 · 42 阅读 · 0 评论