各種要素を操作するためのjQuery基本チュートリアル_jquery

この記事の例では、基本的な操作、操作対象の要素の選択、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() は同じレベル要素

内の img のインデックスを取得します

さらに 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 オブジェクトです。たとえば、