jQuery 操作样式/操作属性/动画/节点操作

最新推荐文章于 2020-12-20 11:26:26 发布

℡清欢

最新推荐文章于 2020-12-20 11:26:26 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/weixin_44695219/article/details/89342075

版权

（一）jQuery操作样式

css操作:

设置单个样式：css(属性，属性值)；----js通过style属性来设置样式

$("li")
        .css("backgroundColor", "pink")
        .css("fontWeight", "700")
        .css("fontStyle", "italic");

//设置多个样式：css({属性:属性值，属性2：属性值2})

$("li").css({
        fontSize: "22px",
        color: "red"
    });

//获取样式：css(属性名)

$("li").eq(0).css("fontSize","33px");
    $("li").eq(1).css("fontSize","40px");
    $("li").eq(2).css("fontSize","50px");
    $("li").eq(3).css("fontSize","63px");

// 33px   40px  50px  63px  22px  [ 33px   40px  50px  63px]  16px

//隐式迭代：
//设置操作的时候，会给jq内部的所有对象都设置相同的值
//获取的时候，只会返回第一个元素的值
console.log($("li").css("fontSize"));

class操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .basic {
            background-color: pink;
            font-size: 32px;
            color: red;
        }

        .bigger {
            font-size: 66px;
        }
    </style>
</head>
<body>
<input type="button" value="添加basic类">
<input type="button" value="添加bigger类">
<input type="button" value="移出bigger类">
<input type="button" value="判断有没有bigger类">
<input type="button" value="切换bigger类">


<ul>
    <li class="a b c">杨幂</li>
    <li class="a b c">唐嫣</li>
    <li class="a b c">刘诗诗</li>
    <li class="a b c">郑爽</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    // document.getElementsByTagName("input")[0].onclick = function () {
    //     var list = document.getElementsByTagName("li");
    //     for (var i = 0; i < list.length; i++) {
    //         list[i].className = "a b c basic";
    //     }
    // }

    //添加类名：addClass("类名")
    //移出类名：removeClass("类名")
    //判断是否存在这个类名：hasClass("类名")
    //切换类：toggleClass("类名")

    //添加basic类
    $("input").eq(0).click(function () {
        $("li").addClass("basic");
    });

    //添加bigger类
    $("input").eq(1).click(function () {
        $("li").addClass("bigger");
    });

    //移出bigger类
    $("input").eq(2).click(function () {
        $("li").removeClass("bigger");
    })

    //判断有没有bigger类
    $("input").eq(3).click(function () {
        console.log($("li").hasClass("bigger"));//如果有：返回true，反之，false
    });

    //切换bigger类
    $("input").eq(4).click(function () {
        //toggle:先判断有没有这个类，如果有就删除，如果没有就添加
        $("li").toggleClass("bigger");
    });

属性操作:

prop方法

对于布尔类型的属性，在jQuery1.6版本以后用attr方法就没有效果了，应该用prop方法 prop用法跟attr方法一样。

attr方法

功能：设置或修改样式，操作的是style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="images/1.jpg" alt="小姐姐" title="真好看" width="200">

<input type="button" value="选中">
<input type="button" value="不选中">

<input type="checkbox" id="ck">

<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //1. attr(标签属性)------用法和css(样式属性)一样
        //1.1 设置单个属性  attr("属性名","属性值")
        // $("img").attr("alt","今天你认真听讲了吗");

        //1.2  设置多个属性  attr({"属性1,":"属性值1","属性2,":"属性值2"})
        $("img").attr({
            alt: "燃烧我的卡路里",
            title: "拜拜甜甜圈",
            score: "100分"
        });


        //1.3  获取属性  attr("属性名"),返回字符串
        console.log($("img").attr("title"));

        //prop()---------对于bool类型的属性，不要用attr方法，用prop，
        // 因为：在jQuery1.6版本以后用attr方法就没有效果了，prop方法用法同attr（）
        //bool类型的属性： checked  selected

        $("input").eq(0).click(function () {
            $("#ck").prop("checked", true);
        });

        $("input").eq(1).click(function () {
            // $("#ck").prop("checked",false);
            console.log($("#ck").prop("checked"));;
        });

    });


</script>
</body>
</html>

prop方法

对于布尔类型的属性，在jQuery1.6版本以后用attr方法就没有效果了，应该用prop方法 prop用法跟attr方法一样。

设置属性

$("#ck").prop("checked", true);

获取属性

$("#ck").prop("checked");

jQuery动画

jQuery提供了三组基本动画，这些动画都是标准的，有规律的效果，jQuery还提供了自定义动画的功能

（1）三组基本动画

显示（show）与隐藏（hide）是一组动画，

滑入（slideDown）和滑出（slideUp）与切换（slideToggle），效果与卷帘门类似

淡入（fadeIn）和淡出（fadeOut）与切换（fadeToggle），

三组方法效果类似，以show为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换显示与隐藏">
<div></div>

<script src="jquery-1.12.4.js"></script>
<script>

    // //第一组：show()和hide():从左上角到右下角的一个过程
    // //1. 不传入参数：没有动画效果
    // //2. 传入一个参数：show(speed)
    // //          speed:动画持续的时间，可以毫秒值，也可以是固定字符串
    // //                 fast:200ms  normal:400ms  slow:600ms
    // //3. 传入两个参数： show（[speed]，[callback]）
    // //          callback:动画成功后的回调函数
    // $("input").eq(0).click(function () {
    //
    //     // $("div").show();//没有动画效果
    //
    //     // $("div").show("hello");//如果乱写了一个字符串，也可以执行动画效果：效果同normal
    //
    //     $("div").show(1000, function () {
    //         console.log("生活就像一个甜甜圈");
    //     })
    // })
    // $("input").eq(1).click(function () {
    //     $("div").hide(1000);
    // })


    // // 第二组：slideUp()和slideDown()和slideToggle------滑入滑出，类似卷帘门：从上往下的一个过程
    // // 1. 不传入参数：也有动画的效果，有一个默认的normal
    // //2. 传入一个参数：slideDown(speed)
    // //          speed:动画持续的时间，可以毫秒值，也可以是固定字符串
    // //                 fast:200ms  normal:400ms  slow:600ms
    // //3. 传入两个参数： slideDown（[speed]，[callback]）
    // //          callback:动画成功后的回调函数
    // $("input").eq(0).click(function () {
    //     // $("div").slideDown();
    //     // $("div").slideDown(2000);
    //     // $("div").slideDown("fast");
    //
    //     $("div").slideDown(1000, function () {
    //         console.log("生活就像一个甜甜圈");
    //     })
    // });
    // $("input").eq(1).click(function () {
    //     $("div").slideUp();
    // });
    // //切换
    // $("input").eq(2).click(function () {
    //     $("div").slideToggle(2000);
    // });


    //第三组：fadeIn()和fadeOut()和fadeToggle():淡入淡出
    $("input").eq(0).click(function () {
        $("div").fadeIn(1000);
    });
    $("input").eq(1).click(function () {
        $("div").fadeOut(1000);
    });
    $("input").eq(2).click(function () {
        // $("div").fadeToggle(1000);
        $("div").fadeTo(1000,0.2,function(){
            console.log("成功了")
        });
    })


</script>

</body>
</html>

show不传参数，没有动画效果

$("div").show();

show(speed)

speed:动画的持续时间可以是毫秒值还可以是固定字符串

fast:200ms normal:400ms slow:600

$("div").show(1000);

show([speed], [callback])

$("div").show(1000, function () {

console.log("哈哈，动画执行完成啦");

})

hide()同show()

自定义动画:animate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }

        #box2 {
            background-color: greenyellow;
            margin-top: 120px;
        }

        #box3 {
            margin-top: 240px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

<script src="jquery-1.12.4.js"></script>
<script>

    /*
    * animate();
    * 第一个参数： 对象，里面放的是需要的动画的样式
    * 第二个参数： speed，动画执行的时间
    * 第三个参数：动画执行的效果， linear swing
    * 第四个参数：回调函数
    * */
    $(function () {
        $("input").eq(0).click(function () {

            $("#box1").animate({left: 800}, 4000);

            $("#box2").animate({left: 800}, 4000, "linear");

            $("#box3").animate({left: 800}, 4000, "swing", function () {
                console.log("燃烧我的卡路里");
            })
        });
    })

</script>

</body>
</html>

动画队列与停止动画

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放在动画队列中，等前面的动画完成了才会执行

stop方法：停止动画效果

stop(clearQueue,jumptoEnd);

//第一个参数：是否清楚队列

stop():停止当前正在执行的动画
stop()有两个参数：
第一个参数：clearQueue:是否清除动画队列
                      true:直接停止动画 false:当前的动画停止，执行动画队列中的下一个动画
第二个参数：jumpToEnd：是否跳转到最终的动画效果
                      true:直接跳转到最终的动画效果 false:不跳转到最终效果

 $("div").stop(true,false);

jQuery节点操作

（1）创建节点

<script src="jquery-1.12.4.js"></script>
<script>
    js创建元素的三种方式：
     1. document.write("标签+内容")  缺陷：会把页面中所有的内容覆盖掉
     2. 父容器.innerHTML="标签+内容"
     3. 父容器.appendChild( document.createElement("标签名") );
    
     var box = document.querySelector("#box");
    1. 创建元素
     var aObj = document.createElement("a");
     2. 将元素追加到父容器中
     box.appendChild(aObj);
     3. 设置元素的属性和文本和样式
    aObj.innerHTML = "这是a标签";
    aObj.href = "#";
    aObj.setAttribute("target", "_blank");
    aObj.setAttribute("score", "100");

    jquery创建元素：
    1. 创建jquery对象  $("标签+内容")
    2. 将jquery对象追加到父元素中去 append
    var $a = $('<a href="#">这是一个a标签</a>');
</script>

（2）添加节点

append appendTo

perpend perpendTo

before

after

2.1  向父容器中往后追加子元素 append
 $("#box").append($a);

2.2  将子元素往后追加到父容器中  appendTo
 $a.appendTo($("#box"));

2.3 向父容器前添加子元素 prepend
 $("#box").prepend($a);

 2.4 将子元素从前面添加到父容器中  prependTo
 $a.prependTo($("#box"));

在box后面添加一个a标签
 $("#box").after($a);
在box前面添加一个a标签
$("#box").before($a);

℡清欢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 操作样式/操作属性/动画/节点操作

（一）jQuery操作样式css操作:设置单个样式：css(属性，属性值)；----js通过style属性来设置样式$("li") .css("backgroundColor", "pink") .css("fontWeight", "700") .css("fontStyle", "italic");//设置多个样式：css({...
复制链接

扫一扫