jquery属性操作
1、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');
2、text() 取出或设置text内容
// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('<span>添加文字</span>');
3、attr() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').attr('src');
// 设置图片的地址和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() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
jquery动画
通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
参数可以写成数字表达式:
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});
参数:
1、什么属性做动画,属性设置{param1: value1, param2: value2}
2、动画执行的时间,单位毫秒
3、动画曲线:
swing(默认值)开始和结束慢,中间快
linear匀速
可省略不写
4、回调函数,动画完成之后要做的事情,可无限嵌套
jQuery循环
<script type="text/javascript">
$(function(){
// //给全部的li设置内容和样式
// $('.list li').html('111');
// $('.list li').css({background:'gold'});
//第一个参数index是索引值
$('.list li').each(function(index) {
// alert(index);//弹出索引值
//$(this)是每一个li
$(this).html(index);
});
})
</script>