关于jQuery获取标签元素

//四张飞入的图片
<div id="box">
            <a href="fiction_book.php"><img src="img/fiction_book.jpg"></a>
            <a href="art.php"><img src="img/art_book.jpg"></a>
            <a href="technology.php"> <img src="img/technology_book.jpg"></a>
            <a href="children_book.php"><img src="img/children_book.jpg"></a>
        </div>

之前做一个图片飞入特效,找了网上的demo,但是只有图片,因为我要给图片加上超链接,加上超链接后图片飞入特效就出现了问题,原来只有两层,div下包裹了img标签,加了a标签后就变成了div标签下包裹了a标签下面还有一个子标签img这样在获取元素是就出现了问题,一直不知道如何获得img元素,在问过大神后终于解决了获取元素的问题。
原来获取元素的方法:

 $(document).ready(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() > 100) {
                        var box = document.getElementById("box");
                        var aImags = box.getElementsByTagName("img");                       
                        console.log(aImgs.length);
                        for (var i = 0; i < aImgs.length; i++) {
                            aImgs[i].className="on";
                        }
                    }
                });
            });

加了a标签后就不能这样获取了,修改后的方法:

 $(document).ready(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() > 100) {
                       // var box = document.getElementById("box");
                        //var aImags = box.getElementsByTagName("img"); 
                        var aImgs = $('#box img');//直接用选择器获得img元素                     
                        console.log(aImgs.length);
                        for (var i = 0; i < aImgs.length; i++) {
                        //这里aImgs[i]是jq对象所以要用addclass()方法
                            $(aImgs[i]).addClass("on");
                        }
                    }
                });
            });

原来的样式表

#box img:nth-child(1).on{
        left:-70px;
        width: 500px;
        height: 280px;
        transition: 0.5s 1s;
    }

样式表设置也要更改,nth-child()选择器为选择a标签下的第几个img标签

#box>a:nth-child(1)>img.on{
        left:-70px;
        width: 500px;
        height: 280px;
        transition: 0.5s 1s;
    }

这样带超级链接的图片飞入特效就改成功了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值