一、 .attr(attrName,function(index,oldValue){})中index值
我们都知道.attr()方法中的通过返回值修改原属性的值的函数中的oldValue指的是元素修改前的值
但是很少能找到index值的用法的实例,只是简单说明了index是选中元素在同级元素中的索引值。这个概念很模糊,刚开始我以为是html文本流中的index。但通过实验发现并不单纯是。下面我们来详细说下index值的意义。
测试代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="text" value="设置value" />
<input type="text" value="获取value"/>
<input type="text" value="回调拼接value" />
<input type="text" name="test" value="删除value" />
</form>
<script type="text/javascript">
$('input:eq(2)').attr('value',function(i, val){
return i
})
</script>
</body>
</html>
刚开始我以为应该返回2.因为说是选中元素在同级元素的索引值么。但实际返回的是0
通过测试之后我发现 资料中所说的‘选中元素的同级元素’这个概念是指$(selector)中的selector。即index是指selector中元素的index【按他们在Html的index,而非在selector的index,即selector中的顺序不影响index值】 这么说可能有点乱,也有点绕。下面我举几个例子大家就明了了。
将$('input:eq(2)') 改为 $('input:eq(2),input:eq(1),input:eq(3),input:eq(0)')
就算你乱它们的本来顺序,返回的i也是按他们实际的索引号来排的。这种情况i= 0 1 2 3 ,input:eq(2)的i=2。
如果将$('input:eq(2)') 改为 $('input:eq(2),input:eq(1),input:eq(3)')
第一个例子是包含了所有的input,但如果不是包含了所有的情况又不一样了。这种情况i=0 1 2,input:eq(2)的i=1
所以总结下:
index总是以0开始,然后再按照selector元素在html的index值进行排序。
二、.html()和.text()的区别
.html()返回选择元素的内部html内容【即包含标签和内容】
.text()返回的是选中元素所包含的html中的内容的集合
.html(string)和.text(string)暂未发现区别 都会将选中元素的内容替换,如果选中元素是父元素,那么里面的标签和内容也会被替换掉。
如<selector><span>原内容</span></selector>
替换后: <selector>新内容</selector>
另外 .html()方法使用在多个元素上时,只读取第一个元素。而.text()讲读取所有选中元素的文本内容
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>.html()与.text()</h3>
<div class="left first-div">
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
</div>
<h4>显示通过html方法获取到的内容</h4>
<p></p>
<h4>显示通过text方法获取到的内容</h4>
<p></p>
<script type="text/javascript">
//显示出html方法获取到的内容
//.html()是整个html文档结
$('p:first').text( $(".first-div").html() ) ;
</script>
<script type="text/javascript">
//显示出text方法获取到的内容
//.text()是文本内容的合集
$('p:last').text( $(".first-div").text() )
</script>
</body>
</html>
结果如下图
.html()与.text()
:first-child 第二个元素 :last-child
:first-child 第二个元素 :last-child
显示通过html方法获取到的内容
<div class="div" data_liveedit_tagid="123FC548"> <a data_liveedit_tagid="123FC680">:first-child</a> <a data_liveedit_tagid="123FC850">第二个元素</a> <a data_liveedit_tagid="123FCA20">:last-child</a> </div> <div class="div" data_liveedit_tagid="123FCC88"> <a data_liveedit_tagid="123FCDC0">:first-child</a> <a data_liveedit_tagid="123FCF90">第二个元素</a> <a data_liveedit_tagid="123FD160">:last-child</a> </div>
显示通过text方法获取到的内容
:first-child 第二个元素 :last-child :first-child 第二个元素 :last-child