1128-jquery-笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41485725/article/details/103302511

本文详细介绍了jQuery库中元素样式的操作方法，包括修改和获取样式、添加、移除和切换类，以及属性的设置和获取。此外，还深入探讨了jQuery动画效果的实现，如显示隐藏、滑动和淡入淡出等，并提供了自定义动画和动画队列控制的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery操作样式：可以传多个参数，即对象
//修改样式

$("li").css({
    backgroundColor:"pink",
    color:"red",
    fontSize:"32px",
    border:"1px solid black"
});

//获取样式
console.log($("li").css("fontSize"));
console.log($("li").css("backgroundColor"));

//隐式迭代：1.设置操作的时候，会给jq内部所有的对象设置相同的值 2.获取的时候，只会返回第一个元素对应的值
//添加一个类
$("li").addClass("big");
//移除一个类
$("li").removeClass("big");
//判断是否具有某一个类
$("li").hasClass("big");
//切换类
$("li").toggleClass("big");

jquery操作属性：
//attr(name,value)
//设置属性
$("img").attr("alt,"sss");
$("img").attr("title","title");
$("img").attr({
alt:"sss",
title:"title"
});
//获取属性

$("img").attr("alt");
<script>
$(function(){
    $("#img a").click(function(){
        var href=$(this).attr("href");
        $("imgBig").attr("src",href);
        var title=$(this).attr("title");
        $("#des").attr("title",title);
        return false;
    });
});

stackoverflow 问答网站

对于布尔类型checked select ed disabled 应该选择 .prop()

$(function(){
    $("#j_all").click(function(){
        $("j_tb input").prop("checked",$(this).prop("checked"));
    });
    $("j_tb input").click(function(){
        var allLength=$("#j_tb input").length;
        var checkLength=$("#j_tb input:checked").length;
        if(allLength==checkLength){
            $("#j_all").prop("checked",true);
        }else{
            $("#j_all"),prop("checked:,true);
        }
    });
});

jquery操作动画： show([speed],[callback])
slow 200 normal 400 fast 600
//显示隐藏
.show(time)
.hide(time)
//滑入滑出切换
.slideUp()
.slideDown()
.slideToggle()
//淡入淡出切换
.fadeIn()
.fadeOut()
.fadeToggle()
京东轮播图：

var count=0;
$(".arrow_right").click(function(){
    count++;
    if(count==$(".slider li").length){
        count=0;
    }
    $(".slider li").eq(count).fadeIn().sibling("li").fadeOut();
});

自定义动画：
$(selector).animate({params},[speed],[easing],[callback]);
speed:
easing:默认swing(缓动) linear(匀速)
手风琴案例：

$(function(){
    var $li=$("#box li");
    for(var i;i<$li.length;i++){
        $li.eq(i).css("backgroundColor","url("img/"+(i+1)+".jpg"));
    }
    //注册鼠标经过事件
    $li.mouseenter(function(){
        $(this).animate({width:800}).siblings().animate({width:100});
    }).mouseleave(function(){
        $.animation({width:200});
    });
});

动画队列停止动画
//停止当前正在执行的动画 clearQuene(true,false) jumpToEnd(true,false)
.stop(clearQuene,jumpToEnd);
$(this).children("ul").stop().slideDown();
$(this).children("ul").stop().slideUp();
音乐导航：

<div class="nav">
    <ul>
        <li>
            <a href+"javascript:void(0);">xxxx</a>
            <span></span>
        </li>
        <li>
            <a href+"javascript:void(0);">xxxx</a>
            <span></span>
        </li>
        <li>
            <a href+"javascript:void(0);">xxxx</a>
            <span></span>
        </li>
    </ul>
    //音乐：
    <div>
        <auto src="mp3.mp3 control=controls"></auto>
    </div>
</div>
$(function(){
    $(".nav li").mouseenter(function(){
        //显示span
        $(this).children("span").stop().animate({top:0});
        //播放音乐
        var idx=$(this).index();
        $("auto").get(idx).load();
        $("auto").get(idx).play();
    }).mouseleave(function(function(){
        $(this).children("span").stop().animate({top:60});
    }));
})；