본문 바로가기
반응형

IT/jQuery18

[jquery] jquery 메서드 선택자와 함께 알아두면 유용한 메서드 메서드 종류 종류 사용법 설명 is(".요소 상태") $(".txt1").is("visible") 선택한 요소가 보이면 true를 반복합니다. $.noConflict() var 변수 = $.noConflict(); 변수("요소 선택") $.noConflict() 함수를 이용하면 현재 제이쿼리에서 사용중인 $메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용합니다. get() $("요소 선택").get(0). style.color="#f00" 선택자에 get(0)을 적용하면 자바스크립트 DOM 방식의 스타일을 사용할 수 있습니다. is() 메서드 $("요소 선택").is("[checked | selected | visible | hidden | animated}].. 2020. 2. 7.
[jquery] jquery 콘텐츠 탐색 선택자 콘텐츠 선택자는 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자 입니다. 콘텐츠 탐색 선택자의 종류 종류 사용법 설명 $("요소 선택:contains(텍스트)") $("li:contains('내용2')") li 중 '내용2'라는 텍스트를 포함하는 요소만 선택. $("요소 선택").contents() $("p").contents() 선택 요소중 가장 가까운 하위요소 선택. $("요소 선택:has(요소명)") $("요소 선택").has(요소명) $("li:has('span')") $("li").has('span') li 요소 중 span을 포함하는 요소만 선택. $("요소 선택:not(:제외요소)") $("요소 선택").not(:제외요소) $("li:not(:first)") $("li") l.. 2020. 2. 6.
[jquery] jquery 속성 탐색 선택자 속성 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자입니다. 속성 선택자의 종류 종류 사용법 설명 $("요소 선택[속성]") $("li[title]") li 중 title속성이 포함된 요소만 선택. $("요소 선택[속성=값]") $("li[title='리스트']") li 중 title 속성값이 '리스트'인 요소만 선택. $("요소 선택[속성^=텍스트]") $("a[href^='http://']") href 속성값이 'http://'로 시작하는 요소만 선택. $("요소 선택[속성$=텍스트]") $("a[href$='.com']") href 속성값이 '.com'으로 끝나는 요소만 선택. $("요소 선택[href*=텍스트]") $("a[href*='on_sunday'].. 2020. 2. 5.
[jquery] jquery 배열 관련 메서드 제이쿼리 배열 관련 매서드 종류 종류 사용법 설명 each() / $.each() $("요소 선택").each(function) #.each($("요소 선택").function) 배열에 저장된 문서 객체만큼 메서드가 반복 실행됩니다. 배열에 저장된 객체의 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구합니다. $.map() $.map(Aarry.function) 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장됩니다. 새로 저장된 배열 객체를 반환합니다. $.grep() $grep(Aarry.function) 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되.. 2020. 2. 4.
[jquery] jquery 탐색 선택자 (위치 탐색 선택자) 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색해서 좀 더 정확하게 선택할 수 있습니다. 위치 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:first") $("li").first() 전체 li 요소 중 첫 번째 요소만 선택합니다. $("요소 선택:last") $("요소 선택").last() $("li:last") $("li").last() 전체 li 요소 중 마지막 요소만 선택합니다. $("요소 선택:odd") $("li:odd") li 요소 중 짝수 요소만 선택합니다. $("요소 선택:even") $("li:even") li 요소 중 홀수 요소만 선택합니다. $("요소 선택:first-of-type") .. 2020. 2. 3.
[jquery] jquery 선택자 (형제 선택자) 전체 형(이전) / 동생(다음) 선택자 기본형 $("요소 선택").prevAll() $("요소 선택").nextAll() 형제 관계 선택자 내용1 내용2 내용3 내용4 $(".txt").prevAll() -> .txt 기준으로 이전에 오는 형제 요소 전부 (h1,p-내용1) $(".txt").nextAll() -> .txt 기준으로 다음에 오는 형제 요소 전부 (p-내용3, p-내용4) 전체 형제 요소 선택자 선택한 요소의 모든 형제 요소를 선택합니다. $("요소 선택").siblings(); 형제 관계 선택자 내용1 내용2 내용3 내용4 .txt인 요소를 기준으로 전체 형제요소에 css가 적용 되었습니다. 범위 제한 전체 형/동생 요소 선택자 $("요소 선택").prevUntil("범위 제한 요소 선택.. 2020. 2. 2.
[jquery] jquery 선택자 (인접선택자, 부모요소 선택자, 하위요소 선택자) 인접 관계 선택자 인접 관계 선택자는 선택한 요소와 가까이에 있는 요소를 선택할 때 사용합니다. 제목1 제목2 내용1 내용2 내용3 wrap은 h1,h2,p의 상위 요소 h1,h2,p는 warp의 하위 요소 inner_wrap은 h1,h2,p의 부모(parent) 요소 h1,h2,p는 inner_wrap의 자식(children) 요소 h1은 h2의 형(prev)요소 p는 h2의 동생(next)요소 h2의 동생 선택자인 next() 함수를 사용하여 의 동생요소인 내용1을 선택하여 글자색을 초록색으로 적용합니다. h2의 부모 선택자인 parent() 함수를 사용하여 의 부모 요소인 을 선택하여 1px 빨간색 실선 테두리를 적용합니다. 부모 선택자 부모 요소 선택자 리스트1 리스트 1-1 리스트 1-2 리스트.. 2020. 2. 1.
[jquery] jquery 제이쿼리 선택자 제이쿼리 선택자 사용하기(기본형) 1. 선택한 요소에 지정한 스타일을 적용합니다. $("CSS 선택자").css("스타일 속성명","값"); $("CSS 선택자").css({"스타일 속성명":"값"}); 2. 선택한 요소에 지정한 속성을 적용합니다. $("CSS 선택자").attr("스타일 속성명","값"); 선택자를 이용하여 id="title"인 h1의 글씨색을 파란색으로 바꾸는 예시입니다. 안녕하세요~ on sunday입니다 ^^ 아래 표는 기본 선택자의 종류입니다. 구분 종류 사용법 설명 직접 선택자 전체 선택자 $(*) 모든 요소를 선택합니다. 아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택합니다 클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요.. 2020. 1. 20.
jquery CDN 가져오는 방법 jquery를 작동하기 위해서 필요한 jquery cdn을 가져와야합니다. 로고 클릭하면 jquery 사이트로 이동합니다. 1. jquery.com 제이쿼리 사이트로 이동하면 첫번째 메뉴에 다운로드를 클릭해서 들어갑니다. 2. 스크롤을 제일 아래로 내리면 하단에 jQuery CDN 을 클릭합니다. 3. minified 를 클릭하면 팝업창이 뜹니다.버전별로 다양하게 있는데 상단이 제일 최근 버전입니다. 4. 팝업창에 쓰여있는 스크립트 부분을 복사해서 가져옵니다. 5. 안쪽에 스크립트 붙여넣기 합니다.사용할 스크립트중에 제일 위쪽에 있어야 아래에 다른스크립드가 참고하여 동작하기에 수월합니다. 2019. 12. 20.
반응형