要素の選択と操作
直下セレクタ
$('#id > p').text('Hello');#id直下の子要素pを選択します。
子孫セレクタ
$('#id p').text('Hello');#idの子と孫を選択します。
属性の選択
$('[href="sample"]').text('Hello');
$('a[href="sample"]').text('Hello');CSSの変更
$('h2').css('color', 'red');HTMLに置き換え
選択した要素の中にHTMLをセットします。
既存のものは置き換えられます。
$('div').html('<a href="sample">Hello</a>');要素の追加
選択した要素の最後にHTMLを追加します。
$('#id').append('<p>Hello</p>');要素の削除
$('#id').remove();前の要素を選択
兄弟要素の中の前の要素を選択する。
$('#id).prev().text('Hello');次の要素を選択
兄弟要素の中の次の要素を選択する。
$('#id).next().text('Hello');<input>の値を取得
$('#input').val();<input>に値をセットする
$('#input').val('Hello');要素の選択方法例
| 指定方法 | 選択される要素 |
|---|---|
$('#id').children() | 子要素 |
$('#id').find('a') | 子を辿って見つかったすべてのa |
$('#id').closest('div') | 親を辿って最初に見つかったdiv |
$('#id').next() | 同じ階層にある次の要素 |
$('#id').prev() | 同じ階層にある1つ前の要素 |
$('#id').parent() | 親要素 |
$('#id').siblings('.content') | 同じ階層でcontentクラスを持つすべての要素 |
属性値の取得
<a href=”sample”></a>の属性値を取得します。
一致する要素が複数あった場合、最初の要素から属性値を取得します。
$('a').attr('href');属性値をセットする
$('セレクタ').attr('属性名', '属性値')で、第2引数に指定した属性値をセットできます。
一致する全ての要素が対象となります。
$('a').attr('href', 'hello');forEachメソッド
配列が持つメソッドで、引数に関数を渡して呼び出します。
var items = ['田中', '佐藤', '鈴木'];
function runItems(item) {
console.log('item' + 'さん');
}
items.forEach(items);
// 出力結果
田中さん
佐藤さん
鈴木さんforEachメソッドの引数に関数（runItems）を渡します。
itemsの要素が引数として順番にrunItems関数に渡され実行されます。
mapメソッド
mapメソッドは配列のメソッドです。
forEachと同じような処理を行いますが、mapメソッドは引数に渡した関数で処理した値を新しい配列として返します。
var items = ['田中', '佐藤', '鈴木'];
function runItems(item) {
return item' + 'さん';
}
var result = items.map(items);
// resultの中身
['田中さん', '佐藤さん', '鈴木さん']testメソッド
対象の文字列が、正規表現のパターンに合致するかを確認します。
true/falseを返します。
var pattern = [\w.-]+@[\w-]+\.[\w.-]+;
var email = 'sample@mail.com';
if(pattern.test(email)) {
console.log('メアドです');
} else {
console.log('違います');
}
コメント