1.属性操作
$(function(){
/*
alert($('.box').html());//这是一个div元素
$('.box').html('<a href="http://www.baidu.com">百度网</a>');
*/
/*
读写值为布尔类型的属性用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());//<span>这是div元素内的span</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);
});
})
