2019-06-14 jQuery属性操作 jQuery特殊效果 jQuery动画

1.属性操作

$(function(){

/*

alert($('.box').html());//这是一个div元素

$('.box').html('百度网');

*/

/*

读写值为布尔类型的属性用prop方法

读写值为非布尔类型的属性用attr方法

*/

/*

$('.box').attr({title:'这是一个div!'});//写入title属性，并赋值

alert($('.box').attr('class'));//读属性class的值，弹出box

*/

/*

var $src = $('#img1').attr('src');

alert($src);//img/1.png

$('#img1').attr({

src:'img/2.gif',

alt:'图片二'

});

*/

/*

alert($('#check').prop('checked'));//选中为true，非选中为false

$('#check').prop({checked:true});//设置默认勾选

*/

// alert($('.box2').html());//这是div元素内的span

alert($('.box2').text());//这是div元素内的span

})

2.jQuery特殊效果

$(function(){

$('#btn').click(function(){

// $('.box').fadeOut();//淡出

// $('.box').fadeIn();//淡入

// $('.box').fadeToggle();//切换淡入淡出

// $('.box').toggle();//切换显示隐藏

$('.box').slideToggle();//切换上收和下展

})

})

3.jQuery动画

$(function(){

/*

参数：

1、什么属性做动画，属性设置{param1: value1, param2: value2}

2、动画执行的时间，单位毫秒

3、动画曲线：

swing（默认值）开始和结束慢，中间快

linear匀速

可省略不写

4、回调函数，动画完成之后要做的事情，可无限嵌套

*/

$('#div1').animate({

width: 200,

height: 200},

1000,

function(){

// alert('动画完了！');

$(this).animate(

{marginLeft: 500},

1000,

function(){

$(this).animate(

{marginTop: 500},

1000

)

}

)

}

);

})

4.jQuery循环

$(function(){

// //给全部的li设置内容和样式

// $('.list li').html('111');

// $('.list li').css({background:'gold'});

//第一个参数index是索引值

$('.list li').each(function(index) {

// alert(index);//弹出索引值

//$(this)是每一个li

$(this).html(index);

});

})