十一、常用方法

发表于 | 更新于: | 分类于 ， ， |
| 字数: 2.1k | 时长 ≈ 9 分钟

十一、常用方法

11.1 size()

size()：可以获取元素对象的个数。

没有参数。

返回的是包含元素对象的个数，是字符串类型

.size()方法从jQuery 1.8开始被废弃，要用.length代替。

1
2
3
4
// 输出所有p元素的个数
console.log($("p").size());  //jquery-3.4.1.min.js  报错 
// 常用的是length属性
console.log($("p").length);  // 7

11.2 css()

11.2.1 css()：可以读取元素计算后的样式属性

  • 参数：要读取的属性名。

  • 返回值：属性值，是字符串类型。

1
2
// 读取特殊元素的宽度
console.log($("p.teshu").css("width"));

UAcyI1.png

11.2.2 css()：可以设置元素对象的样式属性

11.2.2.1 可以设置单一属性

  • 对象.css(“k”,“v”);

    • k：要设置的属性名

    • v：设置的属性值

1
2
3
4
// 设置单一属性
$(".teshu").css("backgroundColor","red");
$(".teshu").css("width",150);        // 省略单位，不能加双引号
$(".teshu").css("height","150px");   // 不省略单位，必须加双引号

UAcfMD.png

11.2.2.2 设置多个属性

使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
    对象.css({
        k : v,
        k : v,
        k : v
    });

// 设置多个属性
$(".teshu").css({
    "width" : 300,
    "height" : "200px",
    "backgroundColor" : "blue"
});

改成单一属性为：

1
2
3
4
// 等价方式
$(".teshu").css("width",300);
$(".teshu").css("height","200px");
$(".teshu").css("backgroundColor","blue");

UAcLz8.png

11.3 jquery绑定事件的方式

jquery绑定事件的方式有2种

11.3.1 方式一：$(dom).on(type,fn)

  • $(dom).on(type,fn)

    • type：事件类型

    • fn：匿名函数

1
2
3
4
5
6
7
8
9
10
11
12
13
<button id="btn1">点我增加宽度</button>
<button id="btn2">点我减小宽度</button>
<div id="box" class="box"></div>

// 添加点击事件
$("#btn1").on("click",function(){
    // css()的特殊用法
    $("#box").css("width","+=30px");
});
$("#btn2").on("click",function(){
    // css()的特殊用法
    $("#box").css("width","-=30px");
});

UAgAQU.png

11.3.2 方式二：对象.click(function(){})

  • 对象.click(function(){})

    • 参数：匿名函数
1
2
3
$("#btn1").click(function(){
    $("#box").css("width","+=30px");
});

11.4 show()和hide()和toggle()

11.4.1 show()显示的意思

show()：显示的意思。

只有当元素的状态是display:none;的时候才可以使用，最终状态是display:block;

可以不写参数，表示“干嘣”效果。

1
2
3
$("#btn1").click(function(){
    $("#box").show();
});

UAgaFI.png

还可以写参数，参数就是要完成动画的时间，单位ms，省略不写

1
$("#box").show(2000);

UA5PHS.png

11.4.2 hide()隐藏的意思

hide()：隐藏的意思。

只有当元素的状态是display:block; 的时候才可以使用，最终状态是display:none;

可以不写参数，表示“干嘣”效果。

1
2
3
$("#btn2").click(function(){
    $("#box").hide();
});

UA5MHU.png

还可以写参数，参数就是要完成动画的时间，单位ms，省略不写

1
$("#box").hide(2000);

UA5aDK.png

11.4.3 toggle() 显示、消失切换

  • toggle() ：显示、消失切换

    • 不写参数，也是“干嘣”效果

    • 书写参数，单位ms，省略不写

1
2
3
4
5
6
$("#btn1").click(function(){
    $("#box").toggle();
});
$("#btn2").click(function(){
    $("#box").toggle(2000);
});

UA5qK0.png

11.5 slideDown()和slideUp()和slideToggle()

11.5.1 slideDown()和slideUp()

  • slideDown()：慢慢展开

    • 只有当元素的状态是display:none;的时候才可以调用，当元素调用该方法的时候，元素的height瞬间为0。

    • 然后慢慢的以动画的形式变到元素的初始height。

    • 最终状态是display:block;

  • slideUp()：徐徐合起

    • 与slideDown()相反

  • 可以不写参数，也是动画的效果，默认是400ms。

1
2
3
4
5
6
$("#btn1").click(function(){
    $("#box").slideDown();
});
$("#btn2").click(function(){
    $("#box").slideUp();
});

UAI0s0.png

可以书写参数，参数就是完成动画的时间，单位ms，省略不写

1
2
3
$("#box").slideDown(3000);

$("#box").slideUp(3000);

11.5.2 slideDown() 不一定向下展开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="box" class="box">
    <p id="p1">文字文字文字文字文字文字文字文字文字文字文字</p>
</div>

div {
    width: 153px;
    height: 340px;
    border: 1px solid #000;
    margin: 10px auto;
    background: url(images/girl.png);
    position: relative;
}

p {
    position: absolute;
    width: 100%;
    height: 70px;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    left: 0;
    bottom: 0;
    display: none;
}

// 添加鼠标进入、离开事件
$("#box").mouseenter(function(){
    $("#p1").slideDown(2000);
});
$("#box").mouseleave(function(){
    $("#p1").slideUp(2000);
});

UAIci4.png

11.5.3 slideToggle()切换展开、合起

可以不写参数，也是动画的效果，默认是400ms。

1
$("#box").slideToggle();

可以书写参数，参数就是完成动画的时间，单位ms，省略不写

1
$("#box").slideToggle(3000);

11.6 fadeIn()和fadeOut()和fadeToggle()和fadeTo()淡入和淡出

11.6.1 fadeIn()和fadeOut()

  • 可以不书写参数，默认是400ms。也可以书写参数，自定义时间

  • fadeIn()：淡入

    • 只有当元素的状态是display:none;的时候才可以调用，当元素调用该方法的时候，元素的opacity:0;慢慢的以动画的形式变到元素的opacity:1;。

    • 最终状态是display:block;

  • fadeout()：淡出

    • 与fadeIn()相反
1
2
3
4
5
6
7
8
9
10
11
12
13
div {
    width: 100px;
    height: 100px;
    background-color: red;
    display: none;
}

$("#btn1").click(function(){
    $("#box").fadeIn(3000);
});
$("#btn2").click(function(){
    $("#box").fadeOut(3000);
});

UAIvOP.png

11.6.2 fadeToggle() 切换淡入淡出

可以不书写参数，默认是400ms。也可以书写参数，自定义时间

1
2
3
$("#box").fadeToggle();

$("#box").fadeToggle(3000);

11.6.3 fadeTo()淡入淡出到指定透明度

  • fadeTo(1000,0.5)：

    • 第一个参数：动画完成时间

    • 第二个参数：指定透明度

1
2
3
$("#btn3").click(function(){
    $("#box").fadeTo(1000,0.5);
});

UAoemV.png

11.7 案例：简易呼吸轮播图

UAoMY4.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<div class="box">
    <div class="imgs" id="imgs">
        <ul>
            <li><img src="images/lunbo/1.jpg" alt=""></li>
            <li><img src="images/lunbo/2.jpg" alt=""></li>
            <li><img src="images/lunbo/3.jpg" alt=""></li>
            <li><img src="images/lunbo/4.jpg" alt=""></li>
            <li><img src="images/lunbo/5.jpg" alt=""></li>
        </ul>
    </div>
    <div class="btns">
        <a href="javascript:void(0)" id="leftBtn">&lt;</a>
        <a href="javascript:void(0)" id="rightBtn">&gt;</a>
    </div>
</div>

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    .box {
        width: 220px;
        height: 150px;
        margin: 50px auto;
        border: 1px solid #000;
        position: relative;
    }
    /* 呼吸轮播图的关键是所有图片摞在一起 */
    .box .imgs ul li {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
    }
    .box .imgs ul li:first-child {
        display: block;
    }
    .btns a {
        position: absolute;
        width: 20px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
        background-color: rgba(0,0,0,.5);
        color: #fff;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
        /* 大于小于号开口变大 */
        font-family: consolas;
    }
    .btns a:first-child {
        left: 10px;
    }
    .btns a:last-child {
        right: 10px;
    }
</style>

<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 获取元素 命名时加上$提醒我们是一个jquery对象
    var $leftBtn = $("#leftBtn");
    var $rightBtn = $("#rightBtn");
    var $imgs = $("#imgs ul li");
    // 定义length
    var length = $imgs.length;
    // 定义信号量
    var idx = 0;
    // 右按钮点击事件
    $rightBtn.click(function(){
        // 当前图片淡出
        $imgs.eq(idx).fadeOut(600);
        // 信号量改变
        idx ++;
        // 边界判定
        if(idx > length - 1){
            // idx归0
            idx = 0;
        }
        // 下一张图片淡入
        $imgs.eq(idx).fadeIn(600);
        console.log(idx);  // 查看图片顺序
    });
    // 左按钮点击事件
    $leftBtn.click(function(){
        // 当前图片淡出
        $imgs.eq(idx).fadeOut(600);
        // 信号量改变
        idx --;
        // 边界判定
        if(idx < 0){
            // idx归0
            idx = length - 1;
        }
        // 下一张图片淡入
        $imgs.eq(idx).fadeIn(600);
        console.log(idx);  // 查看图片顺序
    });
</script>

11.8 html()方法

11.8.1 获取内部文本

html()：可以获取元素的内部文本，不需要书写参数。

1
2
// 获取box的内部文本
console.log($("#box").html());

UAo4pj.png

11.8.2 设置内部文本

html()：设置元素的内部文本，参数就是要设置的内容

1
2
// 改变box的内部文本
$("#box").html("改变内部文本");

UAoXh4.png

11.8.3 添加节点

html():还可以添加节点

1
2
// 添加节点
$("#box").html("<ul><li>第1行</li><li>第2行</li><li>第3行</li></ul>");

UAT9nx.png

11.9 addClass()和removeClass()添加删除类名

  • addClass()：添加类名

  • removeClass()：删除类名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box {
    width: 150px;
    height: 150px;
    background-color: pink;
}
.red {
    color: red;
}
.fz {
    font-style: 30px;
}

// 添加类名
$("#btn1").click(function(){
    // 类名前不加 .  添加多个类名，中间用空格隔开
    $("#box").addClass("red fz");
});
// 添加类名
$("#btn2").click(function () {
    $("#box").removeClass("red");
});

UATFAO.png

11.10 attr()设置元素的原有属性

attr()：可以设置元素的原有属性

  • 使用方式：

    • 对象.attr(k,v)

      • k : 要设置的属性名

      • v : 属性值

1
2
3
$("#box").mouseenter(function(){
    $("#pic").attr("src","images/03.jpeg");
});

当设置一个参数的时候，表示读取：

1
console.log($("#pic").attr("src"));

UATtvn.png

相关文章
点击查看

本文标题:十一、常用方法

文章作者:Mango

发布时间:2020年07月08日 - 22:16:47

最后更新:2020年07月08日 - 22:35:39

原始链接:https://mango185.github.io/post/a07ba860.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️