jquery(26)
-
프로퍼티와 어트리뷰트 조작하기
. 집합을 순회하면서 전달된 반복자 함수를 엘리먼트마다 호출 : each(iterator) 함수의 인자 n은 0 부터 시작하는 인덱스를 매개변수로 받는다. 함수로 처리된 확장 집합을 return한다. $('img').each( function(n) { this.alt = '아이디가 ' + this.id + '인 image['+n+']이다.'; } ); var allAlts = new Array(); $('img').each( function(n) { allAlts.push( this.alt ); } ); . 일치하는 집합의 첫 번째 엘리먼트에서 명시된 어트리뷰트의 값을 얻는다. : attr(name) 일치하는 집합이 없거나, 첫 번째 엘리먼트에 어트리뷰트가 없다면 undefined를 반환 $("#myIm..
2015.04.23 -
확장 집합 다루기
. 확장된 집합의 크기(개수) : length, size() $('#someDiv').html('페이지에는 총 '+$('a').size()+'개의 링크가 있다.'); . 확장된 집합에서 (하나 또는 모든) 엘리먼트 획득하기 : [0], get(0) $('img[alt]')[0] 또는 $('img[alt]').get(0) var allLabeledButtons = $('label+button').get(); . 인덱스 확인 : index(element) 발견되지 않으면 -1 return var n = $('img').index( $('img#findMe')[0] ); * element 집합을 전달할 경우, 첫 번째 엘리먼트의 인덱스를 반환 . 확장 집합에 다른 엘리먼트 추가하기 : add(jQuery셀렉터..
2015.04.22 -
HTML 생성하기
$("hi") $("div>") ← $("") 나 $("") 와 동일하다. $("I have foo!I don 't") .filter(".foo").click( function() { alert("I'm foo!"); } ).end() .appendTo("#someParentDiv"); - 엘리먼트를 2개 생성하고 첫 번째 엘리먼트에는 foo 클래스가 있고, 다른 하나에는 없다. 생성한 다음 foo 클래스를 가진 엘리먼트를 클릭하면, 경고 메시지를 띄우는 이벤트 핸들러를 바인딩한다. end() 메서드를 이용해 필터링 이전의 두 엘리먼트를 지닌 집합으로 돌아간 뒤, ID가 someParentDiv인 엘리먼트에 덧붙인다. * 블록을 생성한다고 해서 바로 로드된다고 보장할 수 없다.
2015.04.22 -
셀렉터 사용하기 #3 - jQuery 정의 셀렉터
CSS셀렉터로는 표현할 수 없는 특성있는 엘리먼트를 선택할 필요가 있다. :radio:checked :checkbox:checked * jQuery 정의 필터 셀렉터 셀렉터 설명 :animated 현재 애니메이션이 적용되고 있는 엘리먼트를 선택 :button 모든 버튼을 선택 input[type=submit], input[type=reset], input[type=button], button :checkbox 체크박스 엘리먼트만 선택. input[type=checkbox] :checked 선택된 체크박스나 라디오 버튼만을 선택. :contains(foo) 텍스트 foo를 포함하는 엘리먼트만 선택 :disabled 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 :enabled 인터페이스에서 활성화..
2015.04.22 -
셀렉터 사용하기 #2 - 위치 기반 셀렉터
* 위치 기반 셀렉터 : DOM에서 위치를 기반으로 엘리먼트를 선택 셀렉터 설명 :first 페이지에서 처음으로 일치하는 엘리먼트 li a:first는 리스트 아이템의 첫 번째 링크를 반환 :last 페이지에서 마지막으로 일치하는 엘리먼트 li a:last는 리스트 아이템의 마지막 링크를 반환 :first-child 첫 번째 자식 엘리먼트 li:first-child는 각 리시트의 첫 번째 아이템을 반환 :last-child 마지막 자식 엘리먼트 li:last-child는 각 리스트의 마지막 아이템을 반환 :only-child 형제가 없는 모든 엘리먼트를 반환 :nth-child(n) n번째 자식 엘리먼트 li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환 :nth-child(even..
2015.04.22 -
셀렉터 사용하기 #1 - CSS셀렉터
. 자식 셀렉터 : 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분한다. p > a . 어트리뷰트 셀렉터 : 엘리먼트의 어트리뷰트의 값을 구분하여 찾는다. a[href^=http://] a 엘리먼트중 [] 안에 어트리뷰트 명과 값과 어떤 조건으로 찾을 것인지를 기술한다. ^는 값의 시작 부분이 일치함을 의미한다. 웬지 정규식 스럽다. . 값에 상관없이 특정 어트리뷰트를 가지는 경우는 a[href] . 어트리뷰트의 특정 값과 일치시키려면 input[type=text] . 끝 값이 일치하는 a[href$=.pdf] . 임의의 문자열을 포함하는 a[href*=jquery.com] . 컨테이너 셀렉터 : 엘리먼트를 포함하고 있는 엘리먼트를 찾는다. li:has(a) 엘리먼트를 포함하는 모든 엘리먼트 li a ..
2015.04.22