jQuery中易混淆、错误理解概念总结（逐渐添加）

来源：互联网发布：java主流框架有哪些编辑：程序博客网时间：2024/06/16 18:54

一、 .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

0 0