この記事の例では、基本的な操作、操作対象の要素の選択、DOM 要素の処理など、要素に対する jQuery の操作について説明します。 jQueryを学ぶのに良い参考値となります。皆さんの参考に共有してください。具体的な分析は次のとおりです。
1. 基本
jquery オブジェクト セット:
$(): jquery オブジェクトのコレクション
jquery オブジェクト セット内の要素を取得します:
インデックスを使用してラッパー内の JavaScript 要素を取得します:
var temp = $('img[alt]')[0]
jquery の get メソッドを使用して、jquery オブジェクト セット内の JavaScript 要素を取得します。
var temp = $('img[alt]').get(0)
jquery の eq メソッドを使用して、jquery オブジェクト セット内の jquery オブジェクト要素を取得します。
$('img[alt]').eq(0)
$('img[alt]').first()
$('img[alt]').last()
jquery オブジェクト セットを JavaScript 配列に変換します:
var arr = $('label+button').toArray()
ラベルの背後にある同じレベルのすべてのボタン要素が JavaScript 配列に変換されます
jquery オブジェクトセットのインデックス:
var n = $('img').index($('img#id')[0]) 注:index() パラメーターは JavaScript 要素
です。
var n = $('img').index('img#id') は前の行と同等です。見つからない場合は -1
を返します。
var n = $('img').index() は同じレベル要素
さらに jquery オブジェクト セットを jquery オブジェクト セットに追加します:
カンマを使用します:
$('img[alt],img[title]')
追加メソッドを使用します:
$('img[alt]').add('img[title]')
異なる jquery オブジェクトに対して異なるメソッドを使用します:
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');
新しく作成した要素を jquery オブジェクト セットに追加します:
$('p').add('<div></div>');
jquery オブジェクト セットから要素を削除します:
$('img[title]').not('[title*=pu]')
$('img').not(function(){return !$(this).hasClass('someClassname')})
フィルター jquery オブジェクト セット:
$('td').filter(function(){return this.innerHTML.match(^d $)}) 数値を含む td
jquery オブジェクト セットのサブセットを取得します
$('*').slice(0,4) 最初の 4 つの要素を含む jquery オブジェクトの新しいセット
$('*').slice(4) 最初の 4 つの要素を含む jquery オブジェクトの新しいセット
$('div').has('img[alt]')
jquery オブジェクト セット内の要素を変換します:
var allIds = $('div').map(function(){
return (this.id==undefined) ? null : this.id;
}).get();上記の例は、get メソッドを通じて JavaScript 配列に変換できます。
jquery オブジェクト セット内の要素を走査します:
$('img').each(function(n){
this.alt = '这是第['+n+']张图片，图片的id是' + this.id;
})
$([1,2,3]).each(function(){alert(this);})
要素間の関係を使用して jquery オブジェクトのセットを取得します:
$(this).closest('div') たとえば、どの div 内でトリガーされたボタンが発生します
$(this).siblings('button[title="Close"]')それ自体を除くすべての兄弟要素
$(this).children('.someclassname')重複した子ノードを除くすべての子ノード要素
$(this).closest('') は祖先要素
に近いです
$(this).contents() は、要素コンテンツで構成される一連の jquery オブジェクトです。たとえば、