JS
Listener丶
这个作者很懒,什么都没留下…
展开
-
原生touch事件
使用原因:click事件在移动端存在30毫秒的延迟,影响用户体验,故使用touch事件替换移动端的click事件原生事件:touchstart 开始触碰touchmove 触碰移动touchend 触碰结束上述三个原生事件每个都有三个触摸列表:touches 当前触摸到屏幕的手指列表targetTouches 触摸到当前绑定有事件的元素changedTouches 涉及到当...原创 2020-02-05 22:06:19 · 395 阅读 · 0 评论 -
移动端(视口、像素和rem)
meta标签: 告诉浏览器视口设置信息,是设置理想视口的重要元素,主要用于将布局视口的尺寸和理想视口尺寸相匹配其有五个具体的指令:width 设置布局视口宽度(一般都是device-width设备宽度)initial-scale 最初缩放比例maximum 最大缩放比例minimum 最小缩放比例user-scalable 是否允许用户缩放<meta name="viewp...原创 2020-02-05 20:42:46 · 359 阅读 · 0 评论 -
事件委托
原理:通过事件冒泡原理,将事件绑定到父级,触发时子级执行效果例:为列表的每个选项绑定事件:var ul = document.getElementsByTagName("ul")[0]; //获取元素ul.addEventListener("click",function(event){ //为父元素绑定事件监听 var num = event.target.className; ...原创 2020-02-03 14:29:47 · 177 阅读 · 0 评论 -
事件冒泡、事件捕获与事件监听
事件冒泡与事件捕获页面和互动是通过事件来完成的,事件捕获是指从document一直到触发事件的节点事件冒泡则是从触发事件的事件源一直向上到document(好比气泡一直往水面冒,事件往父级元素方向冒)[^冒泡的只是事件,并不事件绑定的处理函数。]不管是父级以上元素是否绑定了事件,冒泡都是存在的,只有人为手动的添加代码去阻止。**阻止事件冒泡的方法:**在执行函数中添加代码event.st...原创 2020-02-03 14:09:43 · 631 阅读 · 0 评论 -
Tween
Tween.js:一个JS库,其效果是可以让元素平滑地执行简单的动画效果使用方式:<script src = "tween.js" > < /script>在文件中引入tween.js文件具体方法:Linear:线性 (匀速)Quad: 二次方缓动效果Cubic: 三次方缓动效果Quart:四次方缓动效果Quint:五次方缓动效果Sine:正弦缓动效果E...原创 2020-02-03 12:46:27 · 247 阅读 · 0 评论 -
事件对象
thisthis的指向:在普通函数外部调用时:this指向windowalert( this ) 指向windowalert( this.a )指向window.a在普通函数内部调用时:this指向windowfunction( ) { console.log( this.a ); 指向window,相当于window.a }呢new构造器结合使用时th...原创 2020-02-02 19:59:16 · 133 阅读 · 0 评论 -
作用域,作用域链、闭包与匿名函数
作用域:作用域,即为变量开始创建到被系统回收的可使用区域全局作用域:在函数外创建或声明的变量,可在整个文件中获取/修改局部作用域:在函数内创建或声明的变量,仅可在该函数中使用,函数运算结束后收回块级作用域:被一对花括号包括的区域,性质与局部作用域相同(是ES6新增的功能)ES5中,只有函数可以生成局部作用域作用域链:先在当前作用域中新招,找到即执行,如果没有找到,则向上...原创 2020-02-02 19:37:05 · 109 阅读 · 0 评论 -
DOM(文档对象模型)
在浏览器中,DOM是window的子级,是window下最常用的一部分。Dom是文档中的最高点,html则是标签的顶端。Dom节点包括了所有的标签、文本、属性。通常情况下,DOM节点有以下五类 :Document 根节点 (文档节点):整个文档树的顶层节点Element 元素节点:网页的各种HTML标签(比如、<a>等)Attribute 属性节点:网页元素的属性(比如cl...原创 2020-02-02 15:22:06 · 291 阅读 · 0 评论 -
正则表达式
正则表达式(正则对象):用来匹配一段字符串的一些内容通常在注册页面使用,用于审核和约束用户输入的信息正则的创建:使用new关键字创建var reg = new RegExp( / 表达式 / );使用字面量方式创建var reg = / 表达式 /;正则的使用:1. 简单类:var reg = / a b c /; 表示所匹配的字符中含有abc字符即可var reg ...原创 2020-02-02 14:54:27 · 69 阅读 · 0 评论 -
定时器
普通定时器:setInterval 可设置重复触发的定时器var time = setInterval(function (){ 需要循环的代码串 },间隔时间); 每次执行定时器的间隔时间(单位为毫秒)单次定时器:setTimeout 仅会执行一次的定时器var time = setTimeout( function ( ){ 需要执行的具体任务...原创 2020-02-02 11:50:32 · 143 阅读 · 0 评论 -
时间
Date对象,是用来处理事件和日期的对象,内置一系列获取日期和时间的方法(他获取的时间是当前计算机的本地时间)创建date对象: var date = new Date ( );每次使用前都需要配合new关键字来生成date对象,然后通过date去调用各种方法toLocaleString 可以将事件对象转换为字符串格式date.toLocaleStringgetTime 可以返回一...原创 2020-02-02 11:34:23 · 139 阅读 · 0 评论 -
字符串的基本方法
1.字符串的创建传统方式var str = new String( " " );通过new关键字来创建新的对象,string对象来处理字符串字面量方式:var str = ' ';2.字符串的方法charAt 返回指定位置字符var s = str.charAt( 指定位置 )length 返回字符串的长度var long = str.lengthcharCod...原创 2020-02-01 18:43:12 · 99 阅读 · 0 评论 -
数组
1.定义:数组,是存储1个或多个数据的容器,是一组内存空间,通常用来批量处理数据,这组内存空间的名字叫做数据名存储数据管理:数组对其自身储存的数组没有限制,数量还是类型均可通过数组的下标来管理数组元素,不能直接通过数组名来操作数组元素,需要结合下标数组名0length:表示数组的长度,也就是数组当前存储的元素的个数(从0开始)2.数组的创建:var 数组名 = new Array( ...原创 2020-02-01 16:13:05 · 121 阅读 · 0 评论 -
math对象
math对象,是提供给开发者的内置常见数学公式的对象,所有math对象中的方法都会有返回值max( x , y ) 返回x、y中的最大值min( x , y ) 返回x,y中的最小值Math.random( ) 返回0~1之间的随机数Math abs( a )返回a的绝对值Math. e xp ( a ) 返回e的a次方Math.log ( a ) 返回a的自然对数(底数为e)Ma...原创 2020-02-01 15:07:20 · 129 阅读 · 0 评论 -
js中函数(初解)
1.函数的定义函数是被设计为执行特定任务的代码块,在使用时被调用2.函数的使用1.定义函数:function 函数名 ( 参数 ) { 声明函数时需要声明函数关键字、函数名 函数体(即所需要的执行的功能) }注意:1.函数只定义,如果不调用的话就不会执行2.函数在哪里调用,就在哪里执行3.函数的调用次数没有限制4.函数的函数名不能以数字开头,建议使用字母2....原创 2020-02-01 14:42:55 · 183 阅读 · 0 评论 -
JS中事件类型
在页面运行中,通过触发特定元素的事件类型,可以触发该事件的绑定函数通用的事件类型有:onload 当页面加载完成时触发window.onload = function(){}当页面加载完成后用此方法包裹所有的内联js代码,可以解决js获取html标签时还未加载的情况,同时提高用户体验onblur 失去焦点时触发标签名.onblur = function( ){ }onfoc...原创 2020-02-01 13:51:48 · 721 阅读 · 0 评论 -
JS中获取页面元素
在JS中,有四种方式可以获取页面元素:通过标签名var box = document.getElementsByTabName(“div”);获取页面中所有的div元素并在js中将他们都赋值给box通过class名var box1 = document.getElementsByClassName(“div”);获取页面中所有class名为div的元素并在js中将他们都赋...原创 2020-01-31 16:34:21 · 1069 阅读 · 0 评论 -
JS中常见的语句结构
1.if语句判断小括号中的表达式,如果正确,则返回它后接的大括号中的表达式,否则跳过基础形式:if(表达式){ 代码段 }次 联 式:if(表达式1){ 若表达式1正确,则执行代码段1,否则跳过,判断表达式2 代码段1 }else if(表达式2){ 若表达式2正确,则执行代码段2,否则跳过,去判断下一个表达式 代码段2 }else if...原创 2020-01-31 16:11:11 · 308 阅读 · 0 评论 -
JS中number数字类型的算术运算符
1.算数运算符可以操作常量,也可以操作并保存变量基础的算术运算符包括加、减、乘、除四种,以级取余算符(取余运算符取的是被整除后的余数)变量赋值可以修改,多次赋值会覆盖上一次的值,每个变量只存在一个,且要注意:赋值一定是声明过的变量,每个变量只能声明一次注意:若+号两边任意一遍是字符串类型(即被双引号包裹),那么运行拼接而非运算,这种字符串拼接的情况只存在于+号,其他运算符都不会出现,即使出...原创 2020-01-31 14:39:15 · 1328 阅读 · 0 评论 -
JavaScript简介
1.定义:Java Script(简称JS)是一种具有面向对象能力的解释型语言,基于对象和事件驱动,具有相对安全性的客户端脚本语言(不需要语言环境,浏览器即可运行)主要目的:验证发往服务器的数据,增加web互动,增加用户体验面向对象:编程思维的一种,初期接触面向过程 解 释 型:直接读取代码运行,不是编译型的(如java文件变异成class文件直接执行)对 象:指面向对象:windo...原创 2020-01-28 19:37:33 · 236 阅读 · 0 评论