week3day0102

最新推荐文章于 2021-02-12 20:01:59 发布

WILD__

最新推荐文章于 2021-02-12 20:01:59 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/WILD__/article/details/100997681

版权

1.使用jquery修改div元素的背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="change">btn</button>
<div style="width: 100px;height: 100px;background-color: black;" id="one">
</div>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $('#change').click(function () {
            $('#one').css('background-color','blue');
        });
    })
</script>
</body>
</html>

2.使用jquery修改div子元素p的内容为“我是子元素”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="change">btn</button>
<div style="border: 1px solid black">
    <p>lalallala</p>
</div>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $('#change').click(function () {
            $('p').text('我是一个子元素');

        });
    })
</script>
</body>
</html>

3.使用jquery修改第二个P元素的背景色为“orange”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="change">btn</button>
<div style="border: 1px solid black">
    <p>lalala</p>
    <p id="two">lalala</p>
    <p>lalala</p>
    <p>lalala</p>
    <p>lalala</p>
</div>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $('#change').click(function () {
            $('#two').css('background-color','orange');
        });
    })
</script>
</body>
</html>

4.删除列表元素中最后一个li元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="change">btn</button>
<ul id="one">
    <li>lalala</li>
    <li>lalala</li>
    <li>lalala</li>
    <li>lalala</li>
    <li>lalala</li>
</ul>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $('#change').click(function () {
            $('#one li:last').remove();
        });
    })
</script>
</body>
</html>

5.点击当前的P标签，弹出相对应的元素下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border: 1px solid black">
    <p style="border: 1px solid black;width: 100px;">aaaaa</p>
    <p style="border: 1px solid black;width: 100px;">bbbbb</p>
    <p style="border: 1px solid black;width: 100px;">ccccc</p>
    <p style="border: 1px solid black;width: 100px;">ddddd</p>
    <p style="border: 1px solid black;width: 100px;">eeeee</p>
</div>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $('p').click(function () {
            num = $(this).index();
            alert("当前点击p的元素下标是："+num);
        });
    })
</script>
</body>
</html>

6.利用jquery中的animate（）方法，点击id为btn的按钮，实现类名为box的元素，向左移动500px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="change">btn</button>
<div style="border: 1px solid black;width: 100px;height: 100px;left: 800px;position: relative" id="box">
</div>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $('#change').click(function () {
            $('#box').animate({
                    "left":'500px',
                }
            );
        });
    })
</script>
</body>
</html>

WILD__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
week3day0102

1.使用jquery修改div元素的背景色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button id="change"&...
复制链接

扫一扫