jq应用mouseover和mousecover append和prepend $(this).toggleClass(

mouseover和mousecover

        .box{
            background-color: red;
        }
    </style>
</head>
<body>
    <div style="width: 100px;height:100px;border: 1px solid black;"></div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        // $('div').mouseover(function(){
        //     $(this).toggleClass('box')
        // })
        // $('div').mouseout(function(){
        //     $(this).toggleClass('box')
        // })



        function toggleFn(){
            if( $(this).hasClass('box')){
                $(this).removeClass('box')
            }else{
                $(this).addClass('box')
            }
        }
        $('div').mouseover(function(){
            toggleFn.call(this)
        })
        $('div').mouseout(function(){
            toggleFn.call(this)
        })
    </script>
</body>

        <p>
            我爱学习 学习让我自由
        </p>
    </div>
    <input type="text">
    <script src="../jquery-1.12.4.js"></script>
    <script>
        $('div').mouseover(function(){
            $('div').css('border','1px solid red')
        })
        $('div').mouseout(function(){
            $('div').css('border','')
        })
        let h = $('div p').html()
        $('div').click(function(){
           $('input').val(h)
        })
    </script>

append和prepend

    <button class="b1">在开头添加</button>
    <div></div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        let arr = ['./1.jpg','./2.jpg','./3.jpg']
        
        $('.a1').click(function(){
            let i = Math.floor( Math.random()*(2-0+1) ) + 0;
            let x = $('<img src="'+arr[i]+'" class="i1">');
            $('div').append(x)
        })
        $('.b1').click(function(){
            let i = Math.floor( Math.random()*(2-0+1) ) + 0;
            let x = $('<img src="'+arr[i]+'" class="i1">');
            $('div').prepend(x)
        })
    </script>