前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于dom对象和jq对象的疑问

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

作者头像
Chor
发布2019-11-07 17:59:15
1.1K0
发布2019-11-07 17:59:15
举报
文章被收录于专栏:前端之旅

1.问题:

1.1 问题提出:

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

代码语言:javascript
复制
    <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>
代码语言:javascript
复制
<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对象

代码语言:javascript
复制
for(var i=0;i<allp.length;i++){
                $(allp[i]).attr("class",i+2);
            }

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

2).eq(i)

代码语言:javascript
复制
for(var i=0;i<$("div p").length;i++){
                $("div p").eq(i).attr("class",i+2) 。
            }

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

3).each遍历

代码语言:javascript
复制
$("div p").each(function(){
            $(this).attr("class",$(this).index()+2);
            })

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

代码语言:javascript
复制
$("div p").each(function(i, n){
            $(this).attr("class",i+2);
        })

其中,i表示index,n表示当前元素(可用this操作)

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

代码语言:javascript
复制
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。 综上,正确代码为
代码语言:javascript
复制
var allp=$("div p");
        allp.attr("class",function(i,n){
           return Number(n)+1;
        });

each( )遍历,控制台打印

代码语言:javascript
复制
 allp.each(function(){
            console.log(this);
        });

2 对象转换:

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

2.1 jq对象 = > dom对象
代码语言:javascript
复制
var $div=$(".div");    //jq对象
// 或者加索引值返回dom对象单体
var div=$div[0]; 
// 调用get()方法返回dom对象单体
var div=$div.get(i);  
2.2 dom对象 = > jq对象
代码语言:javascript
复制
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 条评论
热度
最新
推荐阅读
目录
  • 1.问题:
    • 1.1 问题提出:
      • 1.2 问题解决:
      • 2 对象转换:
        • 2.1 jq对象 = > dom对象
          • 2.2 dom对象 = > jq对象
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档