読者です 読者をやめる 読者になる 読者になる

jQueryの練習

HTMLの挿入、クラス属性の追加、スタイルの変更

HTML&CSS

<!DOCTYPE HTML>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<style>
p.style {
  color: #F00;
  font-size: 36px;
  background-color: #333;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('button').on('click',function(){
    $('p').prepend('<strong>要素内の先頭に挿入(prepend)</strong>');
    $('p').append('<strong>要素内の最後に挿入(append)</strong>');
    $('p').before('<p>要素の前に挿入(before)</p>');
    $('h1').after('<p>大見出しの後に挿入(after)</p>');
    $('p').addClass('style');
    $('h1').css({'color':'#F00','font-size':'40px','background-color':'#333'});
  });
});
</script>
</head>

<body>
<button>変更</button>
<h1>大見出し</h1>
<p>テキスト</p>
</body>
</html>

処理結果

f:id:develog:20161004190227p:plain

f:id:develog:20161004190235p:plain

 正方形の表示・非表示・移動

HTML&CSS

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<style>
div {
  width: 300px;
  height: 300px;
  background-color: green;
  display: none;
  margin-left: 0;
}
div.move {
  transform: translate(300px, 0);
  transition: 1s;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('button#on').on('click',function(){  //「表示」ボタンクリック
    $('div:not(:animated)').show(500);
  });
  $('button#off').on('click',function(){  //「非表示」ボタンクリック
    $('div:not(:animated)').hide('slow');
  });
  $('button#on-off').on('click',function(){  //「表示・非表示」ボタンクリック
    $('div:not(:animated)').toggle('fast');
  });
  $('button#move').on('click',function(){  //「移動」ボタンクリック
    $('div:not(:animated)').animate({
      "margin-left":"300px"
    });
  });
  $('button#move2').on('click',function(){  //「移動2」ボタンクリック
    $('div').toggleClass('move');
  });
});
</script>
</head>

<body>
<button id="on">表示</button>
<button id="off">非表示</button>
<button id="on-off">表示・非表示</button>
<button id="move">移動</button>
<button id="move2">移動2</button>
<div></div>
</body>
</html>

処理結果 

初期状態でボタンを押す前の状態

f:id:develog:20161004191200p:plain

 

表示ボタンを押してから移動ボタンを押した状態

f:id:develog:20161004191210p:plain

 

表示ボタンを押してから移動2ボタンを押した状態

f:id:develog:20161004191213p:plain