jq-- CSS 盒模型

来源：互联网发布：ansible控制windows 编辑：程序博客网时间：2024/05/21 13:54

css()

$(‘div').css(‘width’,’100px’) 设置单一样式比较简单的写法

可以连写 $(‘div’).css(‘width’,’100px’).css(‘height’,’100px’).attr(…..)

$(‘div').css({width:'100px',height:'100px',backgroundColor:’red'}); 设置多个样式的时候；

addClass()添加class样式 $('div').addClass('style1');

removeClass()移除class样式

toggleClass() 两套样式来回切换

attr() 设置或获取标签的属性 $("img").attr({ src: "test.jpg", alt: "Test Image" });

$("img").attr("src","test.jpg");

$("img").attr("title", function(){

return this.src

});

直接把css换成animate就有动画了

$(selector).animate(styles,speed,easing,callback) 第三个参数默认是swing,还有一个内置值linear 使用插件提供更多easing函数

$('#div1').animate({width:400,height:'400','},2000,'linear',function(alert('d');) 当然这里需要注意:只有数字值才可以创建动画,字符串是不可以的

轮播图 swiperjs

JQ的插件 jquery easing

盒模型：

width() --就是content的宽度；

innerWidth() -- content+padding

height()--innerHeight()

outerHeight()--括号中不包括参数的时候:content+padding+bording；

outerWidth()

outerHeight(true)--括号中写上参数true的时候:content+padding+bording+margin

outerWidth(true)

offset(),这个返回的是一个对象,里面有一些我们需要的属性,比如--offset().left

0 0