4月4日作业（attr();css()）方法

4月4日作业（attr();css()）方法

一、arrt():

    1.传入一个参数：例如：var res = $('#pic').attr('src'):选择器：选择id为'pic'的元素的src值

    2.传入两个参数：var res = $('#pic')。attr('src', '../images/gyy.jpg')

    3.attr()中的第二个参数支持回调函数：var res = attr('pic', function(){})

    4.控制台输出:console.log(res)

二、prop():仅能获取元素的固有属性

    1.竟能获取元素的固有属性：var res = $('#pic').prop('alt')

    2.attr()可以获取之定义属性，prop()只能获取原生的属性

    3.removeProp():不能同时移除多个。不能删除自定义属性，只能删除动态设定的

    4.对元素中属性的操作：第二个参数设置false: var res = $('#pic').prop('alt', false)

三、在元素中存储数据：data()

    1.data()获取元素中属性名以data-开始的自定义属性:var res = $('#pic').data('job')

    2.data()也是一个纸袋读取器和设置器的方法：var res = $('#pic').data('data-course', 'php项目开发课程')

    3.removeData(),删除自定义属性:var res = $('#pic').removeData('alt)

四、设置元素的类样式

    1：<style>.circle{border-radius:50%;}</style>。$('#pic').addClass('shadow circle'):可同时添加多 个属性

    2：removeClass():删除元素中的属性：$('#pic').removeClass('circle shadow')

    3.样式的自动切换：toggleClass(),没有该样式，就自动添加：$('#pic').toggleClass('circle shadow') 

五、css()

    1.css()和attr()类似，自带getter/setter:设置样式,支持链式操作：var res = $('img').css('width', 200).css('border-radius', '10%').css('box-shadow', '5px5px 5px #888')

    2.批量设置：var res = $('img').css({

        "width":"200px",

        "border-radius":"10%",

        "box-shadow":"5px 5px 5px #888"

})

    3.获取当前图片的宽度：var res = parseInt($('img').css('width'))

    4.height(), width()函数：var res = $('img').width(200)方法，设置宽高 ==== css('width','200')

    5.定位：offset():var res = $('img').offset().left + 'px'

    6.position():var res = $('.box2').positon().left + 'px'

    7.scrollLeft()返回水平滚动条的位置

    8.scrollTop():返回垂直滚动条的位置。。。。console.log(res)