关于dom对象和jq对象的疑问

Chor

发布于 2019-11-07 17:59:15

1.1K0

发布于 2019-11-07 17:59:15

文章被收录于专栏：前端之旅

1.问题：

1.1 问题提出：

想要使所有div下的p标签的类名+1.因此采用下列办法：

    <div>
        <p class="1">1</p>
        <p class="2">2</p>
        <p class="3">3</p>
        <p class="4">4</p>
        <p class="5">5</p>
    </div>

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
    var allp=$("div p");
    for(var i=0;i<allp.length;i++){
        allp[i].attr("class","i+2");
        console.log(allp[i].attr("class"));
    }
</script>

结果控制台报错：

提示allp[i].attr()不是一个方法，而attr()是jq对象的方法，这个报错等于说allp[i]不是一个jq对象。参考stackoverflow ，可知$()[i]返回的的确不是jq对象，而是原生dom对象，无法使用jq方法attr() 。

关于如何判断是jq对象还是dom对象，可以用常用的instanceof方法判断，也可以用只有jq对象才有的jquery属性结合if语句判断。

那么，如何用jq实现上述功能？

1.2 问题解决：

1）转化为jq对象

for(var i=0;i<allp.length;i++){
                $(allp[i]).attr("class",i+2);
            }

allp[i]放在$()中则为jq对象

2).eq(i)

for(var i=0;i<$("div p").length;i++){
                $("div p").eq(i).attr("class",i+2) 。
            }

这是因为jq collection 对象的eq()方法将返回以参数值为索引值的单个元素.

3).each遍历

$("div p").each(function(){
            $(this).attr("class",$(this).index()+2);
            })

当然，因为each()本身可以传参，因此可以写成

$("div p").each(function(i, n){
            $(this).attr("class",i+2);
        })

其中，i表示index，n表示当前元素（可用this操作）

4).或者更简单的，配合回调函数使用

for(var i=0;i<$("div p").length;i++){
    $("div p").attr("class"，function(i,n){
        n=+2;
    })
}

以上是个错误的例子。

jq本身可以隐式迭代，所以这里的for循环完全是多余的，加了for循环反而是错的。隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用
在attr中将回调函数作为参数时，回调函数本身接受两个参数。具体到例子中，i为index，n为当前元素的当前值，也就是类名，这里的类名虽然为1到5，但是是string而不是number，所以需要用number( )进行类型转换才可以运算。
n最后必须return。综上，正确代码为

var allp=$("div p");
        allp.attr("class",function(i,n){
           return Number(n)+1;
        });

each( )遍历，控制台打印

 allp.each(function(){
            console.log(this);
        });

2 对象转换：

顺便这里总结下jq对象和dom对象的互相转换。我们知道，dom对象只能用dom对象自己的方法，jq对象只能用jq对象自己的方法，因此有时候如果jq对象必须使用原生方法时（或者反过来），就需要进行对象转换。

2.1 jq对象 = > dom对象

var $div=$(".div");    //jq对象
// 或者加索引值返回dom对象单体
var div=$div[0]; 
// 调用get()方法返回dom对象单体
var div=$div.get(i);

2.2 dom对象 = > jq对象

var div=documnet.getElementsByClassName("div");  //dom对象
// 直接用$()把dom对象给包装起来
var $div=$(div);
// 如果需要，可以用eq()返回jq对象单体
// $div.eq(i);

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-02-18，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度