jq属性和事件的练习

原创 2018-11-10 19:10:33 175
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></scr

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style>

        .red{

            color: red;

        }

    </style>

    <script type="text/javascript">

        $(function(){

         $('.btn1').click(function(){

                $('p').toggleClass('red')

                $('span').text('hello word')

                $('h3').html('<h1>我变成h1标题</h1>')

         $('p').animate({'fontSize':'40px'},3000)

         $('div').animate({'left':'400px'},1000)

         })

            $('.btn2').click(function(){


             $('div').animate({

             'height':'400px',

             'width':'300px',

             'opacity':'0.3'

             },1000)

            })


            $('.btn3').click(function(){

                $('input').val('改变了里面的内容')

            })

          

        })

    </script>

    <style type="text/css">

        div{width:100px;height:100px;background:red;}

    </style>

</head>

<body>

      

<button class="btn1">点击字体变大</button>

<p>赛第六届泛咖啡飒飒的浪费大声道</p>

    <span style="display:block;margin:30px;">速度快撒飒飒的</span>

    <h3>我是标题3</h3>


<button class="btn2">盒子改变</button>

<div></div>


    <button class="btn3" style="width:50px;height:30px;display:block;margin-top:30px";>val值</button>

    <input type="text" value="值">

</body>

</html>


发布手记

热门词条