jquery通过索引值操作html元素的代码
eq() ：返回带有被选元素的指定索引号的元素。注意：索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
remove(): 移除被选元素，包括所有文本和子节点。
html()：返回或设置被选元素的内容。
attr()：设置或返回被选元素的属性值。如attr("class", "aaa time")
prepend()：被选元素的开头（仍位于内部）插入指定内容。
animationend 事件：在 CSS 动画完成后触发。
如何在jquery中使用eq()方法可以参考这篇文章 https://www.jb51.net/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="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 获取索引值在一定范围的列表方法
如下所示: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> jquery选择器: eq(index) 匹配列表中的第index个元素(index
-
JQuery 返回布尔值Is()条件判断方法代码
下面是JQuery的Is()方法判断: 复制代码 代码如下: $(function(){ $("ul").click(function(event){ var tar = event.target; if(tar.tagName == "STRONG"){ alert(tar.tagName); } }); }) 上面是原生JS判断: 复制代码 代码如下: $(function(){ $("ul").click(function(event){
-
jquery序列化表单去除指定元素示例代码
复制代码 代码如下: <html> <head> </head> <body> <form name="form1"> <input type="hidden" name="page1" class="flau_u_ro" value="1"></input> <input type="hidden"
-
jQuery实现获取元素索引值index的方法
本文实例讲述了jQuery实现获取元素索引值index的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
php 按指定元素值去除数组元素的实现方法
按指定元素值去除数组元素 复制代码 代码如下: <?php //去除值为"Cat"的元素 $a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse"); print_r($a); unset($a[array_search("Cat",$a)]);//array_search("Cat&
-
jQuery学习笔记之创建DOM元素
利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery使用$就可以直接创建DOM元素 复制代码 代码如下: var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript 复制代码 代码如下: var oNewP2 = document.createElement(&q
-
JQuery样式操作、click事件以及索引值-选项卡应用示例
本文实例讲述了JQuery样式操作.click事件以及索引值-选项卡应用.分享给大家供大家参考,具体如下: JQuery的css函数既能读属性值,也能写属性值: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式操作</title> <script src="http://libs.ba
-
jquery获取当前元素索引值用法实例
本文实例讲述了jquery获取当前元素索引值用法.分享给大家供大家参考.具体如下: 今天在做促销页面的图片轮转效果时,下方页码的左边需要对应显示图片的说明信息,效果如下: 思路: 页面部分当为当前状态的时候,会添加"active"样式. 通过获取 li class="active" 的索引值,对应找到相应的图片说明信息,显示出来. 解决: 通过jquery的 index() 可以很轻松的实现该效果. 代码如下: HTML: <div id="caro
-
jquery获取元素索引值index()示例
jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. 复制代码 代码如下: <ul> <
-
jquery 获取当前元素的索引值
JavaScript代码 $("li").hover(function(){ alert($("li").index(this)); }); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] .index函数还是很好用的.它的说明为: 搜索与参数表示的对象匹配的元素,并返回相应元素的索引值.如果找到了匹配的元素,从0开始返回:如果没有找到匹配的元素,返回-1.