admin管理员组文章数量:1588274
1、js导读
渲染引擎:用了来解析html与css,俗称内核,如blink、webkit
js引擎:也称js解释器,用来读取网页中的js代码,对其进行处理运行,如chrome的v8
浏览器本身不会执行js代码,是通过js引擎(解释器)来执行js代码。js引擎执行代码时逐行解释每一句源码(转换为机器语言),然后通过计算机执行,所以js为脚本语言,会逐行解释执行。
JavaScript=ECMAScript(js语法)+DOM(页面文档对象模型)+BOM(浏览器对象模型)
ECMAScript:规定了js的变成语法和基础 核心知识,所有浏览器厂商共同遵守的一套js语法工业标准
DOM:文档对象模型,w3c组织推荐的处理可标记语言的标准编程接口,通过DOM提供的接口可以对页面上的各种元素进行操作
BOM:浏览器对象模型,提供了独立于内容、可以与浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等
2、变量
变量 是程序在内存中申请的一块用来存放数据的空间
使用var 声明变量,声明后,计算机自动为变量分配内存空间
只声明不赋值,输出为undefined
不声明不赋值直接用,会报错
不声明直接赋值使用,可以使用,但不提倡,会变成全局变量
有些变量有自身的含义,不能作为变量名如name
js变量数据类型只有在程序运行过程中根据等号右边的值进行判断,数据类型可动态变化
八进制,数字前加0,010=8
十六进制,数字前加0x,0x9
Number.MAX_VALUE 最大值
Number.MIN_VALUE 最小值
Number.MAX_VALUE*2 无穷大infinity
-Number.MAX_VALUE*2 无穷小-infinity
'abc'-100 非数字Na N
isNAN(12):判断是否是非数字,返回布尔值
str.length 字符串长度
加号字符串拼接,只要前面是字符型,后面无论是什么类型,都会变成字符型
布尔值参与加法运算当作1和0来算
未定义可以主动赋值:var a=undefined;可和字符串做连接运算
空值null加数值型为原数值型
typeof 变量:检测数据类型
prompt结果为字符型
字符串转换toString(),String(),加号拼接
parseInt('120px')=120 parseInt('qwe120px')=NaN
隐式转换(-*/)
''、0、NaN、null、undefined会转换为false,其余为true
编译器在代码执行之前进行编译,生成中间代码,解释器在运行时进行及时解释,并立即执行
避免浮点数直接参与运算,有精度缺失问题
表达式(数字+变量+运算符)的值为返回值
比较运算符的==号会有隐式转型(字符串与数值型 )
switch与case要全等匹配
数组
直接修改数组的length,多余的值为undefined
3、函数
function 函数名(形参1,形参0...){}
实参个数大于形参,多余的不参与运算
实参个数小于形参,多余的为undefined
函数如无return,则返回undefined
当不确定有多少参数传递时,用arguments来获取,所有函数都内置了arguments对象,存储了所有实参,他是一个伪数组,具有length,按索引存储,不具有push、pop方法
var 变量名=function(){} 函数表达式 匿名函数
作用域:限定名称的可用代码范围就是它的作用域,提高程序的可靠性和减少命名冲突
全局作用域:整个script标签,或者单独的一个js文件
局部作用域:在函数内部就是局部作用域
全局变量:在全局作用域下的变量,全局可用,在函数内部不声明直接赋值也是全局变量
局部变量:局部作用域下的变量,函数内部使用,形参也为局部变量
执行效率:全局变量只有在浏览器关闭时才会销毁,占内存资源,局部变量在程序执行完就会销毁,节约内存资源
在es6才有块级作用域{}
内部函数访问外部函数的变量,采取的是链式查找的方式来决定取值,也就是就近原则
js解释器在运行js代码时分两步:预解析和代码执行
预解析:js引擎会将js中所有var和function提升到当前作用域最前面
变量预解析:把变量声明提升到当前作用域最前面,不提升赋值
函数预解析:函数表达式声明函数时,和变量提升一样,函数提升只会提升var a;但是函数实现在调用后面前,所以会报错
var a=b=c=9;相当于var a=9;b=9;c=9;则b和c是全局变量
4、对象
对象:由属性和方法组成
属性:事物的特征,在对象中用属性来表示(名词)
方法:事物的行为,在对象中用方法来表示(动词)
构造函数:将对象里的一些相同的属性和方法抽象出来封装到函数里,是一种特殊的函数,用来初始化对象,构造函数首字母大写
构造函数是泛指某一类,对象则是特指某一个,利用构造函数创建对象也叫对象的实例化
new①构造函数在内存中创建一个空对象②this指向这个空对象③执行构造函数中的代码,给空对象添加属性方法④返回这个对象
for in遍历对象
js中对象分为三类:自定义对象、内置对象、浏览器对象
Math.PI圆周率
Math.max(),一组数的最大值,如果至少有一个无法转换未数字则返回NaN,无参数返回-infinity
Math.floor()向下取整
Math.ceil()向上取整
Math.round()四舍五入
Math.abs()绝对值,数字型字符串有隐式转换
Date()是一个构造函数需要new,无参数则返回系统当前时间
new Date()参数可为数字型(2019,10,1),返回时间月份比实际写的参数多1,字符串型('2019-10-01 8:8:8')
getFullYear() 返回当前日期的年
getMonth()返回当前月份0-11,所以实际要加1
getDate()返回当天日期
getDay()返回星期几,周日0到周六6
getHours()返回当前小时
getMinutes()返回当前分钟
getSecond()返回当前秒数
valueOf()返回距离1970年1月1日总毫秒数
getTime()返回距离1970年1月1日总毫秒数
+new Date()返回距离1970年1月1日总毫秒数
Date.now(),H5新增的返回距离1970年1月1日总毫秒数
数组对象
new Array(2):表示创建了一个长度为2的两个空元素
instanceof:运算符 检测是否为某个类型
obj instanceof Array
isArray():判断参数是否为数组,ie9以上支持
push():在数组末尾添加元素,可以写多个参数,返回值为新数组长度,原数组产生变化
unshift():在数组前面添加元素,可以写多个参数,返回值为新数组长度,原数组产生变化
pop():删除数组最后一个元素,返回值为删除的元素,原数组产生变化
shift():删除数组第一个元素,返回删除的值,原数组产生变化
array.reverse():翻转原数组
array.sort():排序原数组
a = [1, 4, 77, 5, 6];
• a.sort(function(a, b) {
• return a - b; 升序 降序b-a
• })
array.indexOf('pink',[起始位置]):查找元素在数组中的索引下标,只返回第一个满足的,如未找到返回-1,arr.lastIndexOf则相反
array.toString():数组转换为字符串
array.join(分隔符):以分割符显示字符串
concat()连接多个数组,不影响原数组
slice(begin,end):截取出新的数组
splice(第几个开始,删除的个数):返回新的数组,影响原数组
字符串对象
字符串不可变,修改是返回一个新的字符串
字符串查找和数组类似
charAt(index):返回指定位置的字符
charCodeAt(index):获取指定位置处的ASCII
str[index]:返回指定位置的字符
concat(str1,str2...)连接多个字符串等价于+
substr(start,length):从start位置开始(索引),length为取得个数
slice(begin,end):start开始,到end,end取不到
substring(start,end):从start位置开始,截取到end位置,end取不到,不接受负值
replace('被替换的字符','替换后的字符'):只替换第一个
split('分隔符'):字符串转换为数组
数据类型
值类型(简单数据类型):存储变量时存储值本身,由操作系统自动分配释放,类似于栈string,number,boolean,undefined,null
引用数据类型(复杂数据类型):存储变量时存储的是地址(引用),一般由程序员分配释放,如程序员不释放,由垃圾回收机制回收,类似于堆
通过new关键字创建的对象(系统对象、自定义对象),Object、Array、Date等
5、DOM
API:是一些预先定义的函数,给程序员提供的一种工具接口,以便于能更轻松的实现想要实现的功能,不需要管接口内部实现
Web API:是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
DOM:文档对象模型,w3c组织推荐的处理可标记语言的标准编程接口,通过DOM提供的接口可以对页面上的各种元素进行操作
W3C定义了一系列DOM接口,通过这些接口可以改变网页的内容、结构和样式
文档:一个页面就是一个文档,DOM使用document表示
元素:页面中的所有标签都是元素,DOM使用element表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM使用node表示
document.detElementById(id),匹配Element对象,若在当前Document下未找到,返回null
console.dir()打印元素对象,更好查看属性和方法
getElementsByTagName()获取指定标签名对象的集合(伪数组)
document.body获取body
document.documentElement获取html
事件
事件三要素:事件源、事件类型、事件处理程序
事件源:事件触发的对象
事件类型:如何触发,什么事件,如鼠标经过、鼠标点击
事件处理程序:通过一个函数赋值方式完成
innerText不识别html标签,非标准,innerHTML识别html标签,也保留空格和换行, W3C标准
element.className='',修改类名,会覆盖原来的
element.getAttribute('属性') 获取属性
element.属性=值,element.setAttribute('属性','值'),一般前者设置内置属性值,后者设置自定义属性值
element.removeAttribute('属性')移除属性
H5新增自定义属性规范,data-index=‘1’
H5新增从data集合中获取element.dataset.index或者element.dataset['index'] dataset中存放所有以data开头的自定义属性 data-list-name对应dataset.listName ie11
节点操作
网页中所有元素都是节点(属性,元素,文本),用node表示,DOM树中的所有节点均可通过js进行访问,所有HTML节点均可被修改、创建和删除
节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)三个基本属性
元素节点nodeType为1,属性节点nodeType为2,文本节点nodeType为3(文本节点包括文字、空格、换行等)
element.parentNode:获取离元素最近的父元素节点,无父节点返回为空
parentNode.childNodes:返回包含指定节点的子节点的集合,会识别到元素节点、文本节点等,一般不使用
parentNode.children:获取所有子元素节点
parentNode.firstChild:获取第一个子节点
parentNode.firstElementChild:获取第一个子元素节点,ie9
parentNode.lastChild:获取最后一个子节点
parentNode.lastElementChild:获取第最后一个子元素节点,ie9
node.nextSinling 获取当前元素的下一个兄弟节点,找不到返回null ,包含所有节点
node.previousSinling 获取当前元素的上 个兄弟节点,找不到返回null ,包含所有节点
node.ne g 获取当前元素的下一个兄弟元素节点,找不到返回null ie9
node.previousElementSinling 获取当前元素的上 个兄弟元素节点,找不到返回null ie9
var li=document.creatElement('li') 创建元素节点
node.appendchild(child)将一个节点添加到指定父节点的末尾,类似::after
node.insertBefore(child,指定元素)在父结点中指定元素前添加节点
node.removeChild(child)删除父节点中的 元素
href="javascript:;"或者href="javascript:void(0);"阻止链接跳转
node.cloneNode()返回节点的一个副本,克隆之后还需要添加,如果参数为空或者false就是浅拷贝,至科只克隆节点本省本身,不克隆子节点,括号中为true就是深拷贝
document.write('<div>123</di v>'):直接将内容写入页面的内容流,当文档流执行完毕,会导致页面重绘,只剩下添加的内容
element.innerHTML:内容是拼接字符串,每次开辟空间,效率会低, 可以用字符数组拼接来提高效率,比直接创建高
document.createElement():直接创建元素,结构清晰一些 ,效率会比拼接字符串高一些
事件高级
传统注册on开头的事件,但是同一个元素同一个事件只能设置一个处理函数 ,后注册的处理函数会覆盖前面注册的处理函数
方法监听注册事件 ,addEventListener()方法,ie9以前用attachEvent代替,同一个元素同一个事件可注册多个监听器(事件处理函数 ),按注册顺序执行
attachEvent事件监听 ,ie9以前
eventTarget.attachEvent('onclick',事件处理函数 )
传统事件删除eventTarget.οnclick=null
方法监听eventTarget.removeEventListener,需要事件监听器外置
attachEvent的解绑为detachEvent
DOM事件流
事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程叫DOM事件流
DOM事件流分为三个阶段:
①捕获阶段:从Document先接收到点击事件,但是无处理函数,往下一直找,直到找到事件源,成为捕获阶段
②当前目标阶段:事件执行者
③冒泡阶段:从目标阶段一直往上冒泡,都接收到点击事件,查询是否绑定处理函数,一直到Document
事件冒泡:ie最早提出,事件开始时由最具体的元素接受,然后逐级向上传播到DOM最顶层节点的过程
事件捕获:网景最早提出,由DOM最顶层结点开始,然后逐级向下传播到最具体的元素接受的过程,节点都会接收到点击事件,如果有处理程序就执行
js代码中只能执行捕获或者冒泡其中一个阶段
onclick和attachEvent只能得到冒泡阶段
addEventListener('click',function(){},true),第三个参数为true时处于捕获阶段
addEventListener('click',function(){},false),第三个参数为false时处于冒泡阶段 (默认)
onblur、onfocus、onmouseenter、onmouseleave无冒泡
事件对象
event就是一个事件对象,写在侦听函数括号里面,当形参使用,事件对象只有有事件才会存在,系统自动创建,不需要传递参数,事件对象是事件发生后事件的一系列相关数据的集合,如鼠标事件包含了鼠标的相关信息--鼠标坐标等,键盘事件--判断用户按下的键,event可以自己命名ie678通过window.event,e=e||window.event
e.target和this的区别:e.target返回的是触发事件的对象(点了谁就是谁),this返回的是绑定事件的对象,e.current也是返回绑定事件对象,有兼容性问题
e.type返回事件类型
e.preventDefault():阻止事件默认行为 低版本浏览器使用e.returnValue;在传统注册事件方式时,处理函数中直接return false也可以阻止默认行为
e.stopPropagation():阻止冒泡行为,ie低版本使用e.cancelBubble=true
事件委托(代理、委派)
原理:不是给每一个子节点单独设置事件监听器,而是将事件监听器设置在父节点上,然后利用冒泡原理影响设置每个子节点,只操作了一次DOM,提高了程序的性能
鼠标事件
contextmenu:鼠标右击事件
selectstart:鼠标选中事件
e.clientX和e.clientY:获得鼠标在可视区域的坐标
e.pageX和e.pageY:返回鼠标相对于文档页面的XY坐标,ie9+支持
e.screenX和e.screenY:距离电脑屏幕的坐标
键盘事件
onkeyup某个按键被松开时触发
onkeydown:某个按键被按下触发,比keypress更有先触发
onkeypress:某个按键被按下触发,但是不识别功能键如ctrl、shift
e.key:按键,但是兼容性问题很大,
e.keyCode:返回该键的ASCII 要区分大小写要使用keypress
6、BOM
BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象为window
BOM由一系列对象构成,并且每个对象都提供了很多方法和属性
BOM缺乏标准,js语法标准化组织时ECMA,DOM标准化组织时W3C,BOM最初是NetScape浏览器标准的一部分
BOM的顶级对象为window,BOM是浏览器厂商在各自浏览器上定义的,兼容性较差
window.οnlοad=function(){}等页面文档所有元素加载完再执行此事件,有了此事件可以将js代码写在页面元素的上方,但是只能写一次,以最后一个window.load为准
DOMContentLoaded事件触发时,仅当DOM加载完成时,不包括样式表,图片,flash等,适用于图片较多,从用户访问到onload需要较长的时间
window.onresize串口大小调整事件
window.innerWidth当前屏幕的宽度
定时器
window.setTimeout(调用函数,[延迟的毫秒数]):设置定时器,再定时器到之后执行调用函数,省略时间就默认为0,函数名也可以'函数名()',但是不提倡
回调函数:上一件事做完,再回头调用这个函数
window.clearTimeout(timeoutID):清除定时器
window.setInterval(回调函数,[间隔时间]):重复调用一个函数,每个这个时间就调用一次回调函数,window可省略
一般来说,this指向调用的对象,在全局作用域或普通函数中this指向window,定时器中的this也指向window,在方法中的this指向方法的调用者
js同步与异步
同步:前一个任务结束后再执行后一个任务,程序的执行顺序和任务排列一致、同步的
异步:在做一件事时,因为这件事会花费很长时间,在做这件事的同时,可以去处理其他事情
同步任务 :同步任务都在主线程上执行,形成一个执行栈
异步任务:js异步任务时通过回调函数实现的,异步任务相关回调函数添加到任务队列(消息队列)中
普通事件:如click、resize等
资源加载:如load、error等
定时器:包含setInterval、setTimeout等
js执行机制:把所有任务分为同步和异步任务, 先执行执行栈中的同步任务,异步任务(回调函数)放入任务队列中,一旦执行栈中所有的同步任务执行完毕,系统按照次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈开始执行
当有异步任务时,提交给对应的异步进程处理 ,异步任务完成,进入任务队列中,
由于主线程不断重复获得任务、执行任务、再获取任务、在执行,所以这种机制被称为事件循环
location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL,因为这个属性返回的是一个对象,所以也叫做location对象
location.href:获取或设置整个URL
location.host:返回主机(域名)
location.port:返回端口号,如果为空返回空串
location.pathname:返回路径
location.search:返回地址栏参数
location.hash:返回片段,也就是#后面内容,常见于链接、锚点
location.assign(url):页面跳转,记录了浏览历史,所以可以实现后退功能
location.replace(url):替换当前页面,不记录历史,所以不能后退页面
location.reload():重新加载页面,相当于刷新页面,如果参数为true,就是强制刷新(不用缓存数据,直接从服务器读取)
navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互,该对象包含用户(浏览器窗口中)访问过的URL
history.back():可以后退功能
history.forward():前进功能
history.go(参数):前进后退功能,参数是1就是前进一个页面,-1就是后退一个页面
PC网页特效
offset:offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等
注:获得元素距离带有定位父元素的位置
获得元素自身的大小
返回的数值不带单位
element.offsetParent:返回作为该元素带有定位的父级元素,如果父级元素都没有定位就返回body
element.offsetTop:返回元素相对带有定位父元素上方的偏移
element.offsetLeft:返回元素相对带有定位父元素左边框的偏移
element.offsetWidth:返回自身包括padding、边框、内容区的宽度、不带单位
element.offsetHeight:返回自身包括padding、边框、内容区的高度、不带单位
offset和style的区别:style只能获取行内样式表中的样式值,而且获得不包含padding和border的值,最重要的是style是可读写,而offset是只读
client:使用client系列相关属性来获取元素可视区的相关信息,通过相关属性可以动态得到该元素的边框大小、元素大小等
element.clientTop:返回元素上边框的大小
element.clientLeft:返回元素左边框的大小
element.clientWidth:返回自身包括padding、内容区的宽度、不带单位
element.clientHeight:返回自身包括padding、内容区的高度、不带单位
立即执行函数:(function(){})()或者(function(){}()), 不需要调用,立马能够自己执行的函数,第二个括号就是参数,立即执行函数作用就是,独立创建了一个作用域,里面是局部变量,不会有命名冲突
window.devicePixelRatio获得物理像素比
scroll:动态得到该元素的大小、滚动距离等
element.scrollTop:返回被卷去的上侧距离
element.scrollLeft:返回被卷去的左侧距离
element.scrollWidth:返回自身实际内容的宽度、不带单位
element.scrollHeight:返回自身实际内容 的高度、不带单位
scroll:滚动事件
window.pageYOffset:获得页面被卷去的距离
window.pageXOffset:获得页面左侧被卷去的距离
mouseenter与mouseover区别:mouseover会冒泡
动画函数封装
原理:通过定时器setInterval()不断移动盒子位置
参数:动画对象和移动到的距离
<script>
vardiv=document.querySelector('div');
functionanimate(obj, target) {
clearInterval(obj.timer);
obj.timer=setInterval(function() {
if (obj.offsetLeft>=target) {
clearInterval(obj.timer);
} else {
obj.style.left=obj.offsetLeft+1+'px';
}
}, 1);
};
animate(div, 400);
</script>
当不断点击按钮触发动画时,一直点击会加快速度,创建开启多个定时器,可以先将其他定时器清除,然后再执行代码
速度缓动公式:(目标值-现在的位置)/10 ,每次的步长
停止条件:让当前盒子位置等于目标位置就停止
动画函数添加回调函数:函数可以作为一个参数,将这个参数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去这个函数,这个过程就叫回调,位置写在定时器结束的位置
节流阀:当上一个函数动画内容执行完毕之后,再执行下一个,让事件无法连续触发 思路:利用回调函数,添加变量,执行之前取反操作,锁住函数和解锁函数
window.scroll(x,y):滚动窗口至文档中特定位置,不需要单位
7、移动端
触屏事件
touchstart:手指触摸到一个DOM元素时触发
touchmove:手指移动事件
touchend:结束事件,
触摸事件对象
e.touches:正在触摸屏幕的所有手指的一个列表
e.targetTouches:正在触摸当前DOM元素上的手指的一个列表,e.targetTouches[0].pageX手指的初始坐标,设置时最好阻止拖动默认行为
e.changedTouches:手指状态发生改变了的列表,从无到有,从有到无变化
transitionend监听过渡完成事件
classList属性:返回元素的类名,ie10以上
element.classList.add('')为元素添加类名
element.classList.remove('')为元素删除类名
element.classList.toggle('')为元素切换类名
移动端click事件会有300ms的延时,原 因是移动端双击屏幕会有缩放页面的效果
<meta name="viewport" content="user-scalable=no">
js插件:移动端要求快速开发,所以经常会借助一些插件。插件就是js文件,遵循一定规范,具有特定的功能且方便调用,如轮播图和瀑布流插件,特点就是为了解决某个问题而专门存在,功能单一,比较小
fasticlick插件:解决300ms延迟,引入js文件后,添加以下代码
if ('addEventListener' in document) {
• document.addEventListener('DCMContentLoaded', function() {
• FastClick.attach(document.body)
• },false)
• }
superslide、incroll、swiper插件都可以做轮播
zy.media.js视频插件,统一视频风格
框架:一套架构,基于自身特点向用户提供一套较为完整的解决方案,框架的控制权再框架本身,使用者要按照框架所规定的某种规范进行开发
插件:一般为了解决某个问题而专门存在,功能单一,比较小
8、本地存储
本地存储特性①数据存储再用户浏览器中
②设置、读取方便,甚至页面刷新都不丢失数据
③容量比较大,sessionStorage约5M、localStroage约20M
④只能存储字符串,可以将对象JSOM.string()编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、同一个窗口、页面下数据可以共享
3、以键值对形式存储
存储数据:sessionStorage.setItem(key,value)
获取数据:sessionStorage.getItem(key)
删除数据:sessionStorage.removeItem(key)
删除所有数据:sessionStorage.clear()
window.localStroage
1、生命周期永久有效,除非手动删除,否则关闭页面也会存在
2、可以多窗口、页面下数据可以共享(同一浏览器共享数据)
3、以键值对形式存储
存储数据:localStroage.setItem(key,value)
获取数据:localStroage.getItem(key)
删除数据:localStroage.removeItem(key)
删除所有数据:localStroage.clear()
复选框改变事件change
9、jquery
js库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,获取元素等,简单来说就是一个js文件,里面是我们对原生js代码进行了封装,快速高效的使用这些好的功能
jquery是一个快速、简洁的js库,封装了js常用的功能代码,优化了DOM操作、事件处理、动画设计和AJax交互
$是jquery的顶级对象,是jQuery的别称,可以使用jQuery代替
jQuery对象:使用jQuery方法获取的元素就是jQuery对象,本质是$对DOM对象包装后产生的对象(伪数组形式)
DOM对象:用原生js获取来的对象就是DOM对象
各自的方法不能混用
DOM对象转为jQuery:$(document.querySelector('video'))
jQuery对象转为DOM对象:$('div')[0]或者$('div').get(0 )
9.1 jqueryAPI
隐式迭代:遍历内部DOM元素(伪数组形式)的过程叫隐式迭代,也就是给匹配到的所有元素进行循环遍历,执行相应的方法,而不是我们再进行循环
选择器
$('').css('background','pink)
li:first,li:last,,li:eq(index),li:odd,li:even
son.parents(),children(亲儿子),find(后代),siblings(其余兄弟),
nextAll(当前元素之后的同辈),prevtAll(当前元素之前的同辈)
hasClass(是否包含某个类),eq(索引)
$(this).index()当前元素的索引号
链式编程
$(this).css('color','red').siblings().css('color','')
操作css方法
$(div).css('color‘)修改,
$(div).css('color','red')设置,
$(div).css('fontSize',18)值为数字可以不用引号和单位
$(div).css({width:30,heigth:50})对象方式可以不加引号,复合属性驼峰命名
$('div').addClass(),$('div').removeClass(),$('div').toggleClass()
jquery效果
show([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数
hide([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数,每个元素执行一次
toggle([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数,每个元素执行一次
slideDown([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数,每个元素执行一次
slideUp([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数,每个元素执行一次
slideToggle([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数,每个元素执行一次
事件切换
$('div').hover(鼠标经过函数,鼠标离开函数),只写一个经过离开都会触发
动画或效果队列及其停止
动画或效果一旦触发就会执行,如果多次触发,就会造成多个动画或效果排队执行
stop()用于停止动画或效果,写在动画或效果前,相当于停止结束上一次的动画
淡入淡出
fadeIn([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数,每个元素执行一次
fadeToggle([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数,每个元素执行一次
fadeOut([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数,每个元素执行一次
fadeTo(speed,opacity,[easing],[fn])
opacity:透明度必须写,0-1之间
speed:slow,normal,fast或者毫秒数值,必须写
easing:swing,linear
fn:回调函数,每个元素执行一次
自定义动画
animate(params,[speed],[easing],[fn]]):只有元素才能做动画
params:想要更改的样式属性,以对象形式传递,必须写,属性名可以不用引号,符合属性驼峰
speed:slow,normal,fast或者毫秒数值
easing:swing,linear
fn:回调函数,每个元素执行一次
$('div').animate({left:0})
设置或获取元素固有属性值prop()
$('a').prop('title','我是提示'):设置
$('a').prop('title'):获取
设置或获取元素自定义属性attr()
$('a').attr('index','1'):设置
$('a').attr('index'):获取
数据缓存data():数据存放在元素的内存中,页面无法看到,存在元素里面,当作变量,也可以获取data类自定义属性,不用加data,返回数值型
$('a').data('uname','1'):设置
$('a').data('uname'):获取
:checked:表单选择器
内容获取
$('div').html():获取设置元素内容
$('div').text():获取设置元素文本内容
$('div').val():获取设置表单值
each()方法遍历DOM元素
$('div').each(function(index,domEle){xxx;})
index:每个元素的索引号
domEle:每个DOM元素,不是jquery对象
需要使用jquery方法,需要转换对象
$.each()遍历对象
可以用于遍历任何对象,主要用于遍历数据,处理数据,比如数组、对象
$.each(obj,function(index,element){xxx;})
创建元素
$('<li></li>')
添加元素
内部添加:$('ul').append(li),放在最后面
$('ul').prepend(li),放在最前面
外部添加:$('ul').after(li),放在目标元素后面
$('ul').before(li),放在目标元素前面
删除元素
$('ul').remove():删除元素本身
$('ul').empty():删除匹配的元素集合中所有子节点
$('ul').html(''):请空匹配元素的元素内容
尺寸操作
width()/heigth():返回元素宽度高度,不包含其他
innerWidth()/innerHeight():返回元素宽度高度,包含padding
outerWidth()/outerHeight():返回元素宽度高度,包含padding,border
outerWidth(true)/outerHeight(true):返回元素宽度高度,包含padding,border,margin
位置操作
offset().top/left:返回元素距离文档的距离
offset({top:200,left:300}):设置元素距离文档的距离
position():返回元素相对于带有定位的父级元素的偏移,position只能获取
scrollTop()/scrollLeft():元素被卷去头部 和左侧
单个事件
element.click(function(){}):单个事件注册
事件处理on:绑定多个事件,多个处理程序,还可进行事件委托,可给动态创建的元素进行绑定事件,单个事件注册方式不能处理动态元素
$('div').on(event,[selector],fn),$('div').on(event1 event2,[selector],fn)
event:一个或多个空格隔开的事件类型
selector:元素的子元素选择器
off()方法移除on()方法添加的事件处理程序
$('ul').off('click','li')解除事件委托
one()只触发一次事件
自动触发事件
$('div').click()会自动触发已经写好的点击事件
$('div').trigger('click')
$('div').triggerHanler('click'):不出发元素默认行为
事件对象
event.preventDefault()或者return false:阻止默认行为
event.stopPropagation():阻止冒泡
拷贝对象
$.extend([deep],target,object1,[objectN])
deep:true为深拷贝,默认浅拷贝(保存了原对象中的复杂类型的地址)
target:要拷贝的目标对象
object1:待拷贝到第一个对象的对象,被拷贝的 ,多个合并覆盖
多库共存
使用就jQuery代替$符号,就可以jQuery与其余js库共存不冲突
使用自定义的符号代替$和jQuery
var s=$.noConflict()
图片懒加载
只加载用户看到的图片,滑动到可视区域才加载,减轻服务器负载
easyLazyload.js插件
全屏滚动插件
dowebok/demo/
Json字符串转换
JSON.stringify()
获取索引号时,只有亲兄弟才能顺序获取
10、类与对象
继承
子类再构造函数中使用super,必须放到this前面
元素插入:insertAdjacentHTML()
dbclick双击事件
.select()文本框文字选定
构造函数和原型
当构造函数中有方法时,每次实例化一个对象,都会去内存开辟一个空间存放一个相同的方法,但是内存地址是不一样的,所以费时费地
构造函数原型prototype
构造函数通过原型分配的函数是所有对象共享的
js中每一个构造函数都有一个prototype属性,指向另一个对象,这个prototype本身就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有
把那些不变的方法,直接定义再prototype对象上,这样所有构造函数的实例对象就可以共享这些方法,而且不同的实例对象调用的相同名字的方法,指向内存地址也一样,节约内存资源
一般,公共属性定义在构造函数里面,公共方法定义在原型对象里面
对象原型_proto__
对象自身都会有一个属性proto指向构造函数的protoytpe原型对象,之所以对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__
对象身上的对象原型proto __和原型对象prototype是等价的(===)
对象原型_proto__的意义就在于为对象的查找机制提供一个方向,或者说一条线,但是是一个非标准属性,因此实际开发中不能使用这个属性,他只是内部指向prototype原型对象
方法的查找规则:首先查找对象自身是否有这个方法,如果没有,由于每个对象身上proto属性的存在,就去构造函数原型对象prototype身上找这个方法
constructor构造函数
对象原型和构造函数原型对象里面都有一个contructor属性,称为构造函数,因为它指回构造函数本身
contructor主要用于记录该对象引用于哪个构造函数,他可以让原型对象指向原来的构造函数
构造函数、实例对象、原型对象的关系
原型链
对象成员查找机制
就近原则
原型对象this指向
原型对象扩展内置对象
apply():调用这个函数,并且求改函数运行时的this指向,参数只能是是一个数组形式,打印是字符串
bind():不会调用函数,只是你能改变函数内部的this指向
call():调用这个函数,并且求改函数运行时的this指向
fun.call(thisArg,arg1,arg2,......)
thisArg:当前调用函数this的指向对象
arg:传递的其他参数
call、apply、bind异同点
继承
可以通过构造函数+原型对象模拟实现继承,称为组合继承
①构造函数继承属性
②原型对象设置继承方法
类的本质
类的本质还是一个函数,也就是构造函数的另一种写法
语法糖:便捷写法
新增数组方法
①forEach(),map类似
②filter()
③some(),every类似
forEah和some区别
新增字符串方法
①trim()
对象新增方法
①Object.defineProperty()定义对象中新属性或修改原有的属性,不能被枚举就是不能被遍历
函数进阶
1、函数定义
严格模式
为脚本开启严格模式
为整个脚本开启严格模式,在所有的语句之前放一个特定的语句"use strict"或'use strict'
为函数开启严格模式
严格模式的变化
变量问题
this指向问题
函数变化
高阶函数
就是对其他函数进行操作的函数,接收函数作为参数或者将函数作为返回值输出
闭包
闭包指有权访问另一个作用域中的变量的函数,简单来说就是,一个作用域可以访问到另一个作用域的局部变量
闭包的主要作用就是延伸了变量的作用范围
匿名函数this是window
递归函数
浅拷贝和深拷贝
1、浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用
2、深拷贝拷贝多层,每一级别的数据都会拷贝
3、Object.assign(targetm...sources),es6新增方法可以浅拷贝
正则表达式
正则表达式是用于匹配字符串中字符组合的模式,在js中正则表达式也是对象
通常被用来检索、替换那些符合某个模式的文本、过滤页面内容中的敏感词、或者从字符串中获取我们想要的特定部分
1、利用RegExp构造函数创建
2、利用字面量创建
3、测试正则表达式test
test()正则对象方法,用于检测字符串是否符合该规则,返回布尔值,参数为测试字符串
量词符号
正则替换
replace:只能替换第一次
正则表达式参数
版权声明:本文标题:自学用——js(要点) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728025178a1142600.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论