jquery通过索引值操作html元素的代码
更新时间：2023年05月01日 12:12:58 作者：maidu_xbd
这篇文章主要介绍了jquery通过索引值操作html元素的代码,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
eq() ：返回带有被选元素的指定索引号的元素。注意：索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
remove(): 移除被选元素，包括所有文本和子节点。
html()：返回或设置被选元素的内容。
attr()：设置或返回被选元素的属性值。如attr("class", "aaa time")
prepend()：被选元素的开头（仍位于内部）插入指定内容。
animationend 事件：在 CSS 动画完成后触发。
如何在jquery中使用eq()方法可以参考这篇文章 /article/59465.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.aaa {
color: red;
animation: mymove 4s
}
@keyframes mymove {
25% {
font-size: 30px;
color: chartreuse
}
50% {
color: blue
}
}
</style>
</head>
<body>
<div id="person">
<div><span id="t1" class="time">小明</span></div>
<div id="t2"><span class="time">小涛</span></div>
<div><span class="time">小花</span></div>
<div><span class="time">小刚</span></div>
<div><span class="time">小狗</span></div>
<div><span class="time">小毛</span></div>
</div>
<script src="http://9i0i.com/pic.php?p=jquery-1.7.1.min.js"></script>
<script>
// 1.移除页面上class=time的索引值为2的元素
$(".time").eq(2).remove()
// 2.设置页面上class=time的索引值为0的元素的内容为9999
$(".time").eq(0).html(9999)
// 3.设置页面上class=time的索引值为1的元素的class="aaa time"
$(".time").eq(1).attr("class", "aaa time")
// 4.隐藏页面上class=time的索引值为4的元素
$(".time").eq(4).hide()
// 5.往id=person的标签中第一行插入html
var name = "maidu"
$("#person").prepend("<div><span class='time' id=" + name + ">" + name + "</span></div>")
// 6.监听动画，当动画结束后去掉class=aaa
document.getElementsByClassName("time")[2].addEventListener('animationend', function (e) {
this.classList.remove("aaa")
})
</script>
</body>
</html>到此这篇关于jquery通过索引值操作html元素的代码的文章就介绍到这了,更多相关js索引值操作html元素内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了jQuery中元素选择器（element）用法,简单通俗的说明了jQuery元素选择器的功能、用法并结合实例形式分析了jQuery元素选择器的相关使用技巧与注意事项,需要的朋友可以参考下2018-05-05
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Jquery 获取表单text,areatext,radio,checkbox,select值的实现代码，学习jquery的朋友可以参考下。都是必须要了解的。2009-11-11
这篇文章主要为大家详细介绍了Jquery实现多选下拉列表左右移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.2011-04-04
这篇文章主要为大家详细介绍了jQuery表单事件实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了jQuery实现王者荣耀手风琴效果的代码内容，需要的朋友们可以学习下。2020-01-01
这篇文章主要介绍了jQuery使用$.ajax进行即时验证的方法,以完整实例形式较为详细的分析了jQuery前台控制ajax交互与后台asp.net响应处理的详细实现技巧,需要的朋友可以参考下2015-12-12
使用jquery读取html5 localstorage的值的方法
在HTML 5中，localstorage是个不错的东西，在支持localstorage的浏览器中， 能持久化用户表单的输入，即使关掉浏览器，下次重新打开浏览器访问，也能读出其值,很不错的一个东西，接下来实例介绍，需要的朋友可以参考下2013-01-01
这篇文章主要介绍了jQuery实现的分页插件,结合完整实例形式分析了jQuery分页插件的定义与使用相关操作技巧,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了jQuery遍历DOM节点操作之filter()方法,结合实例形式详细分析了filter的功能及4种具体用法,需要的朋友可以参考下2016-04-04
最新评论