jquery屬性操作
1、html() 取出或設(shè)置html內(nèi)容
// 取出html內(nèi)容
var $htm = $('#div1').html();
// 設(shè)置html內(nèi)容
$('#div1').html('<span>添加文字</span>');
2、text() 取出或設(shè)置text內(nèi)容
// 取出文本內(nèi)容
var $htm = $('#div1').text();
// 設(shè)置文本內(nèi)容
$('#div1').text('<span>添加文字</span>');
3、attr() 取出或設(shè)置某個(gè)屬性的值
// 取出圖片的地址
var $src = $('#img1').attr('src');
// 設(shè)置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
jquery特殊效果
fadeIn() 淡入
? ? $btn.click(function(){
? ? ? ? $('#div1').fadeIn(1000,'swing',function(){
? ? ? ? ? ? alert('done!');
? ? ? ? });
? ? });
fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展示或隱藏某個(gè)元素
slideDown() 向下展開
slideUp() 向上卷起
slideToggle() 依次展開或卷起某個(gè)元素
jquery對象的方法會在執(zhí)行完后返回這個(gè)jquery對象,所有jquery對象的方法可以連起來寫:
$('#div1') // id為div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實(shí)際高度來顯示ul元素
.parent()? //跳到ul的父元素,也就是id為div1的元素
.siblings()? //跳到div1元素平級的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast');? //高度實(shí)際高度變換到零來隱藏ul元素
jquery動畫
通過animate方法可以設(shè)置元素某屬性值上的動畫,可以設(shè)置一個(gè)或多個(gè)屬性值,動畫執(zhí)行完成后會執(zhí)行一個(gè)函數(shù)。
$('#div1').animate({
? ? width:300,
? ? height:300
},1000,swing,function(){
? ? alert('done!');
});
參數(shù)可以寫成數(shù)字表達(dá)式:
$('#div1').animate({
? ? width:'+=100',
? ? height:300
},1000,swing,function(){
? ? alert('done!');
});
參數(shù):
1、什么屬性做動畫,屬性設(shè)置{param1: value1, param2: value2}
2、動畫執(zhí)行的時(shí)間,單位毫秒
3、動畫曲線:
swing(默認(rèn)值)開始和結(jié)束慢,中間快
linear勻速
可省略不寫
4、回調(diào)函數(shù),動畫完成之后要做的事情,可無限嵌套
jQuery循環(huán)
<script type="text/javascript">
$(function(){
// //給全部的li設(shè)置內(nèi)容和樣式
// $('.list li').html('111');
// $('.list li').css({background:'gold'});
//第一個(gè)參數(shù)index是索引值
$('.list li').each(function(index) {
// alert(index);//彈出索引值
//$(this)是每一個(gè)li
$(this).html(index);
});
})
</script>