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

最新推荐文章于 2021-11-25 15:18:22 发布

xueerjin

最新推荐文章于 2021-11-25 15:18:22 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： jquery

本文链接：https://blog.csdn.net/xueerjin/article/details/53572636

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

xueerjin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中易混淆、错误理解概念总结（逐渐添加）

一、 .attr(attrName,function(index,oldValue){})中index值我们都知道.attr（）方法中的通过返回值修改原属性的值的函数中的oldValue指的是元素修改前的值但是很少能找到index值的用法的实例，只是简单说明了index是选中元素在同级元素中的索引值。这个概念很模糊，刚开始我以为是html文本流中的index。但通过实验发现并不单纯是。下面
复制链接

扫一扫