JavaScript
曾吹雨
这个人很不懒,什么都想写~~
展开
-
JavaScript变量相关总结
直接量直接量:所谓的直接量,就是可以拿来直接使用的数据值。直接量一般分为两种,一种是字符串,另一种是数字。字符串:字符串一定要用引号””引起来数字:可以直接使用,只是阿拉伯数字,不管整、浮、正负、大小、都可以直接使用,不用加引号变量作用:存储数据声明变量:var name; //声明一个变量name对变量进行赋值name="刘"; //对变量进行赋值 // 定义一个变量 包含两个:声明变量、然后赋值 var suerName = "刘臭猪"; //.原创 2020-08-01 13:45:51 · 164 阅读 · 0 评论 -
JavaScript运算符及转义字符
转义字符\ +一个字符,组成转译字符.一般用于表示特殊符号常用的转译符:\n(换行)\b(退格)\t(缩进)关系运算符就是用来比较两者之间的一个关系 > < >= <= == != === !====: 判断两者之间是否相等,只是判断的值===: 是判断两者类型数据是否一样,再判断值是否相等关系运算符的结果要用boolean类型来表示。(true或false)复合赋值运算符其实就是将.原创 2020-08-01 14:08:50 · 586 阅读 · 0 评论 -
原生js制作PC端轮播图
功能分析1.鼠标经过离开轮播图左右按钮显示隐藏2.点击左侧按钮图片向左播放一张,右边同理3.拖欠播放同时,下面的小圆圈也跟着变化4.点击小圆圈,播放相应的图片5.鼠标不经过轮播图,轮播图自动播放6.鼠标经过轮播图,自动播放停止HTML标签的结构及css样式 <div class="box"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow-l"> &原创 2020-07-30 20:27:26 · 321 阅读 · 0 评论 -
JavaScript引入的三种方式(附实例)
内联在标签内直接引用 <div οnclick="alert('你好')"> 点我 </div>用script包裹 <script> alert("猪妹还没醒害"); </script>注意:此方法在HTML文件中任意位置都有效引入外部js文件方法:<script crc="../js/test.js"></script>.原创 2020-08-01 13:25:34 · 875 阅读 · 2 评论 -
bom本地储存(附实例)
本地储存随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性的在本地存储大量的数据,HTML5规范提出了相关解决方案本地存储的特性数据存储在用户浏览器中设置、读取方便、甚至页面花心不丢失数据容量较大,sessionStorage约5M、localStorage约20M只能存储字符串,可以将对象JSON.stringify()编码后储存1.window.sessionStorage生命周期为关闭浏览器窗口在同一窗口(页面)下数据可以共享原创 2020-08-04 20:47:55 · 377 阅读 · 0 评论 -
事件mousseenter和mouseover的区别
鼠标移动到元素上时就会触发mouseenter事件类似mouseover,它们两者之间的差别是mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发之所以这样,是因为mouseenter不会冒泡跟mouseenter搭配的鼠标离开事件mouseleave同样不会冒泡...原创 2020-08-04 17:30:45 · 166 阅读 · 0 评论 -
三大系列总结
三大系列对比element.offsetWidth返回自身包括padding、边框、内容区的宽度,返回数值不带单位element.clientWidth返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位element.scrollWidth返回自身实际宽度,不含边框,返回数值不带单位它们的主要用法:offset系列经常用于获得元素位置 offsetLeft、offsetTopclient经常用于获得元素的大小clientWidth、clientHeight原创 2020-08-04 17:26:26 · 157 阅读 · 0 评论 -
元素滚动scroll系列(附实例、图解)
元素滚动scroll系列属性scroll翻译过来就是滚动,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。属性详解element.scrollTop返回被卷去的上侧距离,返回数值不带单位element.scrollLeft返回被卷去的左侧距离,返回数值不带单位element.scrollWidth返回自身实际宽度,不含边框,返回数值不带单位element.scrollHeight返回自身实际高度,不含边框,返回数值不带单位页面被卷去的头.原创 2020-08-04 17:20:15 · 2879 阅读 · 0 评论 -
元素可视区client系列(附实例)
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息,通过client的相关属性可以动态获得该元素的边框、大小等。element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、内容区的宽度、不含边框,返回数值不带单位。element.clientHeight返回自身包括padding、内容区的高度、不含边框,返回数值不带单位原创 2020-08-04 17:11:04 · 370 阅读 · 0 评论 -
元素偏移量offset系列(附实例)
offset概述offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回数值都不带单位offset系列常用属性:element.offsetparent返回作为该元素带有定位的父级元素,如果父级元素没有定位则返回bodyelement.offsetTop返回元素相对带有定位父级元素上方的偏移element.offsetLeft返回元素相对带有相.原创 2020-08-04 17:00:43 · 703 阅读 · 0 评论 -
BOM知识点全面总结(附实例、图解)
目录BOM概述window对象的常见事件2.1 窗口加载事件2.2 调整窗口大小事件定时器3.1 两种定时器3.2 setTimeout()定时器3.3 停止setTimeout()定时器3.4 setInerval()定时器3.5 停止setInerval(0定时器3.6 thisjs执行机制4.1 js执行机制4.2 同步跟异步4.3 js执行机制location对象5.1 什么是location对象5.2 URL5.3 location对象的属性5.4 loc原创 2020-08-04 16:04:43 · 3964 阅读 · 0 评论 -
DOM之事件高级(附实例、图解)
目录注册事件(绑定事件)1.1 注册事件概述1.2 addEventListener 事件监听方式1.3 attachEvent 事件监听方式 (不建议使用,非标准)1.4 注册事件兼容性解决办法删除事件(解绑事件)DOM事件流事件对象4.1 什么是事件对象4.2 事件对象的使用用法4.3 事件对象的兼容性问题4.4 事件对象常用的属性和方法4.5 阻止事件冒泡4.6 事件委托(代理、委派)4.7 常用的鼠标事件4.8 鼠标事件对象4.9 常用的键盘事件正文1.原创 2020-08-03 15:10:15 · 381 阅读 · 0 评论 -
DOM的重点核心总结
目录创建增删改查属性操作事件操作正文1. 创建document.writeinnerHTMLcreateElement2. 增appendChildinsertBefore// 3.添加节点 node.insertBefore(child,指定元素);var lili = document.createElement('li');ul.insertBefore(lili,ul.children[0]);3. 删removeChild4. 改主要原创 2020-08-02 22:19:14 · 224 阅读 · 0 评论 -
DOM之节点操作总结(附实例、图解)
目录获取元素的两种方式节点的概述节点层级3.1 父级节点3.2 父子节点3.3 兄弟节点创建节点删除节点复制节点(克隆节点)三种创建元素的区别正文1. 获取元素的两种方式(1)利用DOM提供的方法获取元素document.getElementById()document.getElementsByTagName()document.querSelector等逻辑性不强、繁琐(2)利用节点层级关系获取元素利用父子兄弟节点关系获取元素逻辑性强,但兼容性差2.原创 2020-08-02 21:46:24 · 2814 阅读 · 0 评论 -
Web APIs概念详解(附图解)
目录JavaScript的组成js跟Web APIs的区别API和Web API3.1 API3.2 Web API3.3 API跟Web API总结正文JavaScript的组成js跟Web APIs的区别js基础:掌握基础语法,做不了页面交互效果Web APIs阶段:js的应用,大量使用js基础阶段的内容API和Web API3.1 APIAPI(Application Programming Interface, 应用程序编程接口)是一些预先定义的函数原创 2020-08-02 14:27:31 · 689 阅读 · 0 评论 -
JavaScript对象相关及json总结(附实例)
目录对象创建的两种方式1.1 通过new创建一个对象1.2 通过对象字面量的形式创建一个新的对象两种方式获取对象的值json正文对象创建的两种方式1.1 通过new创建一个对象 // new的方式创建 var arr = new Array();1.2 通过对象字面量的形式创建一个新的对象数组字面量创建对象: // 数组字面量的方式创建 var arr1 = [];通过对象字面量的形式创建一个空的对象var o = {};往用对象字面量的形式创建一个对象并且赋原创 2020-08-02 14:03:19 · 146 阅读 · 0 评论 -
JavaScript中字符串相关总结(附实例)
目录charAt 获取指定位置处的字符charCodeAt 返回指定字符元素的ASCLL码值Concat 字符串连接Slice 字符串剪切Substring 截取字符串Substr 截取字符串trim去除空白字符串大小写转换replace替换指定字符split分割字符串前言 字符串的相关操作其实可以对应数组正文声明两个字符串var str = 'liuzhixin';var str1 = 'zengchuiyu';charAt 获取指定位置处的字符atr.c原创 2020-08-02 10:53:33 · 213 阅读 · 0 评论 -
JavaScript内置对象之Array对象总结(附实例)
目录两种创建方式操作数组2.1 concat两数组连接2.2 concat两数组连接2.3 splice剪切数组2.4 push 数组添加元素2.5 pop 删除数组最后一个元素2.6 Shift 删除数组第一个元素2.7 Unshift 从数组的前面给数组添加元素2.8 indexOf 查找指定元素数组下标2.9 LastIndexOf 反向查找指定元素数组下标2.10 Join数组间隔2.11 Reverse数组翻转2.12 Sort 数组进行字符串的排序2.13 Ins原创 2020-08-02 09:49:57 · 265 阅读 · 0 评论 -
JavaScript实现秒杀倒计时效果(附源码)
正文整体效果如图HTML结构如下:<div class="box"> <span class="hour">1</span> : <span class="minute">2</span> : <span class="second">3</span> </div>大盒子装着三个小盒子,小盒子1、2、3依次为时、分原创 2020-08-02 09:48:58 · 6929 阅读 · 6 评论 -
JavaScript日期对象Date总结(附实例)
目录日期对象Date日期转换日期对象的使用获取指定的时间正文日期对象Date引用方法:Date对象是js中的内置函数对象,在使用时必须先去newvar 名字 = new Date();date.toDateString()console.log(date.toDateString());//老外喜欢的一种时间显示方式结果:Tue Jun 09 2020date.toLocaleDateString()console.log(date.toLocaleDateS原创 2020-08-02 09:48:33 · 388 阅读 · 0 评论 -
JavaScript内置的Math对象(附实例)
前言只举例常用的正文求一个数的次幂Math.pow(2,5) console.log(Math.pow(2,5)); //3 // 求一个数的多少立方根, console.log(Math.pow(3,1/5));四舍五入Math.round(); console.log(Math.round(0.6)); //1 console.log(Math.round(3.1)); //3天花板函数,向上取整Math.ceil(); cons原创 2020-08-01 16:46:23 · 280 阅读 · 0 评论 -
函数的基本知识点总结(附实例)
目录函数函数的几种形式关于函数返回值函数的两种定义方式全局变量跟局部变量伪数组对象argument(函数的重载)自执行函数回调函数正文函数函数(方法):本质上就是讲重复使用的代码给封装起来定义一个函数function 函数名(){ 要执行的代码(重复的代码); }引用函数:函数名();函数的几种形式1.无参数无返回值2.无参数有返回值3.有参数无返回值4.有参数有返回值返回值用 return 值;关于函原创 2020-08-01 16:00:58 · 949 阅读 · 0 评论 -
JavaScript中的语言结构知识点总结(附实例、图解)
目录js中的语言结构If的用法If-esle的用法If -else-if结构Switch-case结构If-else-if与switch-case的区别for循环for…in 循环三元表达式什么是表达式While循环break跟continue短路运算正文js中的语言结构顺序结构:页面在执行js代码时,从上到下依次执行分支结构:if if else选择结构:代码在执行时出现分叉,需要我们做出选择,然后执行代码if else if switch原创 2020-08-01 15:30:01 · 243 阅读 · 0 评论 -
JavaScript中的数据类型及数据类型转换(附实例)
目录数字类型(Number)字符串类型(String)无定义类型(undefined)string转成number隐式转换string转成number显式转换其他类型转换成string其他数据类型转Boolean正文数字类型(Number)最基本的数据类型不区分整型数值和浮点型数值能表示的最大值是±1.7976931348623157乘以10的308次方能表示的最小值是±5 乘以10的-324次方字符串类型(String)字符串由单引号或双引号括起例如单独一个原创 2020-08-01 14:45:22 · 339 阅读 · 0 评论