JSFiddle - React, Tailwind, and code Playground

by goropoo

HTML

<button>クリック</button>
<input>クリック</input>

<p>fogefogefogefotege</p>

<div id="hoge">tatatata</div>

<div id="hoho">fogefogefogefotege</div>
<div id="age">fogefogefogefotege</div>

CSS

body { background-color: #ffffff; font: 30px sans-serif; }

JavaScript

$(function() {

$('#hoho').click(function(){
    $(this).css('background','red');
    $(this).css('color','red');
});   
    
    
$('button').click(function(){
    $('p').text('クリックされた');
});
    
$('button').mouseover(function(){
    $('p').text('マウスのった');
});    
    
    
$('#hoho').mouseout(function(){
    $('#age').text('マウスおりた');
});
    
$('input').focus(function(){
    $('p').text('focusされた');
});
    
$('input').blur(function(){
    $('p').text('フォーカスはずれた');
});
    
var eeee = $('<div>divだよー</div>');
$('#hoge').append(eeee);  
    
    
    $('p').show();
    $('p').css('border', '1px solid red');
     
    $('p').css('opacity', 0.3);
    $('p').before('前');
    $('p').after('後ろ');

    //$('p').hide();
    $('p').animate({
        'left': '400px',
        'top': '100px'
    });

    //$('p').html('<img src="imgs/memeta.gif" alt="" />');
    //$('p').attr('src','dog.jpg');
    //$('#box').addClass('hoge');　クラスを追加する
    //$('#box').removeClass('hoge');　クラスを追加する。
    //$('#box').fadeIn();　フェードイン
    //$('#box').fadeOut();　フェードアウト
    //$('#box').slideDown();
    //$('#box').slideUp();
    //$('#box').slideToggle();
});