菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 裴虎伟-前端(27)_20221228 [打印本页]

作者: faith 时间: 2023-1-5 22:42
标题: 裴虎伟-前端(27)_20221228
一、今日所学内容1、自定义属性
（1）获取标准属性：prop()
设置标准属性的值
获取标准属性的值
可以一次添加多个值，或者修改
当class属性为空时，得到的结果也为空
当获取的属性不存在时，返回undefined
removeProp()移除标准属性

（2）获取自定义属性：attr()
设置，可以一次添加多个值，或者修改
有属性名没属性值为空
没有属性名，没有属性值，为未定义
移除自定义属性：removeAttr()

（3）数据缓存：data()
不会改变dom元素结构，在标签上不显示，但是可以通过标签的data()来存取
刷新页面之后，之前存放的数据都将被移除
数据缓存：数据存放在元素的内存里
设置，可以一次添加多个值，或者修改

2、事件委派
（1）bind()
事件委派的原理：利用父级去触发子级的事件
bind():主要用于给选择到的元素进行事件绑定
bind('事件类型',data,'事件处理函数')
data:传入函数的参数用event.data获取
特点：适用于静态页面，只能给调用它时已经存在的元素绑定，不能给未来新增的元素绑定
当页面加载完时，才能进行bind

（2）on()
on():将监听事件绑定到就近父级元素
语法：on(事件类型，选择器，事件处理函数)
不写选择器时就是一个事件监听，写选择器可以作为事件委派
动态添加的元素也可以绑定事件，也可以触发事件
选择器：实际触发事件的主体
一次绑定多个事件

（3）事件委派（绑定事件）
绑定单个事件
一次绑定多个事件，同一个事件处理函数
多个事件处理函数分开写

（4）解除绑定事件
on---off
bind---unbind

3、数组的遍历和拉平多维数组
（1）数组遍历
一维数组的遍历
二维数组的遍历

（2）拉平多维数组
Infinity:有多少层就拉伸多少次

4、文本操作
text()：文本内容修改；text()相当于textContentinnerText
html()：相当于innerHtml

5、操作dom节点
（1）创建节点
直接使用$,可以直接添加文本和属性

（2）增加节点
在父节点内容之后添加新节点
父节点.append(新节点)
新节点.appendTo(父节点)

在父节点内容之前添加新节点
父节点.prepend(新节点)
新节点.prependTo(父节点)

在兄弟节点之后添加新节点
兄弟节点.after(新节点)
新节点.insertAfter(兄弟节点)

在兄弟节点之前添加新节点
兄弟节点.before(新节点)
新节点.insertbefore(兄弟节点)

（3）删除节点
empty():删除所有的子元素，但是自身还在
remove():删除指定的jq对象，并且删除自身;并且删除了绑定的事件
detach():删除指定的jq对象，并且删除自身;保留了绑定的事件

（4）复制节点
clone()：复制节点
参数：默认值为false
参数为true时，复制节点的同时也复制了事件

6、声明变量的方式
（1）var
ES5(2014年)，没有块级作用域
全局，局部（函数）
变量已经声明，但是没有赋值;结果为undefined
声明的变量，若有多个，前面的var无意义，只用最后一个

（2）let
ES6(2015年)：包含2015年，以及之后；有块级作用域
块级作用域{}，不能重复声明，必须先声明再使用

（3）const
ES6(2015年)：包含2015年，以及之后；有块级作用域
声明的是常量，声明之后不能重新赋值，声明的同时必须同时赋值
块级作用域{}，不能重复声明，必须先声明再使用

（4）var和let、const的区别
在块级作用域中用var定义的变量能在块级作用域中调用，出了该作用域也能调用
在块级作用域中用let、const定义的变量只能在块级作用域中调用，出了该作用域调用不了

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)