jQuery
DOM操作
サーチ…
DOM要素の作成
jQuery関数（通常は$エイリアス）は、要素の選択と新しい要素の作成の両方に使用できます。
var myLink = $('<a href="http://stackexchange.com"></a>');
オプションで、要素の属性を持つ2番目の引数を渡すことができます。
var myLink = $('<a>', { 'href': 'http://stackexchange.com' });
'<a>' - >最初の引数は、作成するDOM要素のタイプを指定します。この例では、 アンカーですが、このリスト上の何かになる可能性があります 。 a要素のリファレンスについては、 仕様を参照してください。
{ 'href': 'http://stackexchange.com' } - > 2番目の引数は、属性名と値のペアを含むJavaScriptオブジェクトです。
最初の引数の< >の間に 'name'： 'value'のペアが表示されます（例： <a name:value>この例では<a href="http://stackexchange.com"></a>
要素クラスの操作
ページに次のようなHTML要素が含まれていると仮定します。
<p class="small-paragraph">
This is a small <a href="https://en.wikipedia.org/wiki/Paragraph">paragraph</a>
with a <a class="trusted" href="http://stackexchange.com">link</a> inside.
</p>
jQueryはDOMクラス、特にhasClass() 、 addClass() 、 removeClass()およびtoggleClass()を操作するのに便利な関数を提供します。これらの関数は、一致した要素のclass属性を直接変更します。
$('p').hasClass('small-paragraph'); // true
$('p').hasClass('large-paragraph'); // false
// Add a class to all links within paragraphs
$('p a').addClass('untrusted-link-in-paragraph');
// Remove the class from a.trusted
$('a.trusted.untrusted-link-in-paragraph')
.removeClass('untrusted-link-in-paragraph')
.addClass('trusted-link-in-paragraph');
クラスを切り替える
サンプルのマークアップを与えられ.toggleClass() 、最初の.toggleClass()クラスを追加できます：
$(".small-paragraph").toggleClass("pretty");
これはtrueを返しtrue ： $(".small-paragraph").hasClass("pretty")
toggleClassは以下のようにコードを減らして同じ効果を提供します：
if($(".small-paragraph").hasClass("pretty")){
$(".small-paragraph").removeClass("pretty");}
else {
$(".small-paragraph").addClass("pretty"); }
2つのクラスを切り替える：
$(".small-paragraph").toggleClass("pretty cool");
クラスを追加/削除するブール値：
$(".small-paragraph").toggleClass("pretty",true); //cannot be truthy/falsey
$(".small-paragraph").toggleClass("pretty",false);
クラストグルの関数（問題を避けるためにさらに下の例を参照）
$( "div.surface" ).toggleClass(function() {
if ( $( this ).parent().is( ".water" ) ) {
return "wet";
} else {
return "dry";
}
});
例で使用されます：
// functions to use in examples
function stringContains(myString, mySubString) {
return myString.indexOf(mySubString) !== -1;
}
function isOdd(num) { return num % 2;}
var showClass = true; //we want to add the class
例：
要素インデックスを使用して、クラス奇数/偶数を切り替えます。
$( "div.gridrow" ).toggleClass(function(index,oldClasses, false), showClass ) {
showClass
if ( isOdd(index) ) {
return "wet";
} else {
return "dry";
}
});
より複雑なtoggleClass例、単純なグリッドマークアップ
<div class="grid">
<div class="gridrow">row</div>
<div class="gridrow">row</div>
<div class="gridrow">row</div>
<div class="gridrow">row</div>
<div class="gridrow">row</div>
<div class="gridrow gridfooter">row but I am footer!</div>
</div>
私たちの例のためのシンプルな関数：
function isOdd(num) {
return num % 2;
}
function stringContains(myString, mySubString) {
return myString.indexOf(mySubString) !== -1;
}
var showClass = true; //we want to add the class
gridrowクラスを持つ要素に奇数/偶数クラスを追加する
$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
if (isOdd(index)) {
return "odd";
} else {
return "even";
}
return oldClasses;
}, showClass);
行にgridfooterクラスがある場合は、奇数/偶数クラスを削除し、残りの部分は保持します。
$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
var isFooter = stringContains(oldClasses, "gridfooter");
if (isFooter) {
oldClasses = oldClasses.replace('even', ' ').replace('odd', ' ');
$(this).toggleClass("even odd", false);
}
return oldClasses;
}, showClass);
返されるクラスは、何が行われるかです。ここで、要素にgridfooterがない場合は、偶数/奇数のクラスを追加します。この例は、OLDクラスリストの戻り値を示しています。これelse return oldClasses;場合はelse return oldClasses;新しいクラスだけが追加されるので、 gridfooterクラスを持つ行は、 gridfooterクラスを返していない場合はすべてのクラスを削除します。そうでない場合は、トグル（削除）されています。
$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
var isFooter = stringContains(oldClasses, "gridfooter");
if (!isFooter) {
if (isOdd(index)) {
return "oddLight";
} else {
return "evenLight";
}
} else return oldClasses;
}, showClass);
その他のAPIメソッド
jQueryは、DOM操作に使用できるさまざまなメソッドを提供します。
最初は.empty（）メソッドです。
次のマークアップを想像してみてください。
<div id="content">
<div>Some text</div>
</div>
$('#content').empty();呼び出し$('#content').empty();内側のdivが削除されます。これは$('#content').html('');を使っても実現でき$('#content').html(''); 。
もう1つの便利な関数は、 .closest（）関数です。
<tr id="row_1">
<td><button type="button" class="delete">Delete</button>
</tr>
行セルの1つの中でクリックされたボタンに最も近い行を探したい場合は、これを行うことができます：
$('.delete').click(function() {
$(this).closest('tr');
});
おそらく、それぞれ独自のdeleteボタンを持つ複数の行があるため、実際にクリックしたボタンの範囲を制限するために.click（）関数内で$(this)を使用します。
あなたがクリックしたDeleteボタンを含む行のidを取得したい場合は、次のようにすることができます：
$('.delete').click(function() {
var $row = $(this).closest('tr');
var id = $row.attr('id');
});
通常、jQueryオブジェクトを含む変数の前に$ （ドル記号）を付けると、変数の内容を明確にすることをお勧めします。
.closest()の代わりに.closest() （）メソッドを使用することもできます。
$('.delete').click(function() {
var $row = $(this).parents('tr');
var id = $row.attr('id');
});
.parent（）関数もあります：
$('.delete').click(function() {
var $row = $(this).parent().parent();
var id = $row.attr('id');
});
.parent()はDOMツリーの1つのレベルにしか.parent()ないため、非常に柔軟性がありません。たとえば、削除ボタンをspanに.parent()ように変更すると、jQueryセレクタが壊れてしまいます。
.html（）
このメソッドを使用すると、セレクタ内のすべてのHTMLを置き換えることができます。このようなhtml要素があると仮定します
<div class="row">
<div class="col-md-12">
<div id="information">
<p>Old message</p>
</div>
</div>
</div>
.html()使うことができます。アラートや情報テキストを削除して追加し、1行ですべてのユーザーに警告します。
$("#information").html("<p>This is the new alert!</p>");
要素の並べ替え
効率的に要素を並べ替えるには（すべての要素を一度に最小限のDOM中断で）並べ替えるには、
- 要素を見つける
- 設定された条件に基づいてソート
- DOMに戻って挿入する
<ul id='my-color-list'>
<li class="disabled">Red</li>
<li>Green</li>
<li class="disabled">Purple</li>
<li>Orange</li>
</ul>
それらを見つける -
.children()または.find()これは、演奏するArrayのようなオブジェクトを返します。
var $myColorList = $('#my-color-list'); // Elements one layer deep get .children(), any deeper go with .find() var $colors = $myColorList.children('li');それらを再配置する -
Array.prototype.sort()これは現在、HTMLコンテンツ（別名色）に基づいて要素を昇順で返すように設定されています。
/** * Bind $colors to the sort method so we don't have to travel up * all these properties more than once. */ var sortList = Array.prototype.sort.bind($colors); sortList(function ( a, b ) { // Cache inner content from the first element (a) and the next sibling (b) var aText = a.innerHTML; var bText = b.innerHTML; // Returning -1 will place element `a` before element `b` if ( aText < bText ) { return -1; } // Returning 1 will do the opposite if ( aText > bText ) { return 1; } // Returning 0 leaves them as-is return 0; });それらを挿入する
.append()最初に要素をデタッチする必要はないことに注意してください。 -
append()はDOM内に既に存在する要素を移動するので、余分なコピーはありません// Put it right back where we got it $myColorList.append($colors);
それをかわいくする
ソートボタンを追加する
<!-- previous HTML above -->
<button type='button' id='btn-sort'>
Sort
</button>
ソート方向の初期値を設定する
var ascending = true;
DOMの処理を最小限に抑えるために、DOM要素とsortList()をここにキャッシュします。
var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);
すべてをdoSort()関数でラップします。
// Put the sortList() and detach/append calls in this portable little thing
var doSort = function ( ascending ) {
sortList(function ( a, b ) {
// ...
});
$myColorList.append($colors);
};
$('#btn-sort')クリックハンドラを追加する
$('#btn-sort').on('click', function () {
// Run the sort and pass in the direction value
doSort(ascending);
// Toggle direction and save
ascending = !ascending;
});
今一緒に
var ascending = true;
var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);
var doSort = function ( ascending ) {
sortList(function ( a, b ) {
var aText = a.innerHTML;
var bText = b.innerHTML;
if ( aText < bText ) {
return ascending ? -1 : 1;
}
if ( aText > bText ) {
return ascending ? 1 : -1;
}
return 0;
});
$myColorList.append($colors);
};
$('#btn-sort').on('click', function () {
doSort(ascending);
ascending = !ascending;
});
ボーナス
マルチレベルソート（ソートされた要素をグループ化する）
// ...
var doSort = function ( ascending ) {
sortList(function ( a, b ) {
// ...initial sorting...
}).sort(function ( a, b ) {
// We take the returned items and sort them once more
var aClass = a.className;
var bClass = b.className;
// Let's group the disabled items together and put them at the end
/**
* If the two elements being compared have the same class
* then there's no need to move anything.
*/
if ( aClass !== bClass ) {
return aClass === 'disabled' ? 1 : -1;
}
return 0;
});
// And finalize with re-insert
$myColorList.append($colors);
};
// ...
もう一度それを取ることができますか？