2019-06-14

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>