web应用技术实践 w2d4

最新推荐文章于 2021-05-13 14:31:25 发布

Impancy

最新推荐文章于 2021-05-13 14:31:25 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/Impancy/article/details/100996160

版权

1.使用jquery修改div元素的背景色(随意颜色)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div style="width: 300px;height: 300px">
    <p>这是一个div</p>
</div>
<script>
    $(function () {

        $('p').css('background-color','blue');

    });
</script>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
    <p></p>
</div>
<script>
    $(function () {

        $('p').html('我是子元素')

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

3.使用jquery修改第二个p元素的背景色为"orange"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
    <p>我是第一个p元素</p>
    <p>我是第二个p元素</p>
    <p>我是第三个p元素</p>
</div>
<script>
    $('p').eq(1).css('background','orange')
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<ul>
    <li>元素01</li>
    <li>元素02</li>
    <li>元素03</li>
</ul>
<script>
    $('ul li:last').remove()
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<script>
    $('p').click(function(){
        alert($(this).index())
    })
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<style>
    .box{
        width:100px;
        height:100px;
        position:absolute;
        top: 50px;
        left: 510px;
        border: 1px solid #666;
    }
</style>
</head>
<body>
<div class="box"></div>
<button id="btn">按钮</button>
<script>
    $('#btn').click(function(){
        $('.box').stop().animate({
            "left":10 +'px'
        })
    })
</script>
</body>
</html>

Impancy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web应用技术实践 w2d4

1.使用jquery修改div元素的背景色(随意颜色)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.4.1.min.js">...
复制链接

扫一扫