day57:jQuery事件
链式操作
<p>111</p>
<p>222</p>
"""一行代码将第一个p标签变成红色第二个p标签变成绿色"""
$('p').first().css('color','red').next().css('color','green')
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签jQuery对象调用jQuery方法之后返回的还是jQuery对象所以就可以继续调用。
class Myclass():
def func1(self):
print('func1')
return self
def func2(self):
print('func2')
return self
obj = Myclass()
obj.func1().func2()
类似于python中的这种原理，函数返回值为self。便可多次调用。位置操作:
offset()方法：用于获取元素在页面中的具体位置（相对于浏览器窗口）
position()方法：用于获取元素在父标签中的具体位置（相对于父标签）
scrollTop()方法用于获取或设置一个元素的垂直滚动条的偏移量（即滚动条滚动的距离）。它适用于具有垂直滚动条的元素，如div、textarea或window对象。
使用scrollTop()方法，可以完成以下操作：
1. 获取滚动条的垂直偏移量：
const scrollTopValue = $(element).scrollTop(); #加参数就是获取这将返回元素的滚动条相对于顶部的偏移量，单位为像素。如果元素没有滚动条，返回值将为0。
2. 设置滚动条的垂直偏移量：
$(element).scrollTop(value); #不加参数就是赋值这将使元素的滚动条滚动到指定的垂直偏移量位置。参数`value`是一个数字，表示滚动条的新偏移量。
使用scrollTop()方法，可以在滚动事件中获取当前滚动位置，实现滚动到指定位置或实现滚动到顶部或底部等功能。
scrollLeft()：水平方向滚动条。
尺寸
height()方法用于获取或设置一个元素的高度。
width()方法用于获取或设置一个元素的宽度。
innerHeight()方法用于获取窗口或容器的可视高度。即窗口的内部高度，不包括滚动条和边框。
innerWidth()方法用于获取窗口或容器的可视宽度。
outerHeight()方法用于获取窗口或容器的外部高度。
outerwidth()方法用于获取窗口或容器的外部宽度。
文本操作
获取值操作
$('#d1').val()
$('#d1').val(520快乐 ) # 括号内不加参数就是获取加了就是设置
w.fn.init是jQuery库中的一个构造函数。它用于创建jQuery对象，以便在选择器中指定元素或创建新的元素。
$('#d2')[0].files[0] //获取id为"d2"的元素的files属性中的第一个文件。为何要加索引？
`$('#d2')[0]`是通过jQuery选择器选中的元素集合，而不是单个元素节点。即使只选中了一个元素，jQuery返回的仍然是一个包含该元素的数组。
通过`[0]`索引可以取出数组中的第一个元素，即选中的单个元素节点。然后可以通过`.files[0]`来获取该元素节点的文件列表中的第一个文件。
因此，`$('#d2')[0].files[0]`的作用是获取通过id选择器选中的元素节点的文件列表中的第一个文件。如果不加索引`[0]`，则返回的是整个文件列表而不是具体的文件。
示例：
假设HTML结构如下：
html复制代码<input type="file" id="d2">
使用$('#d2')[0]和$('#d2')分别输出的结果如下：
javascript复制代码console.log($('#d2')[0]);
// Output: <input type="file" id="d2">
console.log($('#d2'));
// Output:ce.fn.init [input#d2]可以看到，使用$('#d2')[0]会直接获取到选中的元素节点，而使用$('#d2')则返回一个包含选中元素的数组。
标签操作
在储存变量的时候，javascript推荐使用XXXEle来存储标签对象。
jquery推荐使用$XXXEle来存储标签对象。
attr是jQuery中用于操作元素属性的方法。可以获取或设置元素的属性值。
使用attr方法可以按照以下方式操作元素属性：
- 获取属性值：
javascript复制代码const value = $('#myElement').attr('attributeName');
- 设置属性值：
javascript复制代码$('#myElement').attr('attributeName', 'attributeValue');
- 设置多个属性值：
javascript复制代码$('#myElement').attr({
'attributeName1': 'attributeValue1',
'attributeName2': 'attributeValue2'
});
- 移除属性：
javascript复制代码$('#myElement').removeAttr('attributeName');
注意，对于标签上有的能够看到的属性和自定义属性用attr对于返回布尔值比如checkbox、radio、option是否被选中用prop。
使用prop方法操作元素属性：
- 获取属性值：
javascript复制代码const value = $('#myElement').prop('propertyName');
- 设置属性值：
javascript复制代码$('#myElement').prop('propertyName', 'propertyValue');
- 设置多个属性值：
javascript复制代码$('#myElement').prop({
'propertyName1': 'propertyValue1',
'propertyName2': 'propertyValue2'
});
- 移除属性：
javascript复制代码$('#myElement').removeProp('propertyName');append() # 内部尾部追加
prepend # 内部头部追加
$('#d2’).after($pEle) # 放在某个标签后面
$('#d1').remove() # 将标签从DOM树中删除
$('#d1').empty() # 清空标签内部所有的内容
jQuery事件
on()方法用于添加事件监听器。它允许你在一个或多个元素上绑定一个或多个事件处理程序函数。
按下键盘时，js会通过返回的数字来判断按下的按键。