개발/Jquery (6) 썸네일형 리스트형 [제이쿼리/jQuery] append() , appendTo() 새로운 요소 삽입 append() , appendTo() 새로운 요소 삽입 appned() 와 appnedTo() 는 어느 특정 요소 하위로 새로운 요소를 삽입할때 사용한다. 특정 조건문일때만 나타나는 요소를 추가할때 등등 사용범위가 넓다. 먼저 간단한 예제를 살펴보자 html 위 div 안에 새로운 요소를 넣고 싶다면 아래와 같이 작성하면 된다. JS $( "",{type:'text'}).appendTo( ".main" );위의 예제는 태그 하위로 input 태그를 삽입하는 예제이다. 만약 appendTo 대신 append 를 사용하고자 한다면 아래와 같이 사용하면 된다. JS $( "",{type:'text'}).appendTo( ".main" ); append() 와 appendTo 의 차이는 함수 인자로 targe.. [제이쿼리/jQuery] 요소 갯수 구하기 .length 요소 갯수 구하기 $("selector").length; 요소 갯수를 구하는 함수는 2가지 ( length 와 size() ) 있습니다.현재는 3.0 버전부터 size() 함수가 사라졌기때문에 이후버전부터는 length 를 사용합니다. 사용예는 아래와 같습니다. HTML definition (특히 사전에 나오는 단어나 구의) 정의 (어떤 개념의) 의미[정의] 선명도 term 용어,말 (지속되는・정해진) 기간 기한, 만기 JS var length = $("dl").length; $("#cnt").html("정의목록 갯수 : "+ length).css("background-color","yellow"); 결과 [제이쿼리/jQuery] 필터셀렉터(:) . :first :last :even :odd :eq :gt :lt :has :not 요약 :fitst첫번째로 일치하는 요소를 가져온다. :last마지막으로 일치하는 요소를 가져온다. :even짝수번째 요소를 모두 가져온다 ( first index : 0 ) :odd홀수번째 요소를 모두 가져온다 ( first index : 0 ) :eq(index) 인자로 전달된 index에 해당하는 요소를 가져온다. ( first index : 0 ) :gt(index)인자로 전달된 index 보다 큰 index를 가진 요소를 모두 가져온다. :lt(index)인자로 전달된 index 보다 작은 index를 가진 요소를 모두 가져온다. :has(selector)인자로 전달된 selector 요소를 하나 이상 포함하고 있는 요소를 가져온다. :not(selector)인자로 전달된 selector 와 일치.. [제이쿼리/jQuery] 자식노드, 다음 인접노드, 다음 형제노드 찾기( Child selector, Next Adjacent Selector, Next Siblings Selector ) 요약(" parent > child ") 자식노드 찾기 Child selector (" prev + next ") 다음 인접노드 찾기 Next Adjacent Selector (" prev + siblings ") 다음 형제노드 찾기 Next Siblings Selector 자식노드 찾기 ("parent > child") 특정노드 하위에있는 자식노드자식중에 노드를 찾고싶다면 (">") 를 사용하면된다. html top item item1 item2 middle item itme1 itme2 js $("#top>ul").css("border","1px solid #ff0000"); 결과 다음 인접노드 찾기 ("prev + next") prev의 형제노드중 next와 일치하는 인접노드를 모두 찾습니다. 아래.. [제이쿼리/jQuery] 속성으로 노드찾기 ( attribute selector ) 요약[name] 해당하는 속성을 가지고있는 노드 [name=value] 주어진 문자열과 속성이 동일한 노드 [name~=value]공백으로 구분된 단어와 속성이 일치하는 노드 [name*=value] 주어진 문자열을 포함하고있는 노드 [name$=value] 주어진 문자열로 끝나는 노드 [name!=value] 주어진 문자열이 속성과 다른 노드 [name^=value] 주어진 문자열로 시작하는 노드 [name=value][name2=value2] 다중속성선택자해당하는 속성을 가지고있는 노드 (" [name] ") 해당하는 attribute을 있는 노드를 가져옵니다. html 1.링크로연결 2.링크로연결 js $("[href]").css( "border", "3px solid purple" ); 결과 주어.. [ jQuery ] 셀렉터 기본 jQuery 기본셀렉터(Basic Selector) jQuery에는 여러가지 Selector 가 존재하지만 그중이 기본셀렉터를 알아보겠습니다. 첫번쨰로는 전체셀렉터를 찾는 All Selector 입니다. 1. All Selector 전체 셀렉터는 말그래도 포함한 모든 엘리먼트를 찾는 셀렉터입니다.사용방법은 jQuery(document).ready(function(){ var el = $("*"); el.css( "border", "1px solid black" ); }); 와같이 $(); 안에 문자열 "*" 를 넣어서 사용하게 되면 아래와 같이 출력되는것을 확인할수있다. body > ul > li > a 순으로 들어간 모든 엘리먼트에 border 가 생긴것이다. 2. ID Selector 아이디 셀렉터는.. 이전 1 다음
