JQuey的属性操作和动画

JQuey的属性操作和动画

1、属性操作

对于属性的操作一般情况下通过attr进行操作，不过还是有一些意外，比如checked、radio等等，对于这些值为true和false的属性，在1.7版本之后从attr属性中移除了，而是使用prop方法。

<!--html代码-->
<img src="img/1-small.jpg" />
<input type="checkbox" id="check" />
<input type="button" value="选中">
<input type="button" value="不选中">
<br />

//js代码
$("input").eq(6).click(function () {
    $("#check").prop("checked", true);
});
$("input").eq(7).click(function () {
    $("#check").prop("checked", false);
});
$("img").attr("alt", "图破了");
$("img").attr({
    "alt": "美女呀",
    "title": "认识一下"
});
console.log($('img').attr("title"));

2、class操作

在class这个属性中，jquery有专门针对于他的方法，比如:

1、添加class类------>addClass()

2、删除class类------>removeClass()

3、切换class类------>toggleClass()

举例：

<input type="button" value="添加a类">
<input type="button" value="添加b类">
<input type="button" value="判断">
<input type="button" value="移除">
<input type="button" value="切换">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.a {
    background-color: pink;
}
.b {
    font-size: 20px;
}

$("input").eq(0).click(function () {
    $("li").addClass("a");
});
$("input").eq(1).click(function () {
    $("li").addClass("b");
});
$("input").eq(2).click(function () {
    console.log($("li").hasClass("b"));
});
$("input").eq(3).click(function () {
    $("li").removeClass("b");
});
$("input").eq(4).click(function () {
    $("li").toggleClass("a");
});

3、动画

3.1、自定义动画

//自定义动画animate(style, speed, easing, callback)
//参数一：需要创动画的样式，对象，必填项
//参数二：动画执行时间   可选
//参数三：动画执行效果  swing(摇摆式) linear(匀速的)  可选
//参数四：回调函数

举例：

<input type="button" value="动画" />
<div class="box"></div>

 .box {
     width: 100px;
     height: 100px;
     background-color: #0099cc;
}

$("input").eq(11).click(function () {
    $(".box").animate({marginLeft: "200px", width: "300px", height: "300px"}, 3000, "swing", function () {
        $(".box").animate({marginLeft: "0px", width: "100px", height: "100px"}, 3000);
    });
});

3.2、系统自带动画

1、show(), hide()和toggle()

show()：显示

hide()：隐藏

toggle()：显示隐藏切换

2、slideDown(), slideUp()和toggleSlide()

slideDown()：向下滑入

slideUp()：向上滑出

toggleSlide()：滑入滑出切换

3、fadeIn(), fadeOut()和toggleFade()

fadeIn()：淡入

fadeOut()：淡出

toggleFade()：淡入淡出切换