jquery删除元素 jQuery删除元素属性 收藏 0

day57：jQuery事件

jQuery对象调用jQuery方法之后返回的还是jQuery对象所以就可以继续调用。

offset()方法：用于获取元素在页面中的具体位置（相对于浏览器窗口）

position()方法：用于获取元素在父标签中的具体位置（相对于父标签）

scrollTop()方法用于获取或设置一个元素的垂直滚动条的偏移量（即滚动条滚动的距离）。它适用于具有垂直滚动条的元素，如div、textarea或window对象。

使用scrollTop()方法，可以完成以下操作：

1. 获取滚动条的垂直偏移量：

这将返回元素的滚动条相对于顶部的偏移量，单位为像素。如果元素没有滚动条，返回值将为0。

2. 设置滚动条的垂直偏移量：

这将使元素的滚动条滚动到指定的垂直偏移量位置。参数`value`是一个数字，表示滚动条的新偏移量。

使用scrollTop()方法，可以在滚动事件中获取当前滚动位置，实现滚动到指定位置或实现滚动到顶部或底部等功能。

scrollLeft()：水平方向滚动条。

height()方法用于获取或设置一个元素的高度。

width()方法用于获取或设置一个元素的宽度。

innerHeight()方法用于获取窗口或容器的可视高度。即窗口的内部高度，不包括滚动条和边框。

innerWidth()方法用于获取窗口或容器的可视宽度。

outerHeight()方法用于获取窗口或容器的外部高度。

outerwidth()方法用于获取窗口或容器的外部宽度。

$(\’#d1\’).val()

$(\’#d1\’).val(520快乐 ) # 括号内不加参数就是获取加了就是设置

w.fn.init是jQuery库中的一个构造函数。它用于创建jQuery对象，以便在选择器中指定元素或创建新的元素。

为何要加索引？

`$(\’#d2\’)[0]`是通过jQuery选择器选中的元素集合，而不是单个元素节点。即使只选中了一个元素，jQuery返回的仍然是一个包含该元素的数组。

通过`[0]`索引可以取出数组中的第一个元素，即选中的单个元素节点。然后可以通过`.files[0]`来获取该元素节点的文件列表中的第一个文件。

因此，`$(\’#d2\’)[0].files[0]`的作用是获取通过id选择器选中的元素节点的文件列表中的第一个文件。如果不加索引`[0]`，则返回的是整个文件列表而不是具体的文件。

示例：

假设HTML结构如下：

使用$(\’#d2\’)[0]和$(\’#d2\’)分别输出的结果如下：

可以看到，使用$(\’#d2\’)[0]会直接获取到选中的元素节点，而使用$(\’#d2\’)则返回一个包含选中元素的数组。

在储存变量的时候，javascript推荐使用XXXEle来存储标签对象。

jquery推荐使用$XXXEle来存储标签对象。

attr是jQuery中用于操作元素属性的方法。可以获取或设置元素的属性值。

使用attr方法可以按照以下方式操作元素属性：

1. 获取属性值：

1. 设置属性值：

1. 设置多个属性值：

1. 移除属性：

注意，对于标签上有的能够看到的属性和自定义属性用attr对于返回布尔值比如checkbox、radio、option是否被选中用prop。

使用prop方法操作元素属性：

1. 获取属性值：

1. 设置属性值：

1. 设置多个属性值：

1. 移除属性：

append() # 内部尾部追加

prepend # 内部头部追加

$(\’#d2’).after($pEle) # 放在某个标签后面

$(\’#d1\’).remove() # 将标签从DOM树中删除

$(\’#d1\’).empty() # 清空标签内部所有的内容

克隆事件

返回顶部

自定义登录校验

on()方法用于添加事件监听器。它允许你在一个或多个元素上绑定一个或多个事件处理程序函数。

on事件

hover事件

键盘按键事件

按下键盘时，js会通过返回的数字来判断按下的按键。

jQuery编程挑战#012：生成菜单添加和删除动画效果

定义如下HTML代码：

• Java

• Javascript

• HTML

• CSS

• PHP

<script type=\”text/javascript\” src=\”http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js\”></script>

对应CSS如下：

/CSS源代码/

@import url(\’//cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css\’);

body{

background:#666;

color: #fff;

font-family: \’microsoft yahei\’,Arial,sans-serif;

}

ul{

list-style:none;

margin: 0;

padding: 0;

position: relative;

}

li{

padding: 10px;

margin: 2px;

border: 1px solid #888;

}

挑战要求

请使用jQuery实现：

点击页面，在#container容器元素的起始处添加新的li元素，内容文字为“更多语言”，并且包含一个删除按钮（动画效果为向下滑动出现）

点击每一个li对应的删除图标，当前li自动从当前列表中删除（动画效果为向左滑动消失）

提交方式：

录制完整代码编写过程或者最终代码：http://www.gbtags.com/gb/rtrecorder.htm

本帖中跟帖发布轻视频或者代码地址：http://www.gbtags.com/gb/rtreplayerpreview/189.htm

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com