jQuery 属性操作

最新推荐文章于 2022-12-12 11:37:34 发布

LI548

最新推荐文章于 2022-12-12 11:37:34 发布

阅读量732

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_55770974/article/details/121989750

获取自定义的属性值 +修改属性值

    
        //获取元素固有属性 prop()
        $('div').prop('class');
        //获取元素自定义属性 attr()
        $('div').attr('index');
        //数据缓存 data() 将数据存放在元素内存中 在DOM中看不见
        $('div').data('uname','div');
        //获取元素 data 属性 data() 只有数字则返回数字型数字 反之则为字符型 省去data-
        $('div').data('index')    
        //修改元素属性
        $('div').prop('class','div');
        $('div').attr('index','div');
        $('div').data('index','div');

被选中复选框的个数

$('.input:checked').length

获取和修改元素内容

        //获取元素内容
        $('div').html();
        //获取元素文本内容
        $('div').text();
        //获取表单内容
        $('input').val();
        //修改元素内容 ()中加入数据即可
        $('div').html('123');
        $('div').text('123');
        $('input').val('123');

小数位数

toFixed(2)

遍历对象

        //遍历dom对象 index=索引号 domle=对象
        $('div').each(function(index,domle){})
        $.each($('div'),function(index,domle){})
        //遍历数组 index=索引号 ele=值
        $.each($(arr),function(index,ele){})
        //遍历对象 index=属性名 ele=属性值
        $.each($(brr),function(index,ele){})

创建添加删除元素

        //创建元素
        var li=$('<li>3</li>');
        var div=$('<div>我是div</div>')
        //添加元素
        //内部添加  父子关系
        $('ul').append(li) //在后面添加
        $('ul').prepend(li)//在前面添加
        //外部添加  兄弟关系
        $('ul').after(div);
        $('ul').append(div);
        //删除元素
        $('ul').remove();//删掉该元素
        $('ul').empty();//删除元素中所有子节点
        $('ul').html('')//删除元素中所有子节点

获得元素宽高

        // width/height 返回元素宽/高 只有 width/height

        $('div').width();

        $('div').height();

        //更改元素宽高   在()中输入数字即可 下同

        $('div').width(122);

        $('div').height(222);

        // innerWidth/innerHeight 返回元素宽高+padding

        $('div').innerWidth();

        $('div').innerHeight();

        //outerWidth/outerHeight 返回元素宽高+padding+border

        $('div').outerWidth();

        $('div').outerHeight();

        //outerWidth(true)/outerHeight(true) 返回元素宽高+padding+border+margin

        $('div').outerWidth(true);

        $('div').outerHeight(true);

偏移位置

        // offset获得元素在文档中的偏移位置 left+top
         $('div').offset();
         $('div').offset().top;
         $('div').offset().left;
        //修改元素在文档中的偏移位置 left+top
        $('div').offset({
            left:200,
            top:100
        });
        // position 获得元素在具有定位的父级元素中的偏移位置 left+top 无法修改
        $('div').position();
        //scrollTop()/scrollLeft() 设置或获取元素被卷曲的头部和左侧
        $(document).scrollTop();//文档被卷去头部的距离
        $(document).scrollLeft();//文档被卷去左部的距离
        $(document).scrollTop(100);//设置文档被卷去头部的距离为100

返回顶部动画

             $('.back').click(function(){
            $('bory,html').animate({
                scrollTop:0
            })
            body,html 不能替换为document 因为只有元素才能做动画 document是整个文档