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の制御
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実行前のテキスト
jQuery実行後のテキスト
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実行後
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実行前
jQuery実行後
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実行後
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実行後
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実行後
