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

jQueryの命令

HTML/CSSを操作するjQueryの命令

<script>

$(function(){

$('セレクタ').命令();

});

</script>

 

テキストの変更と取得

text() テキストを変更する

text() テキストを取得する

HTMLの変更と取得

html() HTMLを変更する

html() HTMLを取得する

HTMLの挿入

prepend() 指定した要素内部の先頭にHTMLを挿入する

append() 指定した要素内部の最後にHTMLを挿入する

before() 指定した要素の前にHTMLを挿入する

after() 指定した要素の後にHTMLを挿入する

HTMLの移動

prependTo() 他の要素の先頭に要素を移動する

appendTo() 他の要素の最後に要素を移動する

insertBefore() 他の要素の前に要素を移動する

InsertAfter() 他の要素の後に要素を移動する 

他の要素で包む

wrap() 指定した要素を他の要素で包む

wrapAll() 指定した要素をまとめて他の要素で包む

wrapInner() 指定した要素の子要素/テキストを別の要素で包む

親要素を取り除く

unwrap() 親要素を取り除く

要素の置き換え

replaceWith() 要素を他の要素に置き換える

要素の削除

remove() 要素を削除する

属性値の変更と取得

attr() 指定した属性の値を変更する

attr() 指定した属性の値を取得する

removeAttr() 指定した属性を削除する

class属性の追加と削除

addClass() class属性の追加する

removeClass() class属性の削除する

cssの制御

css() 指定したcssプロパティの値を設定する

css() 指定したcssプロパティの値を取得する

 

jQueryの命令を使ってみる

jQueryの練習1

<script>
//jQueryコードを記述
$(function(){
$('p#change').text('変更後のテキスト');//テキストの変更
$('p#second').text($('p#first').text());//テキストの取得・変更
$('p#third').html('<strong>変更後</strong>');//HTMLの変更
$('p#ccc').html($('p#bbb').html());//HTMLの取得・変更
});
</script>
</head>

<body>
<p id="change">テキスト</p>
<p id="first">取得する文字列</p>
<p id="second">変更前</p>
<p id="third">aaaaaaaaa</p>
<p id="bbb">bbbbbbbbb</p>
<p id="ccc">ccccccccccc</p>
</body>

 

jQuery実行前のテキスト

f:id:develog:20160921014139p:plain

jQuery実行後のテキスト

f:id:develog:20160921014147p:plain

jQueryの練習2

<title>jQuery class属性の追加</title>
<style>
.red {
color: red;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('p').addClass('red');
});
</script>
</head>

<body>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
</body>

 

jQuery実行後

f:id:develog:20160921105815p:plain

jQueryの練習3

<title>jQuery class属性の削除</title>
<style>
.red {
color: red;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('p').removeClass('red');
});
</script>
</head>

<body>
<p class="red">テキストテキスト</p>
<p>テキストテキスト</p>
</body>

 

jQuery実行前

f:id:develog:20160921110402p:plain

 

jQuery実行後

f:id:develog:20160921110419p:plain

jQueryの練習4

<title>jQuery HTMLの挿入</title>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('p#first').prepend('<strong>先頭に挿入</strong>');
$('p#first').append('<strong>最後に挿入</strong>');
$('p#first').before('<h1>要素の前に挿入</h1>');
$('p#first').after('<h1>要素の後に挿入</h1>');
});
</script>
</head>

<body>
<p id="first">テキストテキスト</p>
</body>

 

jQuery実行後

f:id:develog:20160921110835p:plain

jQueryの練習5

<title>jQuery 要素の置き換え</title>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('p').replaceWith('<h1>置き換え後</h1>');
});
</script>
</head>

<body>
<p>テキストテキスト</p>
</body>

 

jQuery実行後

f:id:develog:20160921111306p:plain

jQueryの練習6

<title>jQuery 要素の削除</title>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('p strong').remove();
});
</script>
</head>

<body>
<p><strong>テキスト</strong>テキスト</p>
</body>

 

jQuery実行後

f:id:develog:20160921111409p:plain