jQuery属性操作

原创 2018-11-16 10:38:11 272
摘要:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery属性操作</ti
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性操作</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        .show{
            background-color:silver;
            width: 200px;

            margin: 0 auto;
            text-align: center;
        }
        .operate{
           /* width: 200px;*/
 height: 20px;
            margin: 10px auto;
            text-align: center;
        }
        .a{
            background-color: #0000FF;
            font-size: 40px;
        }
    </style>

</head>
<body>



<div class="show">操作</div>
<div class="operate">
    <input id="cz" type="button" value="操作">

</div >


<script>
    $('document').ready(function () {
        $('#cz').click(function () {
            var bt= $('#cz').attr('value');
            if(bt == '操作'){
                $('.show').addClass('a');
                $('#cz').attr('value','已添加了');
                $('.show').html('<h1>我这是改变了 html</h1>')
            }else {
                $('.show').removeClass('a');
                $('#cz').attr('value','操作');
                $('.show').text('qweqweqwe');
            }

        })





    })
</script>

</body>
</html>


发布手记

热门词条