初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery メソッド

前回はjQueryの【どこに対して】に当たる部分のセレクタについて記述しました。 今回は【何をさせる】のメソッドについて触れていきます。

まだ説明が基本ばかりでjQueryっぽくなりませんがこの基礎を身につけると 後々ソースを修正する際や記述するときに楽になりますのでここは我慢して身につけましょう。

今回もメソッド一覧を作成しました。

  1. テキストの変更と取得(text()メソッド)
  2. HTMLの変更と取得(html()メソッド)
  3. HTMLの挿入(prepend()、append()、befor()、after())
  4. HTMLの移動(prependTo()、appendTo()、insertBefore()、insertAfter())
  5. 他の要素で包む(wrap()、wrapAll()、wrapInner())
  6. 親要素を取り除く(unwrap()メソッド)
  7. 要素の置き換え(replaceWith()メソッド)
  8. 要素の削除(remove()メソッド)
  9. 属性値の変更・取得・削除(attr()メソッド、removeAttr()メソッド)
  10. class属性の追加と削除(addClass()メソッド、removeClass()メソッド)
  11. CSSの制御( css()メソッド)

テキストの変更と取得

text()メソッドで使って命令します。

テキストの変更

<script>
$(function(){
$("p#first").text( 'jQuery適応後');
});
</script>
</head>
<body>
<p id="first">jQuery適応前</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226173646p:plainf:id:bellsmarket:20150226173643p:plain

テキストの取得

<script>
$(function(){
$( 'p#second' ).text($( 'p#first' ).text() );
});
</script>
</head>
<body>
<p id="first">取得する文字列</p>
<p id="second">jQuery適応前</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226173637p:plainf:id:bellsmarket:20150226173640p:plain

HTMLの変更と取得

html()メソッドで使って命令します。

HTMLの変更

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

《実行結果》変更前→変更後

f:id:bellsmarket:20150226173634p:plainf:id:bellsmarket:20150226173631p:plain

HTMLの取得

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

《実行結果》変更前→変更後

f:id:bellsmarket:20150226175111p:plainf:id:bellsmarket:20150226175107p:plain

HTMLの挿入

HTML要素内の先頭に挿入

prepend()

<script>
$(function(){
$( 'p#first' ).prepend( '<strong>先頭に挿入</strong>' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226180147p:plainf:id:bellsmarket:20150226180143p:plain

HTML要素内の最後に挿入

append()

<script>
$(function(){
$( 'p#first' ).append( '<strong>最後に挿入</strong>' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226180906p:plainf:id:bellsmarket:20150226180910p:plain

HTML要素内の前に挿入

before()

<script>
$(function(){
$ ('p#first' ).before( '<h1>前に挿入</h1>' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226181610p:plainf:id:bellsmarket:20150226181615p:plain

HTML要素内の後ろに挿入:

after()

<script>
$(function(){
$ ('p#first' ).after( '<h1>後ろに挿入</h1>' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226182240p:plainf:id:bellsmarket:20150226182244p:plain

HTMLの移動

HTMLの要素を文書内に新たに追加するのではなく、もともと存在していた要素の文書内の位置を変更します

HTML要素内の先頭に移動:

prependTo()メソッド

<script>
$(function(){
$( 'strong' ).prependTo( 'p' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
<strong>先頭に移動</strong>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226183300p:plainf:id:bellsmarket:20150226183256p:plain

HTML要素内の最後に移動:

appendTo()メソッド

<script>
$(function(){
$( 'strong' ).appendTo( 'p' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
<strong>最後に移動</strong>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226183634p:plainf:id:bellsmarket:20150226183630p:plain

HTML要素内の前に移動:

insertBefore()メソッド

<script>
$(function(){
$( 'h1' ).insertBefore( 'p' );
});
</script>
</head>
<body>
<p>テキストテキスト</p>
<h1>前に移動</h1>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226184804p:plain f:id:bellsmarket:20150226184622p:plain

HTML要素内の後ろに移動:

insertAfter()メソッド

<script>
$(function(){
$( 'h1' ).insertAfter( 'p' );
});
</script>
</head>
<body>
<h1>後ろに移動</h1>
<p>テキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226185205p:plainf:id:bellsmarket:20150226185202p:plain

他の要素で包む

各要素を指定した要素で包む

wrap()メソッド

<script>
$(function(){
$( 'strong' ).wrap( '<h2></h2>' );
});
</script>
</head>
<body>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226190212p:plainf:id:bellsmarket:20150226190220p:plain

全要素を別の要素で包む

wrapAll()メソッド

<script>
$(function(){
$( 'strong' ).wrapAll( '<h2></h2>' );
});
</script>
</head>
<body>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226190225p:plainf:id:bellsmarket:20150226190223p:plain

指定した要素の子要素を別の要素で包む:

wrapInner()メソッド

<script>
$(function(){
$( 'p' ).wrapInner( '<strong></strong>' );
});
</script>
</head>
<body>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226190228p:plainf:id:bellsmarket:20150226190230p:plain

親要素を取り除く

指定した要素の親要素を取り除く

unwrap()メソッド

<script>
$(function(){
$( 'strong' ).unwrap();
});
</script>
</head>
<body>
<h1><strong>テキストテキスト</strong></h1>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226193720p:plainf:id:bellsmarket:20150226193722p:plain

要素の置き換え

指定した要素を他の要素に置き換える

replaceWith()メソッド

<script>
$(function(){
$( 'p' ).replaceWith( '<h1>置き換え後</h1>' );
});
</script>
</head>
<body>
<p>置き換え前</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226193714p:plainf:id:bellsmarket:20150226193717p:plain

要素の削除

セレクターで指定した要素を削除する

remove()メソッド

<script>
$(function(){
$( 'p strong' ).remove();
});
</script>
</head>
<body>
<p><strong>削除する要素</strong>テキストテキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226193712p:plainf:id:bellsmarket:20150226193709p:plain

属性値の変更と取得

属性値の変更

attr()メソッド

<script>
$(function(){
$( 'a' ).attr( 'href', 'http://google.co.jp/' );
});
</script>
</head>
<body>
<p><a href="http://yahoo.co.jp/">リンク先</a></p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226194249p:plainf:id:bellsmarket:20150226194252p:plain

属性値の取得

attr()メソッド

<script>
$(function(){
$( 'a' ).text( $( 'a' ).attr( 'href' ) );
});
</script>
</head>
<body>
<p><a href="http://google.co.jp/">リンク先</a></p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226194639p:plainf:id:bellsmarket:20150226194636p:plain

属性値の削除

removeAttr()メソッド

<script>
$(function(){
$( 'a' ).removeAttr( 'target' );
});
</script>
</head>
<body>
<p><a href="http://google.co.jp/" target="_blank">リンク先</a></p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226200207p:plainf:id:bellsmarket:20150226200209p:plain

class属性値の追加と削除

class属性値の追加

addClass()メソッド

<style>
.red {
color:red;
}
</style>
<script>
$(function(){
$( 'p' ).addClass( 'red' );
});
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226200202p:plainf:id:bellsmarket:20150226200204p:plain

class属性値の削除

removeClass()メソッド

<style>
.red {
color:red;
}
</style>
<script>
$(function(){
$( 'p' ).removeClass( 'red' );
});
</script>
</head>
<body>
<p class="red">テキストテキストテキストテキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226200153p:plainf:id:bellsmarket:20150226200158p:plain

CSSの制御

jQueryでは簡単な記述でCSSのプロパティの値を設定したり、取得したりできる

CSSプロパティの設定

css()メソッド

<script>
$(function(){
$('p').css({
backgroundColor: 'skyblue',
fontWeight: 'bold',
color: 'yellow'
});
});
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226200147p:plainf:id:bellsmarket:20150226200149p:plain

CSSプロパティの値の取得

css()メソッド

<script>
$(function(){
$( 'p' ).text( $( 'p' ).css( 'color' ) );
});
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキスト</p>
</body>
</html>

《実行結果》変更前→変更後

f:id:bellsmarket:20150226200141p:plainf:id:bellsmarket:20150226200144p:plain

topへ戻る