반응형 제이쿼리10 [jquery] jquery 객체편집 메서드2 replaceAll( ) / replaceWith( ) 메서드 replaceAll( ) 메서드와 replaceWith( ) 메서드는 선택한 요소를 새 요소로 바꿀 때 사용합니다. $("새 요소").reaplceAll("요소 선택"); $("요쇼 선택").replaceWith("새 요소"); $(function(){ $("h2").replaceWith("replace method") $("내용 -> change").replaceAll("div"); }); 박스 제목1 내용1 내용2 박스 제목2 내용3 내용4 -> 태그에 repaceWith( ) 함수로 태그와 내용을 바꾸고 -> 태그에는 replaceAll( ) 함수로 태그와 내용을 변경합니다. unwrap( ) / wrap( ) / wrapAll( ) /.. 2020. 2. 11. [jquery] jquery 객체 편집 메서드 종류 사용법 설명 before() $("요소 선택").before("새 요소"); 선택 요소 이전 위치에 새 요소 추가. after() $("요소 선택").after("새 요소"); 선택 요소 다음 위치에 새 요소 추가. append() $("요소 선택").append("새 요소"); 선택 요소 마지막 위치에 새 요소 추가. appendTo() $("새 요소").appendTo("요소 선택"); 선택 요소 마지막 위치에 새 요소 추가. prepend() $("요소 선택").prepend("새 요소"); 선택 요소 맨 앞에 새 요소 추가. prependTo() $("새 요소").prependTo("요소 선택"); 선택 요소 맨 앞 위치에 새 요소 추가. insertBefore() $("새 요소").inse.. 2020. 2. 10. [jquery] jquery 수치 조작 메서드 수치 조작 메서드 종류 사용법 설명 height() $("요소 선택").height(); $("요소 선택")height(100); 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환. width() $("요소 선택").width(); $("요소 선택").width(100); 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환. innerHeight() $("요소 선택").innerHeight(); $("요소 선택").innerHeight(300); 안쪽 여백을 포함한 높잇값을 반환하거나 변환. innerWidth() $("요소 선택").innerWidth(); $("요소 선택").innerWidth(100); 안쪽 여백을 포함한 너빗값을 반환하거나 변환, outerHeight() $("요소 선택").oute.. 2020. 2. 9. [jquery] jquery 속성 조작 메서드 종류 사용법 설명 html() html("새 요소") $("요소 선택").html(); $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소를 가져옵니다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성합니다. text() text("새 텍스트") $("요소 선택").text(); $("요소 선택").text("새 텍스트"); 선택한 요소가 감싸는 모든 텍스트를 가져옵니다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성합니다. attr("속성명") attr("속성명"."새 값") $("요소 선택").attr("속성명"); $("요소 선택").attr("속성명","새 값"); 선택한 요소의 지정한 속성(attribute)값을 가져.. 2020. 2. 8. [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 탐색 선택자 (위치 탐색 선택자) 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색해서 좀 더 정확하게 선택할 수 있습니다. 위치 탐색 선택자 종류 종류 사용법 설명 $("요소 선택: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 제이쿼리 선택자 제이쿼리 선택자 사용하기(기본형) 1. 선택한 요소에 지정한 스타일을 적용합니다. $("CSS 선택자").css("스타일 속성명","값"); $("CSS 선택자").css({"스타일 속성명":"값"}); 2. 선택한 요소에 지정한 속성을 적용합니다. $("CSS 선택자").attr("스타일 속성명","값"); 선택자를 이용하여 id="title"인 h1의 글씨색을 파란색으로 바꾸는 예시입니다. 안녕하세요~ on sunday입니다 ^^ 아래 표는 기본 선택자의 종류입니다. 구분 종류 사용법 설명 직접 선택자 전체 선택자 $(*) 모든 요소를 선택합니다. 아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택합니다 클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요.. 2020. 1. 20. 이전 1 2 다음 반응형
