平成21年2月9日月曜日

JQuery ----DOM編   勉強メモ

常用選択方法リスト
$()
$('#some_id')
$('.some_class')
$('#selectedplays > li')
$('#selectedplays li:not(.class)')
$('a[title]')
$('div:has(ol)')
$('a[href^="mailto:"]')
$('a[href$=".pdf"]')
$('a[href*="mysite.com"]')
$('a[id][href*="mysite.com"][alt]')
$('div.class:eq(1)')
$('tr:odd')
$('tr:even')
$('td:contains("Henry")')
$('tr:odd') $('tr').filter(':odd')
$('tr').parent()
$('tr').next()
$('tr.class').siblings()
$('tr.class').find('td')
$('tr.class').not(':contains("test")')
$('tr.class').find('td:eq(1)').addClass('class').end()
$('#myelement').get(0).tagName




さっきのリストに通じて、JQueryのDOM選ぶ方法を紹介します
$()
かこう中にDOM選択ルールを追加したら、$()は対応のDOM対象になります

$('#some_id')
#後にDOMのIDを追加したら、このID対応のDOM対象を選びます

$('.some_class')
some_classというクラス名があるのDOMエレメントを選びます

$('#selectedplays > li')
selectedplays というidを持つ要素の、直下にあるliという要素全てに選びます

$('#selectedplays li:not(.class)')
#selectedplays liという意味は
liはselectedplays というidを持つ要素の子要素全てを指します。必ずしも直下である必要はありません。
:not(.class)という意味は
さっきのLi子要素リストにclassというクラスを持たないLiリスト

$('a[title]')
指定したtitle属性を持っているa要素を抽出します。

$('div:has(ol)')
指定したol子要素を持っているdiv要素を抽出します 

$('a[href^="mailto:"]')
href属性が特定の文字列「mailto:」から始まる要素aを抽出します 

$('a[href$=".pdf"]')
href属性が特定の文字列「.pdf」で終わる要素aを選択します

$('a[href*="mysite.com"]')
href属性値が指定された文字列「mysite.com」を含む要素aを選択する。

$('a[id][@href*="mysite.com"][@alt]')
href属性値が全て条件を満足する要素を選択する

$('div.class:eq(1)')
$('div.class')を選択したDOM対象の第二個DOM対象「インデックスは0からので」

$('tr:odd')
偶数番の要素を選択する。

$('tr:even')
奇数番の要素を選択する。

$('td:contains("Henry")')
文字列"Henry"がある要素を選択する

$('tr:odd') $('tr').filter(':odd')
同じ意味けど、filterを使うできる所もっと多いです。

$('tr').parent()
要素の親要素

$('tr').next()
各要素の1つ次に来る兄弟要素を全て選択する。

$('tr.class').siblings()
$('tr.class')各要素の兄弟要素を全て返す。

$('tr.class').find('td')
$('tr.class')要素集合から条件式に合う子孫要素を抽出する。これは処理中の要素から、更に詳細に処理したい子孫要素をピックアップする際に有用。


APIが多いので、ここ書いているのは、JQuery APIより、自分でよく使っている一部分です、JQueryで開発したくたら、せめてこの部分を了解します

例と詳しい説明はAPIに参考するほうがいい出と思います
API URL:http://semooh.jp/jquery/api/selectors/

0 件のコメント: