Download to read offline
Recommended
More Related Content
What's hot
Similar to jQuery勉強会#3
More from Ryo Maruyama
jQuery勉強会#3
- 1.jQuery勉強会#3 2012/10/12 丸山 亮@h13i32maru
- 2.自己紹介• 丸山 亮@h13i32maru•JavaScript結構好きなプログラマー• 今はPython少しずつ勉強中• 焼鳥と牛たんが好物 https://twitter.com/h13i32maru
- 3.今日のゴール• CSSセレクタだけではできない要素の絞込みを 知る•たくさんあるので、「こんなのあるんだー」程度 でOK
- 4.jQueryの技術要素• 要素の選択: Selectors(jQuery勉強会#2)• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax http://docs.jquery.com/
- 5.jQueryの技術要素• 要素の選択: Selectors(jQuery勉強会#2)• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax http://docs.jquery.com/
- 6.要素の絞込み: Traversing• SelectorsAPI(CSSセレクタ)だけでは選択で きない要素の絞込みができる• 絞込みだけじゃなくて、縦横無尽に選択も可能
- 7.絞り込みの種類• 自要素の絞込み• 子要素の絞込み•親要素の絞込み• 兄弟要素の絞込み• 操作• each()
- 8.絞り込みの種類• 自要素の絞込み• 子要素の絞込み•親要素の絞込み• 兄弟要素の絞込み• 操作• each()
- 9.自要素の絞込み $( div, span ).filter( .small )<div> <span>A</span> <span class="small">A</span> <span class="small">A</span></div><div class="small">A</div>
- 10.自要素の絞込み $( div, span ).filter( .small )<div> <span>A</span> <span class="small">A</span> <span class="small">A</span></div><div class="small">A</div>
- 11.自要素の絞込み $( div, span ).filter( .small )<div> <span>A</span> <span class="small">A</span> <span class="small">A</span></div><div class="small">A</div>
- 12.CSSセレクタと比較$( div, span ).filter( .small ) $( div.small, span.small ) .small が重複してる！！！
- 13.自要素の絞込み• .filter( .small) → .smallの要素だけに絞込み• .first() → 最初の要素だけに絞込み• .last() → 最後の要素だけに絞込み• .eq(3) → 3番目の要素だけに絞込み• .slice(1, 3) → 1番目から3番目の要素だけに絞 込み• .has( li ) → li要素を持つ要素だけに絞込み
- 14.絞り込みの種類• 自要素の絞込み• 子要素の絞込み•親要素の絞込み• 兄弟要素の絞込み• 操作• each()
- 15.子要素の絞込み $('div').find('.small, .medium')<div> <span class="small">A</span> <div> <span class="medium">A</span> <span>A</span> </div></div><p> <span class="small">A</span></p>
- 16.子要素の絞込み $('div').find('.small, .medium')<div> <span class="small">A</span> <span class="medium">A</span> <span>A</span></div><p> <span class="small">A</span></p>
- 17.子要素の絞込み $('div').find('.small, .medium')<div> <span class="small">A</span> <span class="medium">A</span> <span>A</span></div><p> <span class="small">A</span></p>
- 18.CSSセレクタと比較 $('div').find('.small,.medium') $('div .small, div .medium') div が重複してる！！！
- 19.子要素の絞込み• .find( .small) → 子要素(孫要素含む)のう ち.smallだけを絞込み• .children( .small ) → 子要素(孫要素含まない) のうち.smallだけを絞込み
- 20.絞り込みの種類• 自要素の絞込み• 子要素の絞込み•親要素の絞込み• 兄弟要素の絞込み• 操作• each()
- 21.親要素の絞込み $('.small').parent()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
- 22.親要素の絞込み $('.small').parent()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
- 23.親要素の絞込み $('.small').parent()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
- 24.CSSセレクタと比較 $('.small').parent() できない！！！
- 25.親要素の絞込み• .parent() →親要素(一つ上のみ)を選択• .parents() → 親要素(先祖要素)を選択
- 26.絞り込みの種類• 自要素の絞込み• 子要素の絞込み•親要素の絞込み• 兄弟要素の絞込み• 操作• each()
- 27.兄弟要素の絞込み $('.small').prev()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
- 28.親要素の絞込み $('.small').prev()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
- 29.親要素の絞込み $('.small').prev()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
- 30.CSSセレクタと比較 $('.small').prev() できない！！！
- 31.兄弟要素の絞込み• .prev() →直前の要素を選択• .prevAll() → 直前の全ての要素を選択• .next() → 直後の要素を選択• .nextAll() → 直後の全ての要素を選択• .siblings() → 直前と直後の全ての要素を選択
- 32.絞り込みの種類• 自要素の絞込み• 子要素の絞込み•親要素の絞込み• 兄弟要素の絞込み• 操作• each()
- 33.操作 $('.small').next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
- 34.操作 $('.small').next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
- 35.操作 $('.small').next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
- 36.操作 $('.small').next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
- 37.CSSセレクタと比較$('.small').next().andSelf() $('.small + *, .small ') .smallが重複！！！
- 38.操作• .andSelf() →自要素を追加する• .add( .small ) → .smallの要素を追加する
- 39.絞り込みの種類• 自要素の絞込み• 子要素の絞込み•親要素の絞込み• 兄弟要素の絞込み• 操作• each()
- 40.each()$('li').each(function(index, elm){alert("No." + index + " is " + $(elm).text());}); <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
- 41.操作$('li').each(function(index, elm){alert("No." + index + " is " + $(elm).text());}); <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
- 42.操作$('li').each(function(index, elm){alert("No." + index + " is " + $(elm).text());}); <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
- 43.操作$('li').each(function(index, elm){alert("No." + index + " is " + $(elm).text());}); <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
- 44.操作$('li').each(function(index, elm){alert("No." + index + " is " + $(elm).text());}); <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
- 45.each()• each()は選択した要素を順番に走査して、処理 を行う•jQueryではよく使われる機能
- 46.