1.屬性操作
$(function(){
/*
alert($('.box').html());//這是一個div元素
$('.box').html('<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徽缚、動畫執(zhí)行的時間星虹,單位毫秒
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循環(huán)
$(function(){
// //給全部的li設置內容和樣式
// $('.list li').html('111');
// $('.list li').css({background:'gold'});
//第一個參數index是索引值
$('.list li').each(function(index) {
// alert(index);//彈出索引值
//$(this)是每一個li
$(this).html(index);
});
})