Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[jQuery]③命令

jQuery jQuery

HTML/CSSを自在に操れるjQuery

  1. どの箇所に？
  2. 何をさせる？(命令)
  3. どのタイミングで?
&(function(){
     $(“ セレクター “).jQueryの命令
}

テキストの変更と取得 text()

変更
<script>
$( function(){
     $("p#first").text( '変更後' );
})
</script>
</head>
<body>
<p id="first">変更前</p>
</body>
取得
  • .text()のカッコ内を空白にすると取得。
<script>
$( function(){
     $("p#second").text($("p#first").text());
})
</script>
</head>
<body>
<p id="first">変更後</p>
<p id="second">変更前</p>
</body>
</html>

htmlの変更と取得 html()

　HTMLのタグを含むテキストを変更できる。

変更
<script>
$( function(){
     $("p#first").html("<strong>変更後</strong>");
});
</script>
</head>
<body>
<p id="first">変更前</p>
</body>
取得
<script>
$( function(){
     $("p#second").html($("p#first").html());
});
</script>
</head>
<body>
<p id="first"><strong>変更後</strong></p>
<p id="second">変更前</p>
</body>
</html>

htmlの挿入

　もともと存在した要素の内容を残したままHTMLを追加できる。

指定した要素内の先頭に挿入　.prepend()
$( function(){
     $("p#first").prepend(“<strong>先頭に挿入</strong>");
});
</script>
<p id="first">テキスト</p>
<p id="second">テキスト</p>
</body>
指定した要素内の最後に挿入　.append();
<script>
$( function(){
     $("p#first").append(“<strong>最後に挿入</strong>");
});
</script>
<p id="first">テキスト</p>
<p id="second">テキスト</p>
</body>
指定した要素の前に挿入　.before();
$( function(){
     $("p#first").before("<h1>最初に挿入</h1>");
});
</script>
<p id="first">テキスト</p>
<p id="second">テキスト</p>
</body>
指定した要素の後ろに挿入　.after();
$( function(){
     $("p#first").after("<h1>最後に挿入</h1>");
});
</script>
<p id="first">テキスト</p>
<p id="second">テキスト</p>
</body>

HTMLの移動

　html要素を追加するのではなく、元々存在した要素の文書内の位置を変更できる。

html要素内の先頭に移動 .prependTo();

指定した要素を他の要素の内部の先頭に移動する。()内に移動先の要素をセレクターで指定。

<script>
$( function(){
     $("strong").prependTo("p");
});
</script>
<p>テキストテキスト</p>
<strong>テキスト</strong>
</body>
</html>
html要素内の最後に移動　.appendTo();
  • 指定した要素を他の要素の内部の最後に移動する。
$( function(){
     $("strong").appendTo("p");
});
</script>
<p>テキストテキスト</p>
<strong>テキスト</strong>
</body>
</html>
html要素の前に移動 .insertBefore();

　指定した要素を他の要素の前に移動する。

$( function(){
     $("h1").insertBefore("p");
});
</script>
<p>テキストテキスト</p>
<h1>前に移動</h1>
</body>
</html>
html要素の後ろに移動 .insertAfter();
<script>
$( function(){
     $("h1").insertAfter("p");
});
</script>
<h1>後ろに移動</h1>
<p>テキストテキスト</p>
</body>
</html>

他の要素で包む

　指定要素を追加するのではなく、特定の要素で包むことができる。

各要素を指定要素で包む .wrap();
  • h1要素で包む
$( function(){
     $("strong").wrap("<h1></h1>");
});
</script>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</body>
</html>
全要素を別の要素で包む .wrapAll();
  • 指定した複数の要素をまとめて別の要素で包む
  • 指定外の要素は追い出される形で包まれない
$( function(){
     $("strong").wrapAll("<h1></h1>");
});
</script>
<strong>テキストテキスト</strong>
テキストテキスト
<strong>テキストテキスト</strong>
</body>
</html>
指定した要素の子要素を他の要素で包む .wrapInner();

　指定した要素の子要素やテキスト＜内部＞を別の要素で包む。

$( function(){
     $("p").wrapInner("<strong></strong>");
});
</script>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
</body>
</html>
親要素を取り除く .unwrap();
$( function(){
     $("strong").unwrap();
});

</script>
<h1><strong>テキストテキスト</strong></h1>
</body>
</html>
要素の置き換え .replaceWith();
$( function(){
     $("p").replaceWith("<h1>置き換え</h1>");
});
</script>
<p>テキストテキスト</p>
</body>
</html>
要素の削除 .remove();
$( function(){
     $("p strong").remove();
});
</script>
<p><strong>削除する</strong>テキストテキスト</p>
</body>
</html>

属性値の変更と取得

属性値の変更 .attr();
$( function(){
     $("a").attr("href","http://www.google.com");
});
</script>
<a href="#">リンク先</a>
</body>
</html>
属性値の取得 .attr();
  • attr()のカッコ内に属性名のみ指定。
$( function(){
     $("a").text( $("a").attr("href") );
});
</script>
<a href="http://google.com">リンク先</a>
</body>
</html>
属性値の削除 .removeAttr();
$( function(){
     $("a").removeAttr("target");
});
</script>
<a href="http://google.com" target="_blank">リンク先</a>
</body>

class属性の追加と削除

class属性の追加　.addClass();
<style>
.red{ color: red; }
</style>
</head>
<body>
<script>
$( function(){
     $("p").addClass("red");
});
</script>
<p>テキストテキストテキストテキスト</p>
</body>
</html>
class属性の削除　.removeClass();
$( function(){
     $("p").removeClass("red");
});
</script>
<p class="red">テキストテキストテキストテキスト</p>
</body>
</html>
class属性の切り替え　.toggleClass();
  • 指定したclassがあれば削除、なければ追加する。
$( function(){
     $("p").toggleClass("red");
});
</script>
<p class="red">テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
</body>
</html>

CSSの制御 .css();

  • cssのプロパティを設定したり取得できる。
CSSの値の設定
$( function(){
     $("p").css({
          "color" : "red",
          "background" : "#ccc",
     });
});
</script>
<p>テキストテキストテキストテキスト</p>
</body>
</html>
  • 一つだけ記述するときは $("p").css(“color”,”red”);
CSSの値の取得
$( function(){
    $("p").text( $("p").css("color") );
});
</script>
<p>テキストテキストテキストテキスト　黒▶赤</p>
</body>
</html>