jQuery之使用attr()获取、设置属性

323 阅读1分钟
<body>
    <ul>
        <li>地振高冈</li>
        <li title="godLandUp" name="">一派西山千古秀</li>
        <li>门朝大海</li>
        <li title="godLandDown" name="">三河合水万年流</li>
    </ul>
    <img src="" alt=""> //此处未给出图片源,调试请自行添加
    <button>删除</button>
    <script src="./jquery-1.12.4.js"></script> //js版本自行选取
    <script>
        //给第1个li添加属性“data-name”,对应值为“张三”
        $('li:eq(0)').attr('data-name','zhangsan')
        //弹窗显示第2个li的属性“title”的值
        alert( $('li:eq(1)').attr('title') )
        //给第3个li添加两个属性,用大括号{}包裹
        $('li:eq(2)').attr({qq:'52535715',Tweet:'Joat'})
        //给图片添加宽和高属性
        $('img').attr({width:'60px',height:'80px'})
        
        /* 后台返回的一些数据,可以存到dom的自定义属性身上 */
        let token = 'QWERTY';
        $('li:eq(0)').attr('data-token',token)
        
        $('img').click(function(){
            /* 没有这个属性就会返回undefined */
            let t = $('li:eq(0)').attr('data-token')
            alert(t); //浏览器界面弹窗出“QWERTY”
        })
        
        //移出刚刚添加的data-token属性
        $('button').on('click',function(){
            $('li:eq(0)').removeAttr('data-token')
        })
    </script>
</body>