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

标题: 王文博--20221228-jq-day03 [打印本页]

作者: 博5237 时间: 2023-1-5 18:29
标题: 王文博--20221228-jq-day03
一、今日学习内容
属性操作
标准属性prop()
jq对象.prop('属性','属性值')---设置单个属性
jq对象.prop({
      key1：'value1',key2：'value2'
})---一次性设置多个标准属性

自定义属性attr()
jq对象.attr('属性','属性值')---设置单个属性
jq对象.attr({
      key1：'value1',key2：'value2'
})---一次性设置多个自定义属性

移除自定义属性
jq对象.removeAttr('属性')

data()
数据缓存：不会改变dom元素结构，在标签上不显示，但是可以通过标签的data()来存储
刷新页面之后，之前存放的数据都将被移除
数据缓存：数据存放在元素的内存里面
jq对象.data('属性','属性值')---设置单个属性
jq对象.data({
      key1：'value1',key2：'value2'
})---一次性设置多个自定义属性
事件委派
事件委派的原理：利用父级去触发子级的事件
bind():主要用于给选择到的元素进行事件绑定
语法：bind('事件类型',data,'事件处理函数')
data:传入函数的参数用event.data获取
特点：适用于静态页面，只能给调用他时已经存在的元素绑定，不能给未来新增的元素绑定
当页面加载完毕后，餐能进行bind

on():将监听事件绑定到就近父级元素
语法：on('事件类型'，选择器，事件处理函数)
动态添加的元素，也可以绑定上事件，也可以触发事件
选择器：实际触发事件的主体

一次绑定多个事件---同一个事件处理函数
语法：on('事件类型1 事件类型2 ...'，选择器，事件处理函数)

一次绑定多个事件---不同的事件处理函数
语法：on({
事件类型1：事件处理函数1，
事件类型2：事件处理函数2，
事件类型3：事件处理函数3
})
遍历
一维数组的遍历
第一个参数：索引
第二个元素：数组元素
语法：$.each(数组，function(i,v){js代码})
二维数组的遍历
原生方法
双重for循环
for (let i = 0; i < 数组.length; i++) {
         for (let j = 0; j < 数组[i].length; j++) {
            console.log(数组[i][j]);
            空数组.push(数组[i][j]);---输出为数组
         }
      }
jQuery方法
第一个参数：索引
第二个元素：数组元素
语法：$.each(数组，function(i,item){
         $.each(item，function(index,value){
            console.log(value);
            空数组.push(value);---输出为数组
        })
      })
   拉平对维数组
   flat()：拉平多维数组
   Infinity:有多少层就拉伸多少次
   语法：
     arr2.flat(Infinity)
      空数组 = arr2.flat(Infinity)---输出为数组
文本操作
.val()：相当于value
语法：jq对象.val()
文本内容修改
.text()相当于textContent innerText
语法：jq对象.text(内容)
.html()相当于innerHTML
语法：jq对象.html("内容");
操作dom
创建节点
语法：let dom = $("内容");
追加
语法：jq对象.html(dom);
增加节点
1.在父节点内容之前或者之后添加新节点
2.在兄弟节点之前后者之后添加新的兄弟节点

在父节点之后添加新节点
父节点.append(新节点)
新节点.appendTo(父节点)
在父节点之前添加新节点
父节点.prepend(新节点)
新节点.prependTo(父节点)

在兄弟节点之后添加新节点
兄弟节点.after(新节点)
新节点.insertAfter(兄弟节点)
在兄弟节点之前添加新节点
兄弟节点.before(新节点)
新节点.insertBfore(兄弟节点)
删除节点
empty()：删除所有的子节点，但自身还在
remove()：删除指定的jq对象,并删除自身。并且删除了绑定的事件
detach()：删除指定的jq对象，并删除自身。保留了绑定事件
复制节点
clone()
参数：默认值为false
true：复制节点的同时也复制之了事件
添加到目标节点中
二、今日问题

无

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