jquery_属性操作_动画_ZHOU125disorder_

最新推荐文章于 2023-06-25 20:51:27 发布

zjing125

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量129

点赞数

分类专栏： # jquery 文章标签： jquery 属性操作动画

本文链接：https://blog.csdn.net/ZHOU125disorder/article/details/114339003

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

`属性操作`

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery属性操作</title>
    <style>
        .cls{
            background-color: #096;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">百度一下你就知道</a>
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        // 操作元素属性
        // attr(name)       
        // $(选择器).attr(属性)
        // 里面只写一个值的时候代表获取
        console.log($("a").attr("href"));
        $("a").attr("href","https://mi.com");   //设置href
        // 删除元素的属性
        // removeAttr()
        $("a").removeAttr("href");  //移除a标签的herf属性
        // addClass()   设置
        $("a").attr("href","https://www.baidu.com");
        $("a").addClass("cls");     //追加Class名
        // hasClass()   判断是否含有某个样式 
        console.log($("a").hasClass("cls"));
        // prop()也是操作属性的,用法和attr一样
        console.log($("a").prop("href"));
        $("a").prop("href","https://www.mi.com");   
        // 对于html本身就有的固有属性，在处理的时候，使用prop
        // 操作自定义的DOM属性，在处理的时候，使用attr
    </script>
</body>
</html>

动画

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        *{
            margin: 0;padding: 0;
            list-style: none;
        }
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color:#096;"></div>
    <button>隐藏</button>
    <button>显示</button>
    <button>auto</button>
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        // hide(时间)    隐藏
        $("button:first").click(function(){
            $("div").hide(100);    //T秒之后隐藏
        });
        $("button").eq(1).click(function(){
            $("div").show(100);    //T秒之后显示
        });
        $("button:last").click(function(){
            $("div").stop(true,true).toggle(100);      //自动判断当前盒模型状态，如果显示，就隐藏掉，如果隐藏，就显示
        });
        // 不加stop，点击多少次，执行多少次
        // stop(true/false,true/false)停止动画
        // 第一个参数：清空队列，可以立即结束动画
        // 第二个参数：让当前正在执行的动画立即完成
        
        // delay()     延时动画
        $("button:first").click(function(){
            $("div").delay(1000).hide(100);
        });

        // slideDown      slideUp    slideToggle   上拉下拉
        $("button:first").click(function(){
            $("div").slideUp(1000);
        });
        $("button").eq(1).click(function(){
            $("div").slideDown(1000);
        });

        // fadeIn       fadeOut     fadeToggle
        $("button:first").click(function(){
            $("div").fadeOut(500);
        })
        $("button").eq(1).click(function(){
            $("div").fadeIn(500);
        })
        $("button:last").click(function(){
            $("div").fadeToggle(500);
        })
    </script>
</body>
</html>