1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <script src="js/jquery.js"></script> </head> <body> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> <script> /* prev() 이전요소 선택 next() 다음요소 선택 parent() 부모요소 선택 eq() 랩퍼객체에서 몇번째 요소를 선택 end() 메서드 체인에서 이전요소를 다시 선택한다. // end() 메서드 사용 지점에서 바로 이전 선택자반환메서드 결과로 돌아간다. */ console.log($('table').end()); // document console.log($('table').find('tr').end()); // table console.log($('table').find('tr').find('td').end()); // tr, tr, tr $("tr:first>td:eq(1)").css("background","pink") // 2번 td .prev() // 1번 td .css("background","skyblue") //1번 td .end() // 2번 td .next() // 3번 td .css("background","lightgreen") .parent() // 1번째 tr .css("height",120) .next() // 2번째 tr .children() // 4,5,6번 td .eq(1) // 5번 td .css("background","yellow") .parent() // 2번째 tr .next() // 3번째 tr .children() // 7,8,9 td .eq(2) .css("background","purple") .end(); // 7,8,9 td </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] event.data trigger - 이벤트 데이터 전달 (0) | 2016.03.03 |
|---|---|
| [jQuery] is() - 요소가 맞는지, 속성을 가지고 있는지 확인 hasAttribute (0) | 2016.02.24 |
| [jQuery] input 엔터키 이벤트 - event.which (0) | 2016.01.20 |
| [jQuery] mousedown - event.which (마우스 좌,우,휠 클릭 판단) (0) | 2016.01.19 |
| [jQuery] event.namespaces - 이벤트 네임스페이스로 이벤트 구분 (0) | 2016.01.14 |
